摘要：近些年Web技术和移动设备硬件发展速度之快让人惊叹。游戏是一个大市场，而开发网页或终端游戏不仅成本很低，周期也很短。一旦投入市场，短时间就能盈利。因此也得到了越来越多开发商的青睐。动画作为游戏的核心，也成为了开发者们关注的重点。Canvas凭借无需插件就拥有强大的绘图功能等优点，在一定的范围内取代了Flash。再加上HTML5支持开源与跨平台，基于Canvas的游戏逐渐成为游戏开发者们的重心。本文在Canvas的基础上，结合使用JavaScript设计了一款环形的俄罗斯方块小游戏。本次设计的目的在于不借用任何游戏引擎，仅使用现有的HTML5、JavaScript以及开源类库等原生技术来实现游戏的开发。验证Canvas在游戏开发中的优越性。此次设计的环形俄罗斯方块，总共有三个模式和增加难度的幽灵方块。通过结合使用CSS3和JavaScript对游戏界面进行美化。

关键词：HTML5  Canvas  游戏开发  三维俄罗斯方块

目录

摘要

ABSTRACT

第1章 绪论-1

1.1 HTML5-1

1.1.1 HTML5特性-1

1.1.2 HTML5国内外发展现状-1

1.2 相关技术简介-2

1.2.1 Canvas元素简介-2

1.2.2 实现第一个Canvas程序-2

1.2.3 JavaScript以及jQuery简介-4

1.2.4 CSS3简介-6

1.2.5 开发工具sublime介绍-8

1.2.6 调试工具Chrome简介-8

第2章 游戏功能设计与实现-9

2.1 游戏分析-9

2.2 必要的JavaScript知识-9

2.3 游戏主页画面显示-10

2.4 开始游戏界面布置-12

2.5 控制方块的移动-13

2.6 游戏中的暂停事件-13

2.7 方块的消除-14

2.8 游戏结束-14

2.9 附加模式模块预留-15

第3章 游戏附加模式的实现与界面美化-16

3.1 争分夺秒模式-16

3.2 爱消除模式-16

3.3 幽灵方块-17

3.4 界面美化-18

3.4.1 界面按钮美化-18

3.4.2 花环变幻-19

第4章 结论-21

参考文献-22

致谢-23