HTML5游戏开发案例教程.docVIP

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提高 模块1 Javascrips概述 1 Javascrips的发展历程 2 Javascrips的基本特征 1.了解JavaScript编程知识 1 模块2 Javascrips新功能 1 JavaScript小项目 1．使用项目方式对JavaScript语法与效果初步认识 1 模块3 构建与实现JavaScript功能 1 使用案例方式进行实训实现JavaScript效果 掌握游戏开发的规范标准 能用JavaScript开发简单的效果 2 2 项目二 html5 web canvas 模块1 html5 web canvas概述 1．html5 web canvas的发展历程 2 html5 web canvas的优势和劣势 3 html5 web canvas的浏览器支持情况 1．能按需要设定显示对象 1 模块2 html5 web canvas使用 html5 web canvas检测浏览器支持情况 canvas接口的属性和方法 画笔的风格设置 基本形状绘制 图像图形的处理 Canvas文本的处理 Canvas图片的处理 1．能按需要添加canvas对象 2．能绘制简单的Canvas图像 3．能处理canvas对象的事件 2 模块3 html5 web canvas的开发实例 分析开发需求 程序主框架的搭建 底部导航栏缩略图 底部导航栏翻页按钮 点击放大图片和翻页功能 缩略图预览显示 自动隐藏导航栏 1．Canvas开发实践 4 模块4 使用canvas绘图 1．了解绘图 canvas使用基础知识 2．了解 Graphics 类 3．绘制直线和曲线 4．使用内置方法绘制形状 5．创建渐变线条和填充 6．将 Math 类与绘制方法配合使用 7．使用绘图canvas进行动画处理 1．能用编程的方式绘制几何图形 2．能用绘图 canvas 进行动画处理 4 模块5 Canvas案例 1．Canvas编制小游戏实践与分析 1．能使用Canvas技术进行游戏编程 4 3 项目三 CreateJS 模块1 CreateJS概述 1.下载CreateJS 2.介绍CreateJS 3.对比CreateJS与Canvas 1.了解CreateJS 2.认识CreateJS与canvas区别 1 模块2 CreateJS包简介 1.EaselJS包 2.TweenJS