第12章 网页版2048小游戏 教学设计

第3章面向对象（上）《JavaScript前端开发案例教程》教学设计课程名称：JavaScript前端开发案例教程授课年级：年级授课学期：学年第一学期教师姓名：某某老师年月日课题名称第12章网页版2048小游戏计划学时3学时内容分析2048是一款比较流行的数字游戏，它是GabrieleCirulli为了好玩，根据已有的数字游戏玩法开发而成的一款新的数字游戏，并将其开源版本放到Github上后意外走红。随后2048出现了各种衍生版，如2048六边形、挑战2048、汉服2048等。接下来，在全面学习了JavaScript和jQuery以后，请利用DOM操作、动画特效、键盘事件、鼠标事件等结合HTML与CSS实现网页版的2048小游戏。教学目标及基本要求掌握DOM，能够对元素进行操作掌握事件处理，完成不同功能的开发掌握动画特效，改善游戏的体验度教学重点控制游戏数值、实现单元格移动、判断胜利和失败教学难点实现单元格移动教学方式教学采用教师课堂讲授为主概念性知识点：提出为什么，将抽象具体化，配合教学PPT、图例辅助讲解。功能性知识点：提需求，并上机演示如何应用，重点内容总结运行原理。综合实战操作：分析整体的设计思路和步骤，对具体操作进行上机演练。教学过程第一学时（设计游戏界面、控制游戏数值）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）演示Ajax技术在互联网中的应用，引出本次要学习的课程。Ajax技术与服务器密切相关，在学习Ajax前需要先了解服务器相关的知识。（3）明确学习方向。构建网页游戏布局。初始化游戏界面。自动生成空棋盘格。创建棋盘数组。为棋盘生成随机数字单元格。在页面中显示数字单元格。二、知识讲解设计游戏界面编写HTML页面，准备游戏分数、棋盘背景、棋盘格的基本结构和样式。封装Game2048()函数实现游戏功能，分析函数的参数如何进行设定。实现游戏的class前缀、单元格数量、单元格大小、单元格距离的可定制性。分析程序架构，引出页面代码和数据代码相分离的设计思想。利用JavaScript初始化游戏界面，通过View构造函数专门自动生成棋盘背景和棋盘格，根据参数来控制单元格的显示效果。自动生成棋盘格，分析每个棋盘格的显示位置如何计算。在View中编写init()方法实现自动生成效果。控制游戏数值编写Board构造函数处理单元格中的数值。将单元格抽象成二维数组，外层数值表示行，内层数值表示列。在Board中编写init()方法实现二维数组的初始化。编写generate()方法实现在二维数组的随机位置生成随机数字单元格。引出事件的设计思想，当数据发生改变时，触发事件，控制页面变化。在View中编写addNum()方法，实现在页面中显示数字单元格。为不同的数字单元格设置不同的样式。实现在棋盘格中增加单元格时，以展开的动画效果进行显示。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第二学时（实现单元格移动、设置游戏分数、判断胜利和失败、重新开始游戏）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。单元格数组元素移动。以动画效果移动页面中的单元格。通过键盘控制单元格移动。设置游戏分数。判断游戏是否获胜。判断游戏是否失败。完善游戏结束页面。重新开始游戏。二、知识讲解实现单元格移动分析游戏的移动规则，以左移进行演示。思考具体算法如何实现。在Board中增加moveLeft()方法，实现二维数组中的数字左移操作。将每一行的单元格按照指定需求进行遍历。分析比较的情况，不同情况采取不同的处理方式。实现单元格的移动效果。通过控制台查看移动结果，在每次进行移动操作时，触发onMove()事件，控制页面中的单元格进行移动。记录整个移动操作是否发生过移动，以确定是否需要生成新的单元格，以动画效果移动单元格，控制页面中的指定位置的单元格进行移动或合并操作。并注意设置动画的时间，以及解决动画效果重叠的问题。实现通过键盘移动单元格，当按下键盘中的指定方向键时，调用对应的方法实现单元格移动。在左移动完成后，继续实现右移、上移、下移的效果。设置游戏分数分析游戏分数计算规则。在onMove()事件中控制游戏的分数变化。在View中增加updateScore()方法，控制页面中的分数显示。判断胜利和失败分析游戏胜利条件。通过变量winNum保存游戏的胜利条件数值，并通过变量isGameOver控制游戏是否已经结束。若游戏已经结束，则在键盘事件中不再进行单元格的移动操作。在onMove()事件中判断游戏的结果，若合并出了指定数字的单元格，则表示游戏获胜了。分析游戏失败条件。在Board中编写canMove()方法，判断当前是否还可以继续移动。对二维数组进行遍历，若既不能合并又不能移动，则表示游戏失败了。完善游戏结束页面，在游戏胜利或失败时，显示游戏结果。重新开始游戏为了方便在游戏失败时重新开始游戏，在View中增加cleanNum()方法，实现清空页面中所有数字单元格。调整代码结构，将游戏初始化相关的代码封装到start()函数中，从而使代码更好的复用。当进行重新开始游戏操作时，通过调用start()函数重新开始游戏。三、知识巩固（