深圳市博伦职业技术学校教案（详案）
科目： 手机游戏开发
序号 授课时间 2018 年 9 月 日（星期 ）第 、 节
授课
教师
黄嘉震 章 二 节 专业、
班级
17计算机
一二三班
讲授
主题
2.游戏控制-图片图层
教学
目标 (1)
(2)
(3)
(4)
(5)
重点
难点
1.教学重点
(1)
(2)
(3)
2.教学难点
学情
分析
学生
活动
教师精讲指导，机房一人一机，上机操作
信息化
手段
ppt、word实践文档
教
学
过
程
一、创设情境 导入新课
好，我们先来看看这节课的目标：
运行程序显示效果，
2、 讲授新课
(1) 图片图层
教师讲解：通过微课播放的方式，引导学生掌握。同时，在做练习阶段可发放下去，可
反复观看，掌握理论基础。
观后提问：什么是图片图层？分为几层？图层之间有什么关系？如何将显示元素添加给
其他显示元素？
通过学生回答的方式，了解学生的掌握情况
（二）递进式代码学习
教师提问：将图片图层的程序编写，可以分为那几个步骤？（思路）
引导学生对整体进行掌握，系统化剖析，从而掌握一定的编程思维。
教师通过对学生的回答，及时纠正学生的思路偏差，逐步促进学生的思维掌握。
教师讲解：
（1）定义场景，添加角色背景飞机，给背景添加鼠标事件，实现 plane的鼠标跟随
效果：预览
（2）添加左侧僚机，定义飞机的坐标、描点
效果：预览
（3）添加右侧僚机，定义飞机的坐标、描点
效果：预览
（四）知识要点
1.将显示元素添加给舞台
教师提问：回顾一下如何将显示元素添加到舞台？并找学生举例回答
学生：引导学生上台书写代码，实操回顾
教师讲解：
通过案例法的方式，更直观的显示效果
效果：预览
</代码讲解>
通过对以上对象的使用方法的解释，掌握使用。
(1)、将bg图片添加给舞台
app.stage.addChild(bg);
(2)、将plane图片添加给舞台
app.stage.addChild(plane);
注意：我们之前添加显示元素，都是将显示元素直接添加给舞台。
2.将显示元素添加给其他显示元素
教师提问：我们既然可以将显示元素添加到舞台，那么可不可以将显示元素添加给其
他元素呢？并找学生举例回答
学生：引导学生大胆思考，集思广益，动手尝试。得出结论：原来是可以的
教师讲解：
通过案例法的方式，更直观的显示效果
效果：预览
</代码讲解>
通过对以上对象的使用方法的解释，掌握使用。
(1)、将 leftPlane图片，添加给plane图片
plane.addChild(leftPlane);
(2)、将rightPlane图片，添加给plane图片
plane.addChild(rightPlane);
注意：当我们将rightPlane图片，添加给plane图片时
(1)、rightPlane图片会随着 plane图片的移动而移动
(2)、设置 rightPlane图片的 x、y时，rightPlane将不再以窗口的左上角为坐标原点，
而是以plane图片的锚点为坐标原点。
教师通过图示法的方式解读：
如下图：
引导学生分析左侧僚机与飞机之间的距离关系。
3.图层与显示效果
教师提问：思考：图层设计真的与构想的显示效果一致吗？并找学生举例回答
学生：引导学生动手实践得出结论，
教师讲解：
通过案例法的方式，更直观的显示效果
效果：预览
</现象讲解>
提问：思考为什么boom图片，没有出现在图层的最顶端？
教师通过微课的方式，对出现的现象进行解读。引导学生解惑。
三、扩展知识及错误案例分析
（1）给敌机加血条
1.1 给敌机加血条
教师讲解：
通过贴近学生玩过的游戏，贴近学生的兴趣点的方式，更直观的显示效果
</>示例
示例效果：预览
</ >代码讲解
1、给敌机添加血槽
var hpBg = new PIXI.Sprite.fromImage("res/plane/ui/xue_2_03.png");
hpBg.scale.x = 0.5;
hpBg.scale.y = 0.3;
hpBg.x = -40;
hpBg.y = -20;
enemy.addChild(hpBg);
给敌机添加血槽
hpBg.scale.x = 0.5：将血槽图片 x方向缩放到原来的 0.5倍
hpBg.scale.y = 0.3：将血槽图片 y方向缩放到原来的 0.3倍
enemy.addChild(hpBg)：将血槽图片添加给敌机
2、给敌机添加血条
var hpFg = new PIXI.Sprite.fromImage("res/plane/ui/xue_3_03.png");
hpFg.scale.x = 0.5;
hpFg.scale.y = 0.3;
hpFg.x = -40;
hpFg.y = -20;
enemy.addChild(hpFg);
给敌机添加血条
hpFg.scale.x = 0.5：将血条图片 x方向缩放到原来的 0.5倍
hpFg.scale.y = 0.3：将血条图片 y方向缩放到原来的 0.3倍
enemy.addChild(hpFg)：将血条图片添加给敌机
四、课堂练习
通过课堂练习的方式，来加固课堂的知识点的掌握。先让学生做练习，最后教师统一讲解。
（一）测验
先展示效果（通过 GIF图片、或者运行程序）
（2）对练习进行要求说明
创建一个名为 app 的应用，宽：700，高：400
参照上边示例显示效果，添加背景图片、左右两个方向按扭
创建人物上半身图片，添加给舞台
创建人物下半身图片，添加给上半身，
通过控制人物上半身，实现整个人物的动画效果
当鼠标点击方向按钮时，控制人物向对应的方向移动，
并且人物图片实现水平翻转效果
(3)提供相应的图片资源
(4)通过视频微课讲解的方式，对知识点实操进行详细的讲解。
教
学
反
思
/1
