《JavaScript程序设计案例教程》教案 第13章 网页版贪吃蛇.docx

PAGE2

PAGE2

PAGE9

PAGE9

课题

网页版贪吃蛇

课时

4课时（180min）

教学目标

知识目标：

（1） 掌握使用浏览器事件处理游戏中各种操作的方法

（2）能够使用CSS提升游戏效果

能力目标：

（1）掌握DOM元素操作：通过对网页中各种元素的创建、修改和删除等操作，实现游戏界面的构建和动态更新

（2）掌握浏览器事件处理：利用浏览器提供的事件监听机制，对键盘方向键的操作进行监听，实现小蛇的移动控制

（3）掌握定时器的使用：使用定时器实现食物的随机出现以及小蛇的自动移动

（4）掌握使用动画样式提升界面效果的方法：在小蛇移动时，使用CSS的transition属性，将其设置为按照moveSpeed属性值进行线性动画操作

素质目标：

（1） 养成分析问题，事前规划的良好习惯

（2）树立正确的文化观，提高将文化与科技融合的能力

教学重难点

教学重点：掌握DOM操作构建游戏界面，包括游戏设置、分数与引导、容器、小蛇、障碍物和食物等元素的创建与样式设置；运用浏览器事件处理实现小蛇移动控制；利用定时器管理食物出现和小蛇移动；通过动画样式增强游戏视觉效果，提升用户体验

教学难点：小蛇移动及游戏结果判定的逻辑实现，包括复杂的转向处理、小蛇移动位置的准确计算、多种游戏结束情况的判定以及强化小蛇的功能实现；定时器的管理和游戏结束弹窗的交互逻辑

教学方法

问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务

请同学们设计一个简单的游戏，包括游戏界面、玩法规则等方面，然后在APP上分享设计思路。

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

问题导入

【教师】提出以下问题：

同学们都玩过经典的贪吃蛇游戏，那大家有没有想过，这样一个看似简单却充满趣味的游戏是如何用我们学过的HTML、CSS和JavaScript技术来实现的呢？

【学生】思考、举手回答

传授新知

【教师】通过学生的回答，引入新知，讲解并演示网页版贪吃蛇的制作流程

13.1功能展示

?【教师】利用多媒体展示“游戏设置界面”“游戏开始界面”“游戏进行中界面”和“游戏结束界面”图片，（详见教材），并进行讲解

贪吃蛇小游戏的玩法比较简单，一般通过键盘上的方向键上（↑）、下（↓）、左（←）、右（→）来控制小蛇移动。游戏界面上会随机出现食物，当小蛇吃到食物时，它的身体将会变长。界面上也会存在部分障碍物，当小蛇碰撞到障碍物、墙壁或者小蛇自己的身体时，本局游戏结束。另外，此处的游戏支持设置障碍物个数和小蛇的移动速度，效果如图所示。

13.2功能分析

在动手实现贪吃蛇小游戏之前，最好能对游戏功能进行详细分析，然后根据分析结果一步步实现完整游戏功能。一个完整的游戏主要由游戏界面、游戏玩法两大部分组成。下面分别对游戏界面和游戏玩法进行详细分析。

1．游戏界面

贪吃蛇游戏界面分为设置界面、操作界面和结束界面，游戏设置界面支持设置障碍物个数和移动速度；游戏操作界面包含游戏操作区域、游戏分数区域和游戏介绍区域；游戏结束界面包含本次游戏的分数和“重新开始”“退出游戏”两个按钮。

游戏操作区域为一个400像素×400像素，白色背景的宫格区域，其中包括小蛇、障碍物和食物，小蛇的头部为一个带缺口的黄色小圆圈，身体由多个棕色小圆圈组成；障碍物为棕黄色的小方块；食物为红色小圆圈。

【课堂讨论】

?【教师】组织学生以小组为单位讨论以下问题：

请同学们讨论在游戏的界面设计中，哪些元素是最关键的？为什么？比如游戏容器的大小和颜色、小蛇和食物的样式等对游戏体验有怎样的影响？

?【学生】聆听、思考、小组讨论，由小组代表上台发表讨论结果

?【教师】总结学生的讨论结果

2．游戏玩法

在游戏设置界面完成游戏功能设置后，单击“开始游戏”按钮进入游戏界面。按键盘方向键上（↑）、下（↓）、左（←）、右（→）可操作游戏。小蛇在左右移动时，无法使用左（←）、右（→）方向键进行转向；同理，上下移动时，无法使用上（↑）、下（↓）方向键进行转向。

在开始游戏时，游戏界面会出现设置的障碍物，也会随机出现食物，同一时间仅会出现一个食物，吃掉当前食物后，才会出现下一个食物。吃掉食物后，小蛇身体将增加一节，同时游戏分数增加100。当小蛇的头部碰撞到障碍物、墙壁或者自己的身体时，游戏结束。

通过上述分析可以得出结论，使用HTML和CSS，加上JavaScript的DOM操作可以创建出整个游戏设置界面和游戏操作界面。通过JavaScript的事件监听对键盘方向键的操作进行监听，来实现游戏的玩法。在游戏完整实现时，玩家可以在网页