坦克大战是很多80、90后不可磨灭的童年 记忆,借着这次公开课,我们一起使用 JavaScript面向的方式实现这个小游戏。让大家在这个小游戏的过程中学习面向对象在es6中的实现方式,以游戏制作的方式是希望增加大家的学习兴趣。
JavaScript面向对象实现坦克大战(逻辑图)
实现坦克大战所需知识点
部分es6语法
et关键字
在es6中,js可以使用let关键字声明一个块级变量
语法:let变量名=值;
这个变量只能在变量所在的{}内使用
()=>{} 箭头函数
在es6里面可以简写函数
class语法
class – es6中使用class(类)描述对象
JavaScript模块化
什么是模块化
- 把一个复杂的问题拆解成若干个部分,
- 每个部分处理自己的事务
- 每个部分是一个模块
- 每个模块的逻辑简单了
- 不同模块可以在不同的问题中重复使用 ...
模块化语法
export 关键字
这个关键字可以把我们定义在一个模块里的功能开放给外部使用
import关键字
如果在这个模块里面要使用另一个模块的功能,那么使用import关键字导入
简单canvas绘图
canvas标签
html5新推出的标签,用于在页面上绘制图片
使用canvas绘制图片需要从这个对象上得到一个画笔对象
使用画笔对象的绘制图像的API绘图
画图需要一个图片对象
项目启动
准备工作完成,可以进行开发了
设定
项目预览
小结:面向对象是编程中的一种重要思想,在现在的编程开发中无处不在,学会这种思想和学习如何运用这种思想,对大家的学习和工作是非常有的,希望大家在小游戏 的制作过程中能慢慢地体会到这种思想的好处
关于工具环境搭建,请看底部分享获取!
Javascript面向对象深入-两小时实现坦克大战
完整视频:http://yun.itheima.com/open/354.html?2010stt