网页版2048小游戏-教学课件.pptx

《网页版2048小游戏-教学课件.pptx》由会员分享，可在线阅读，更多相关《网页版2048小游戏-教学课件.pptx（39页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第12章 网页版2048小游戏DOM 操作动画特效 事件处理 对象学习目标掌握掌握掌握掌握DOM，能够对元素进行操作1 12 2掌握事件处理，完成不同功能的开发 掌握动画特效，改善游戏的体验度3 3目录实现步骤分析12.2游戏功能实现12.3点击查看本小节知识架构12.1游戏功能展示12.1 游戏功能展示玩法介绍p 按键盘的上（）、下（）、左（）、右（）控制数字的移动。p 每移动一次，所有的数字方块都会往移动的方向靠拢，然后系统会在空白的地方随机出现一个数字（2 或4）方块。p 相同数字的方块在移动的过程中会叠加，通过不断的叠加，最终拼凑出2048 这个数字就算成功。12.1 游戏功能展示开始

2、游戏 游戏中12.1 游戏功能展示游戏获胜 游戏失败12.2 实现步骤分析游戏界面构成p 2048 游戏页面是由标题、分数和游戏操作区组成。p 游戏操作区是由44 的棋盘格子和数字格组成。p 数字格是由数字和背景色组成。p 数字的颜色有黑色和白色。p 数字格的背景色，根据数字值的不同而不同。p 游戏结束时的页面由提示信息（文字和分数）和“重新开始”按钮组成。12.2 实现步骤分析游戏规则p 游戏操作键为：上（）下（）左（）右（）。p 数字格子移动的条件是，当操作方向的其他格子是空或相邻两个格子的数值相同时才可以移动。p 值相同的数字格子叠加后，在分数区域显示对应分值（相同数值的累加值）。p 当

3、玩家成功叠加出2048 的数字格子后，游戏就算顺利通关了。p 当数字填满所有格子，并且相邻的格子也无法移动的话，游戏结束。12.2 实现步骤分析涉及的相关技术p 游戏界面的设计：HTML 和CSS。p 游戏的功能实现：JavaScript 和jQuery。12.3 游戏功能实现1.设计游戏界面构建网页游戏布局初始化游戏界面自动生成空棋盘格12.3 游戏功能实现1.设计游戏界面构建网页游戏布局编写index.html 文件，在文件中完成2048 游戏的页面布局。p 在页面的指定位置调用Game2048()函数完成空棋盘格的自动创建。p Game2048()函数的参数包括网页中的id 前缀、棋盘格

4、的单边单元格数量、单元格的单边长度（像素）以及单元格间距（像素）。12.3 游戏功能实现1.设计游戏界面初始化游戏界面编写Game2048.js 文件，用于保存与游戏相关的代码。p 编写Game2048()函数，接收用户传递的参数。p 在Game2048()函数体内，编写View 构造函数，在构造函数中设置棋盘背景的宽度和高度。12.3 游戏功能实现1.设计游戏界面自动生成空棋盘格继续编写View 对象，实现自动生成空棋盘格。p 为View 对象添加getPos()方法：用于计算每个单元格的left 与top 值。p 计算公式为：margin+n*(size+margin)。n 表示当前单元格

5、前共有多少个单元格。margin 表示间距，size 表示单元格边长。例如，横向第2 个单元格的left 值为20+1*(100+20)=140px。12.3 游戏功能实现1.设计游戏界面自动生成空棋盘格继续编写View 对象，实现自动生成空棋盘格。p 为View 对象添加init()方法：用于根据len（棋盘单边单元格数量）自动生成空单元格，生成后将会添加到game_container 容器中。p 在Game2028 函数中调用init()方法进行测试：view.init();12.3 游戏功能实现2.控制游戏数值创建棋盘数组生成随机数字单元格显示数字单元格12.3 游戏功能实现2.控制游戏

6、数值创建棋盘数组编写Board 构造函数，专门处理单元格中的数值。p 为Board 对象添加init()方法：用于根据指定单元格数量创建二维数组，在初始情况下所有的单元格都是空的，每个单元格赋值为0。p 在Game2028 函数中调用init()方法进行测试：var board=new Board(len);board.init();console.log(board.arr);12.3 游戏功能实现2.控制游戏数值生成随机数字单元格继续为Board 原型对象增加方法，用于生成随机数字单元格。p 为Board 原型对象增加generate()方法：在该方法中根据棋盘数组中的值（值为0），随机生

7、成数字2 或4，保存到数组的随机位置。p 为Board 对象增加事件方法onGenerate()，将新创建的单元格在二维数组中的位置和数字内容传递给View 对象进行显示。12.3 游戏功能实现2.控制游戏数值生成随机数字单元格继续为Board 原型对象增加方法，用于生成随机数字单元格。p 在Game2048 函数中测试程序，生成2 个随机数：board.onGenerate=function(e)console.log(e);board.generate();board.generate();12.3 游戏功能实现2.控制游戏数值显示数字单元格继续编写View 对象，用于显示数字单元格。p

8、为View 原型对象增加addNum()方法，根据x、y和num 显示数字单元格。x表示数字所在单元格的随机横坐标。y表示数字所在单元格的随机纵坐标。num 表示随机生成的数字（2 或4）。p 在addNum()方法体内，完成数字单元格的拼接后并以动画的形式展示。12.3 游戏功能实现2.控制游戏数值显示数字单元格继续编写View 对象，用于显示数字单元格。p 在Game2048 函数中测试view.addNum()，显示数字单元格。board.onGenerate=function(e)/替换原来的“console.log(e);”view.addNum(e.x,e.y,e.num);12.

9、3 游戏功能实现3.实现单元格移动单元格左移动画效果移动单元格通过键盘移动单元格12.3 游戏功能实现3.实现单元格移动单元格左移以左移为例，分析游戏的移动规则。左移前 左移后0200、0020、0002 20002200、0220、0022、2020、0202、2002 40000222、2022、2202、2220 42002222 44000420、0042、0402 4200对于2222 这种情况，其合并过程为2222402242024400，已经合并过的单元格不会再次合并，因此结果不是8000。12.3 游戏功能实现3.实现单元格移动单元格左移在Board 原型对象中新增moveLe

10、ft()方法，对二维数组中的数字进行左移操作。遍历数组，外层循环从上到下遍历数组行，内层循环从左到右遍历数组列。在遍历到第1 行第1 列时，向右依次查找1 个非0 单元格，如果找不到，则跳转到第步。判断第1 列是否为0，如果是，将找到的非0 单元格移动到第1 列，然后重复第步。12.3 游戏功能实现3.实现单元格移动单元格左移在Board 原型对象中新增moveLeft()方法，对二维数组中的数字进行左移操作。判断第1 列与找到的非0 单元格数字是否相等，如果相等，则将第1 列数字乘以2，然后将找到的非0 单元格数字置为0，实现左移合并的效果。第1 列的操作结束，进入第2 列的操作，类似于第步。