课程简介:
本课程涵盖HTML5游戏开发基础知识到游戏实战,从零基础开始,涉及HTML5 Web游戏开发中的需要掌握的方方面面的知识,并以两个游戏实战巩固和升华学习的游戏开发知识。
掌握本课程后,学员能够完全胜任HTML5 Web游戏开发。
培训目标:
掌握全新的HTML5 Web游戏开发技能
额外的话:
本课程是是HTML5的方向之一Web游戏方面的课程;
HTML5的软硬整合技术和HTML5云开发技术是另外两个非常重要的方向,有需要的话,可以自由选学;
?
培训内容:
第1个主题:HTML5技术和商业思考
1,1 HTML5的目标
1,2 无法拒绝使用HTML5的原因
1,3 可以放心使用HTML5的原因
第2个主题:基本的HTML5模板
2,1 Doctype
2,2 html元素
2.3 head元素
第3个主题:HTML5页面结构
3,1 header元素
3,2 section元素
3.3 article元素
3.4 nav元素
3.5 aside元素
3.6 footer元素
第4个主题:HTML5中游戏开发中的JavaScript(初级)
4.1 JavaScript概述
4.2 jQuery
4.2.1 jQuery是什么
4.2.2 为什么要使用它
4.2.3 这是在误导你吗
4.2.4 是否不需要理解纯JavaScript
4.2.5 如何使用jQuery
4.3 在HTML页面上添加JavaScript
4.4 在页面加载之后运行JavaScript
4.4.1 错误的方法(window.onload事件)
4.4.2 冗长的方法(DOM)
4.4.3 简单的方法(jQuery方法)
4.5 变量与数据类型
4.5.1 变量
4.5.2 数据类型
4.6 条件语句
4.6.1 if语句
4.6.2 比较运算符
4.6.3 在if语句中进行多重布尔值检查
4.6.4 else和else if语句
第5个主题:HTML5中游戏开发中的JavaScript(中级)
5.1 函数
5.1.1 创建函数
5.1.2 调用函数
5.2 对象
5.2.1 什么是对象
5.2.2 创建和使用对象
5.3 数组
5.3.1 创建数组
5.3.2 访问和修改数组
5.4 循环
5.5 定时器
5.5.1 设置一次性定时器
5.5.2 取消一次性定时器
5.5.3 设置重复定时器
5.5.4 取消重复定时器
第6个主题:HTML5中游戏开发中的JavaScript(高级)
6.1 DOM
6.1.1 HTML网页示例
6.1.2 使用纯JavaScript访问DOM
6.1.3 使用jQuery访问DOM
6.1.4 操作DOM
第7个主题: HTML5中的Canvas
7.1 认识canvas元素
7.2 2D渲染上下文
7.2.1 坐标系统
7.2.2 访问2D渲染上下文
7.3 绘制基本图形和线条
7.3.1 线条
7.3.2 圆形
7.4 样式
7.5 绘制文本
7.6 擦除Canvas
7.7 使Canvas填满浏览器窗口
第8个主题: Canvas高级开发
8.1 保存和恢复绘图状态
8.1.1 画布绘图状态是什么
8.1.2 保存绘图状态
8.1.3 恢复绘图状态
8.1.4 保存和恢复多个绘图状态
8.2 变形
8.2.1 平移
8.2.2 缩放
8.2.3 旋转
8.2.4 变换矩阵
8.3 合成
8.3.1 全局阿尔法值
8.3.2 合成操作
8.4 阴影
8.5 渐变
8.6 复杂路径
8.7 将画布导出为图像
第9个主题:html 5页面中视频和音频
9.1发展历程
9.2 目前状况
9.2.1 视频容器格式
9.2.2 视频编解码器
9.2.3 音频编解码器
9.2.4 当前浏览器使用哪种组合
9.3 标记
9.3.1 启用本机控件
9.3.2 autoplay属性
9.3.3 loop属性
9.3.4 preload属性
9.3.5 poster属性
9.3.6 audio属性
9.3.7 添加对多种视频格式的支持
9.3.8 资源顺序
9.3.9 关于Internet Explorer 6~8
9.3.10 MIME类型
9.4 用于网络的视频文件解码
9.5 创建自定义控件
9.5.1 让我们从一些标记和设计开始
9.5.2 介绍媒体元素API
9.5.3 播放和暂停视频
9.5.4 视频音轨的静音与取消静音
9.5.5 视频结束播放的响应
9.5.6 更新视频播放的时间
9.5.7 媒体元素API的其他一些功能
9.6 关于音频
9.7 可访问的媒体
第10个主题:HTML5中的图像处理
10.1 加载图像
10.2 调整和裁剪图像
10.2.1 调整图像大小
10.2.2 裁剪图像
10.2.3 阴影
10.3 图像变形
10.3.1 平移
10.3.2 旋转
10.3.3 缩放与翻转
10.4 访问像素值
10.5 从零绘制图像
10.5.1 随机绘制像素
10.5.2 创建马赛克效果
10.6 基本图像效果
10.6.1 反转颜色
10.6.2 灰度
10.6.3 像素化
第11个主题:制作动画
11.1 画布中的动画
11.2 创建动画循环
11.2.1 循环
11.2.2 更新、清除、绘制
11.3 记忆要绘制的形状
11.3.1 错误的方法
11.3.2 正确的方法
11.3.3 随机产生形状
11.4 改变方向
11.5 圆周运动
11.5.1 三角函数
11.5.2 综合运用
11.6 反弹
第12个主题:实现高级动画
12.1 物理常识
12.1.1 什么是物理学
12.1.2 物理学对创建动画有何作用
12.1.3 基本概念
12.1.4 牛顿运动定律
12.2 运用物理知识创建动画
12.2.1 准备工作
12.2.2 速度
12.2.3 添加边界
12.2.4 加速度
12.2.5 摩擦力
12.3 碰撞检测
12.3.1 碰撞检测
12.3.2 弹开物体
12.3.3 动量守恒
第13个主题:注意力游戏
13.1 思路
13.2 关键需求
13.3 HTML5、CSS和JavaScript特性
13.3.1 表示扑克牌
13.3.2 使用Date 确定时间
13.3.3 提供暂停
13.3.4 绘制文本
13.3.5 绘制多边形
13.3.6 洗牌
13.3.7 单击牌的实现
13.3.8 防止某些作弊行为
13.4 构建自己的应用
13.5 测试和上传应用
第14个主题:小行星游戏
14.1 游戏概述
14.2 核心功能
14.2.1 创建HTML 代码
14.2.2 美化界面
14.2.3 编写JavaScript代码
14.3 创建游戏对象
14.3.1 创建小行星
14.3.2 创建玩家使用的火箭
14.4 检测键盘输入
14.4.1 键值
14.4.2 键盘事件
14.5 让对象运动起来
14.6 假造横向卷轴效果
14.6.1 循环利用小行星
14.6.2 添加边界
14.6.3 让玩家保持连续移动
14.7 添加声音
14.8 结束游戏
14.8.1 计分系统
14.8.2 杀死玩家
14.9 增加游戏难度 |