Javascript面向对象深入-两小时实现坦克大战(含源码+工具+具体流程)

坦克大战是很多8090后不可磨灭的童年 记忆,借着这次公开课,我们一起使用 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

 

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值