HTML5 课程名称：HTML5游戏开发课程编号：课程类别：职业能力课适用专业：计算机应用技术专业（互动媒体技术方向）学 时：60学 分：4.0一、课程的性质 本课程为计算机应用技术专业（互动媒体技术方向）的重要的职业能力课。通过本课程的实训，应达到规划、设计、开发、测试HTML5网站和游戏编程的目的。本门课程的先修课程包括：网页设计基础、PHOTOSHOP、FLASH动画制作、FLASH面向对象编程、UI界面设计。后续课程为游戏开发实训、毕业设计。二、设计思路本课程按实际的全HTML5游戏开发路径来进行课程设计。本实训课开设之前已初步掌握了互动媒体技术专业的第一阶段的技术课程。本课程就是以开发全HTML5游戏开发的方式，综合运用这些学过的技术来开发实际项目。一方面达到加深知识运用的目的，另一方面体会项目开发的过程，体会团队合作的做法，明白知识与能力的关系问题，进一步加深理解项目开发在学习中的重要作用。本课程只在互动媒体技术方向开课，所以要围绕互动媒体技术方向实际和需要来选择内容。例子尽量往互动媒体技术方向靠。重在互动媒体技术的应用，即用HTML5平台技术能进行怎么样的商业化的全HTML5游戏开发。
本课程建议课时为60学时，学分为4学分。三、课程目标通过完成HTML5游戏开发，即全HTML5游戏开发的工作任务，要达到下面的教学目标：一是了解全HTML5游戏开发的的项目规划；二是实践团队合作；三是实践全HTML5游戏开发的所需要的HTML5技术，包括HTML5、CSS3、JavaScript、canvas、CreateJS等的运用等；四是体会全HTML5游戏开发的全过程。通过本课程的学习，最终达到全HTML5游戏开发所应具备的知识和技能，为商业化的全HTML5游戏开发，及至游戏设计、游戏项目打好基础。职业能力培养目标能对全HTML5游戏开发过程进行分析（重点，难点）学会全HTML5游戏开发项目规划（重点）能成立项目小组并适当分工（重点）能进行HTML5游戏开发Canvas、CreateJS设计（重点，难点）能进行HTML5编制小游戏（重点）能进行HTML5游戏开发项目总结（重点）四、课程内容和要求序号教学内容知识内容与要求技能内容与要求参考课时工作任务课程模块1项目一JavaScript提高模块1Javascrips概述1 Javascrips的发展历程2 Javascrips的基本特征1.了解JavaScript编程知识1模块2Javascrips新功能1 JavaScript小项目1．使用项目方式对JavaScript语法与效果初步认识1模块3构建与实现JavaScript功能1 使用案例方式进行实训实现JavaScript效果掌握游戏开发的规范标准能用JavaScript开发简单的效果22项目二html5 web canvas模块1html5 web canvas概述1．html5 web canvas的发展历程2 html5 web canvas的优势和劣势3 html5 web canvas的浏览器支持情况1．能按需要设定显示对象1模块2html5 web canvas使用html5 web canvas检测浏览器支持情况canvas接口的属性和方法画笔的风格设置基本形状绘制图像图形的处理Canvas文本的处理Canvas图片的处理1．能按需要添加canvas对象2．能绘制简单的Canvas图像3．能处理canvas对象的事件2模块3html5 web canvas的开发实例分析开发需求程序主框架的搭建底部导航栏缩略图底部导航栏翻页按钮点击放大图片和翻页功能缩略图预览显示自动隐藏导航栏1．Canvas开发实践4模块4使用canvas绘图 1．了解绘图 canvas使用基础知识2．了解 Graphics 类3．绘制直线和曲线4．使用内置方法绘制形状5．创建渐变线条和填充6．将 Math 类与绘制方法配合使用7．使用绘图canvas进行动画处理1．能用编程的方式绘制几何图形2．能用绘图 canvas 进行动画处理4模块5Canvas案例1．Canvas编制小游戏实践与分析1．能使用Canvas技术进行游戏编程43项目三CreateJS模块1CreateJS概述1.下载CreateJS2.介绍CreateJS3.对比CreateJS与Canvas1.了解CreateJS2.认识CreateJS与canvas区别1模块2 CreateJS包简介1.EaselJS包2.TweenJS包3.SoundJS包4.PreLoadJS包1.掌握EaselJS包2. 掌握TweenJS包3. 掌握SoundJS包4. 掌握PreLoadJS24项目四EaselJS基础模块1EaselJS容器1.使用案例的方式掌握easelJS容器1.掌握easelJS容器1模块2 EaselJS绘图使用EaselJS进行绘图1.能够使用EaselJS绘图1模块3EaselJS事件使用案例认识EaselJS事件掌握EaselJS事件2模块4CreateJS控件1.使用案例实践Text2. 使用案例实践BitMap MovieClip3. 使用案例实践Sprite4. 使用案例实践DOMElement 1.掌握Text2. 掌握BitMap MovieClip3. 掌握Sprite4. 掌握DOMElement2模块5 Tween函数包1. 使用案例实践CSSPlugin2. 使用案例实践Ease3. 使用案例实践MotionGuidePlugin4. 使用案例实践Tween1.掌握CSSPlugin2. 掌握Ease3. 掌握MotionGuidePlugin4. 掌握Tween25项目五Canvas效果实现模块1帧动画效果了解线程和进程帧动画效果的特点帧动画效果的工作原理帧动画效果实现帧动画效果代码实现2跳舞蝴蝶效果了解线程和进程跳舞蝴蝶效果的特点跳舞蝴蝶效果的工作原理跳舞蝴蝶效果实现跳舞蝴蝶效果代码实现2颜色拼图游戏了解线程和进程颜色拼图游戏的特点颜色拼图游戏的工作原理颜色拼图游戏实现颜色拼图游戏代码实现26项目六CreateJS+canvas效果实现图像处理效果了解线程和进程图像处理效果的特点图像处理效果的工作原理图像处理效果实现图像处理效果代码实现2处理跑跳效果了解线程和进程处理跑跳效果的特点处理跑跳效果的工作原理处理跑跳效果实现处理跑跳效果代码实现2实现炫酷效果了解炫酷效果线程和进程炫酷效果的特点炫酷效果的工作原理炫酷效果实现炫酷效果代码实现27项目七HTML5小型游戏围住神经猫游戏了解游戏流程围住神经猫游戏特点围住神经猫游戏工作原理围住神经猫游戏效果实现围住神经猫游戏代码实现2看你有多色了解游看你有多色戏流程看你有多色特点看你有多色工作原理看你有多色游戏效果实现看你有多色游戏代码实现2坦克大战游戏了解坦克大战线程和进程坦克大战的特点坦克大战工作原理坦克大战效果实现坦克大战代码实现48HTML5大型游戏太空英雄大战了解太空英雄大战线程和进程太空英雄大战的特点太空英雄大战工作原理太空英雄大战效果实现太空英雄大战代码实现49项目实训构建HTML5 HTML5游戏及项目答辩HTML5 HTML5游戏项目开发过程HTML5 HTML5游戏项目演示与答辩能用软件工程方法进行项目开发对项目进行答辩210机动机动学习4总计60五、实施建议1.教材编写建议（1）必须依据本课程标准编写教材，教材应充分体现全HTML5游戏开发的设计思想，突出职业能力培养的思路。
（2）项目课程是以工作任务为主线不是以知识为主线，理论知识存在被割裂、零散化的倾向。因此，设计学习项目时，尽可能将理论知识用工作任务穿起来，理论知识内容在符合工作任务职业行为的同时，也符合学生的认知规律，做到由易到难，由简到繁，分散难点，前后衔接，循环前进。（3）教材的各项目通常应包括以下几项内容：1）教学目标；2）工作任务；3）实践操作（相关实践知识）；4）问题探究（相关理论知识）；5）知识拓展（选学内容）；6）英语词汇索引和解释；7）实训与练习。（4）工作任务通常应包括以下内容：（1）工作任务名称；（2）技能训练目标；（3）工作任务预览；（4）工作技术及原理分析；（5）技能训练步骤；。（5）教材中的活动设计的内容要具体，目标明确，并具有可操作性。（6）教材内容应体现先进性、通用性、实用性。注重体现全全HTML5网站项目和游戏开发的知识。（7）教材应图文并茂，引用图表要清晰精美；语言表述应深入浅出、文字精练，并力求形成一种灵活、亲切、活泼的语体风格。从而增加教材的可读性，增强教材对学生的吸引力。（8）教材要配上多媒体光盘，内容包括素材，实例，及操作视频。（9）教材应由学校教师与企业工程师共同编写。建议教材 《HTML5游戏开发案例教程》 人民邮电出版社陈惠红主编2.教学建议（1）《HTML5游戏开发》教学宜采用“问题引入、知识对应、实例加强、上机提高”的一体化教学模式，教学地点应安排在机房进行。（2）本课程所列内容都有很强的针对性，是专对全HTML5网站项目和游戏开发的开发设计而定制的。教学中要结合实际案例加以解释及加
