1. 研究目的与意义（文献综述）
1.1 研究目的及意义俄罗斯方块是一款风靡全球的掌上游戏，由俄罗斯人 阿列克谢·帕基特诺发明，故得此名。
俄罗斯方块的发明者，是当时还被称为”苏联”的联邦科学员，该游戏最初是作为自我消遣的电脑游戏而被制作出来的。
俄罗斯方块的基本规则是移动、旋转和摆放游戏自动输出的各种方块。
2. 研究的基本内容与方案
本设计使用 HTML5 实现游戏界面的设计和开发，使用 javascript 实现游戏规则，完成方块生成，方块移动，方块消除等功能2.1 游戏界面的设计和开发在 Web 页面中通过 Canvas 绘制图像, 其工作过程如下:第一步:在页面中添加 Canvas 绘图区域, 并通过 height 和 width 定义该区域的长宽, 如果需要将该无色透明的“画布”显示出来, 可通过添加 style 添加边框或是背景颜色等属性实现区域的可视化。代码如下:canvas id= ” mycanvas ” width= ” 500px ” height= ” 500px ” style= “background:red”/canvas这样就创建了一个 ID 号为“mycanvas”, 长宽各为500 像素背景为红色的 Canvas 绘图区域。第二步:通过 ID 号获取对应 Canvas 的访问权, 以便在该区域中作图。代码如下:var canvas=document.get Element By Id (‘mycanvas’) 这样就获取了 ID 号为mycanvas 的绘图区域。第三步:定义一个变量传入 Canvas 类型, 明确绘制图形的类型。代码如下:
var context=document.get Context (“2d”) 这样就定义了一个 context 变量, 明确了 Canvas 绘图类型为 2d 图形。第四步:进行具体图形的绘制。比如绘制矩形、圆形、路径等, 还可以制作动画, 甚至游戏开发。2.2 方块生成，方块移动，方块消除等功能方块生成：俄罗斯方块由七种基本形状组成，每一种形状有四种旋转状态，故可以用4*4 二维数组 shap 表示，其中 1 表示有颜色，0 表示无颜色，shap 的每个值，也就是每个小方块，存有三个数值，分别表示 x 坐标，y 坐标，上色状态（0 或 1）。这就构造出了一个俄罗斯单方块方块移动：当要旋转方块 90 度时，其实就是把 shap 数组行变列，列变行，只需要改变上色状态即可。当要移动时，以向左为例，y 坐标不变，同是改变 x 坐标相应数值，并清除原来的上色的方块方块的清除：如果下降过程中满行了，那么我们就要清空一整行的小方块，然后被清空上面的集体往下移。
3. 研究计划与安排
第 1－3 周：查阅相关文献资料，明确研究内容，了解研究所需理论基础。
确定方案，完成开题报告。
第 4－7 周：熟悉掌握基本理论，熟悉开发环境。
4. 参考文献（12篇以上）
1] 王西艳. 俄罗斯方块游戏的设计与实现[j] news market 第 264 期、[2] 黎志雄 黄彦湘 陈学中. 基于 html5 游戏开发的研究与实现[j] 东莞理工学院学报 2014.（05）.48-53[3] 严伟中. 关于 html5 的核心技术研究与应用[j] 网络安全技术与应用2014.（3）.33-36[4] 郑美容. 基于 html5 的 web 应用研究[j] 工业控制计算机 2014，（12）55-56[5] 王莉. 关于 html5 应用现状与前景思考[j] 电脑迷 2018 .（7）.44-47[6] 徐青. 基于对象的 js 语言[j] 电脑迷 2018 .（7）.65-72[7] 明日科技.html5 从入门到精通[m]（第二版）.北京：清华大学出版社.2017[8] 明日科技.javascript 从入门到精通[m]（第三版）北京：清华大学出版社.2019[9] 陆凝牛.html5 开发精要与实例详解[m] 北京： 机械工业出版社，2011[10] wang yi-hsuan. development of a html5 game with construct2 forlearning applications[c]. acm international conference proceeding series.2019. 1-4[11] tanaya michael; chen huaming; pavleas jebediah; sung kelvin.building a 2d game physics engine: using html5 and javascript[m]. 2017. apressmedia llc.[12] rob hawkes，html5 canvas 基础教程 [m] 北京：人民邮电出版社，2012[13] david flanagan.javascript 权威指南[m] 北京：机械工业出版社，2012[14] 基司.javascript dom 编程艺术[m] 北京; 人民邮电出版社，2007[15] shen ke; si zhanjun; zhang lu. research and implement of html5 gamebased on websocket[c]. lecture notes in electrical engineering. 2017(417)
[16] jason bengtson.what is html5 and what do you need to know aboutit?[j] journal of hospital librarianship 2013 392-398
