微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js)
微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js)
微信小游戏 demo 飞机大战 代码分析(一)(main.js)
微信小游戏 demo 飞机大战 代码分析(二)(databus.js)
微信小游戏 demo 飞机大战 代码分析(三)(spirit.js, animation.js)
本博客将使用逐行代码分析的方式讲解该demo,本文适用于对其他高级语言熟悉,对js还未深入了解的同学,博主会尽可能将所有遇到的不明白的部分标注清楚,若有不正确或不清楚的地方,欢迎在评论中指正
本文的代码均由微信小游戏自动生成的demo飞机大战中获取
enemy.js
用于实现敌人对象
代码
import Animation from '../base/animation'
import DataBus from '../databus'const ENEMY_IMG_SRC = 'images/enemy.png'
const ENEMY_WIDTH = 60
const ENEMY_HEIGHT = 60const __ = {speed: Symbol('speed')
}let databus = new DataBus()function rnd(start, end){return Math.floor(Math.random() * (end - start) + start)
}export default class Enemy extends Animation {constructor() {super(ENEMY_IMG_SRC, ENEMY_WIDTH, ENEMY_HEIGHT)this.initExplosionAnimation()}init(speed) {this.x = rnd(0, window.innerWidth - ENEMY_WIDTH)this.y = -this.heightthis[__.speed] = speedthis.visible = true}// 预定义爆炸的帧动画initExplosionAnimation() {let frames = []const EXPLO_IMG_PREFIX = 'images/explosion'const EXPLO_FRAME_COUNT = 19for ( let i = 0;i < EXPLO_FRAME_COUNT;i++ ) {frames.push(EXPLO_IMG_PREFIX + (i + 1) + '.png')}this.initFrames(frames)}// 每一帧更新子弹位置update() {this.y += this[__.speed]// 对象回收if ( this.y > window.innerHeight + this.height )databus.removeEnemey(this)}
}
初始化
导入相应文件
创建所需常量
分别是敌机的图片位置,高度和宽度
创建symbol常量和databus对象
- symbol的解释见 微信小游戏 demo 飞机大战 代码分析 2(databus.js)
rnd(start,end)
- Math.random() 用于提供[0,1)区间的浮点数
- Math.floor() 返回小于等于该数字最大的整数
- 该函数的作用是返回一个start到end区间(end不取)返回内的一个随机数
- 在后面该函数用于生成敌机的位置
Enemy
敌人类,继承与Animation类
constructor()
构造器
- 根据提供的常量初始化敌机对象
- 并且初始化爆炸动画,该函数在之后实现
init(speed)
初始化敌机速度
- 获取随机生成x坐标作为起始x位置
- 获取其本身的高度取负值作为起始y坐标(一开始整个敌机还未进入屏幕,慢慢一点一点进入)
- js中坐标原点为屏幕左上角,以原点向左为x正方向,原点向下为y正方向,
initExplosionAnimation()
定义爆炸帧动画
- 创建一个数组
- 设定爆炸的每一帧动画的具体位置,以及数量
- 创建一个frames数组,将图片按顺序读取并加入数组中
- 将该数组作为Animation类中定义的方法initFrames的参数初始化爆炸动画
update()
逻辑更新函数,更新物体的参数,基本每个具体物体都具有该函数
按速度没回合加上一定的y坐标(由于敌机是往下走的,因此加上)
若发现对象移动出屏幕,则将其回收
bullet.js
子弹的实现
初始化
导入相应包
定义需要的基本常量
定义symbol和生成databus
- symbol的解释见 微信小游戏 demo 飞机大战 代码分析 2(databus.js)
Bullet
子弹实现类,继承于精灵类(没有继承于动画类,其无需动画)
代码
import Sprite from '../base/sprite'
import DataBus from '../databus'const BULLET_IMG_SRC = 'images/bullet.png'
const BULLET_WIDTH = 16
const BULLET_HEIGHT = 30const __ = {speed: Symbol('speed')
}let databus = new DataBus()export default class Bullet extends Sprite {constructor() {super(BULLET_IMG_SRC, BULLET_WIDTH, BULLET_HEIGHT)}init(x, y, speed) {this.x = xthis.y = ythis[__.speed] = speedthis.visible = true}// 每一帧更新子弹位置update() {this.y -= this[__.speed]// 超出屏幕外回收自身if ( this.y < -this.height )databus.removeBullets(this)}
}
constructor
构造器
- 通过预设置的常量初始化超类
init(x, y, speed)
初始化坐标位置和速度
update()
逻辑更新函数
- 为y坐标向上增加速度的大小,即应该减去速度的数值
- 将整个子弹超出屏幕外的(因此是小于-this.height而不是0)移入对象池中,即出游戏
index.js
玩家类
代码
import Sprite from '../base/sprite'
import Bullet from './bullet'
import DataBus from '../databus'const screenWidth = window.innerWidth
const screenHeight = window.innerHeight// 玩家相关常量设置
const PLAYER_IMG_SRC = 'images/hero.png'
const PLAYER_WIDTH = 80
const PLAYER_HEIGHT = 80let databus = new DataBus()export default class Player extends Sprite {constructor() {super(PLAYER_IMG_SRC, PLAYER_WIDTH, PLAYER_HEIGHT)// 玩家默认处于屏幕底部居中位置this.x = screenWidth / 2 - this.width / 2this.y = screenHeight - this.height - 30// 用于在手指移动的时候标识手指是否已经在飞机上了this.touched = falsethis.bullets = []// 初始化事件监听this.initEvent()}/*** 当手指触摸屏幕的时候* 判断手指是否在飞机上* @param {Number} x: 手指的X轴坐标* @param {Number} y: 手指的Y轴坐标* @return {Boolean}: 用于标识手指是否在飞机上的布尔值*/checkIsFingerOnAir(x, y) {const deviation = 30return !!( x >= this.x - deviation&& y >= this.y - deviation&& x <= this.x + this.width + deviation&& y <= this.y + this.height + deviation )}/*** 根据手指的位置设置飞机的位置* 保证手指处于飞机中间* 同时限定飞机的活动范围限制在屏幕中*/setAirPosAcrossFingerPosZ(x, y) {let disX = x - this.width / 2let disY = y - this.height / 2if ( disX < 0 )disX = 0else if ( disX > screenWidth - this.width )disX = screenWidth - this.widthif ( disY <= 0 )disY = 0else if ( disY > screenHeight - this.height )disY = screenHeight - this.heightthis.x = disXthis.y = disY}/*** 玩家响应手指的触摸事件* 改变战机的位置*/initEvent() {canvas.addEventListener('touchstart', ((e) => {e.preventDefault()let x = e.touches[0].clientXlet y = e.touches[0].clientY//if ( this.checkIsFingerOnAir(x, y) ) {this.touched = truethis.setAirPosAcrossFingerPosZ(x, y)}}).bind(this))canvas.addEventListener('touchmove', ((e) => {e.preventDefault()let x = e.touches[0].clientXlet y = e.touches[0].clientYif ( this.touched )this.setAirPosAcrossFingerPosZ(x, y)}).bind(this))canvas.addEventListener('touchend', ((e) => {e.preventDefault()this.touched = false}).bind(this))}/*** 玩家射击操作* 射击时机由外部决定*/shoot() {let bullet = databus.pool.getItemByClass('bullet', Bullet)bullet.init(this.x + this.width / 2 - bullet.width / 2,this.y - 10,10)databus.bullets.push(bullet)}
}
初始化
导入相应文件
获取屏幕大小作为常量
- Window.innerWidth
创建基本常量
Player
玩家类,继承于Spirit类
构造器
- 初始化超类
- 设置玩家初始位置,位于屏幕底部并且居中(应注意判断位置是判断其左上角位置)
- 设定判断是否有触碰的变量和子弹数组
- 初始化事件监听函数
- 事件监听相当于是在等待事件的发生,一旦发生就会随之执行的函数
checkIsFingerOnAir(x, y)
判断玩家手指是否在飞机上
- deviation变量相当于是扩展玩家手指对飞机控制的范围设定的参数
- 判断手指与飞机的关系和位置
setAirPosAcrossFingerPosZ(x, y)
根据手指的位置设置飞机的位置
保证手指处于飞机中间
同时限定飞机的活动范围限制在屏幕中
initEvent()
监听函数
- 绑定touchstart事件, 即开始触碰事件,并传入一个匿名函数作为回调函数,作为触发该事件时的回调
- 若触碰时触碰的是飞机则将飞机被触碰设置为真并且将飞机中心移动到手指中心
- e.preventDefault() 这是取消事件本身的默认动作的函数
- 绑定touchmove事件,即触碰移动
- 若触碰飞机情况为真,则将飞机移动到相应位置
- 绑定touchend事件,即触碰结束
shoot()
玩家射击函数
- 从对象池中取一个子弹
- 根据玩家位置初始化子弹位置
转载于:https://www.cnblogs.com/Phoenix-blog/p/10955093.html
微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js)相关推荐
- Java Swing 经典小游戏《飞机大战》———— (四)碰撞检测 游戏状态与得分 玩家升级
前期回顾 Java Swing 经典小游戏<飞机大战>---- (一)获取素材,创建窗口,添加滚动背景,双缓冲 Java Swing 经典小游戏<飞机大战>---- (二)玩家 ...
- 微信小游戏实战——飞机大战demo笔记完整篇(函数实现)
1. 目录结构: 2. game.js:入口文件 //game.js文件完整代码: import Main from "./src/mian.js" new Main() 3. g ...
- 微信小游戏之飞机大战解析
一.从抄官方代码开始 1.1 首先是game.js,具体代码如下: import './js/libs/weapp-adapter' import './js/libs/symbol'import M ...
- 用微信小游戏实现龙舟大战-打粽子
用微信小游戏实现龙舟大战-打粽子 端午节来啦!各位c粉有没有吃粽子啊! 前言 端午节来啦!今天沉默带大家来做个关于端午节的小游戏,我的设计思路是用龙舟打粽子,类似于飞机大战,只不过我们的场景是在河中. ...
- 安卓小游戏:飞机大战
安卓小游戏:飞机大战 前言 前面写了十二篇自定义view的博客,说实话写的还是有点无聊了,最近调整了一下,觉得还是要对开发有热情,就写了点小游戏,现在抽时间把博客也写一写,希望读者喜欢. 需求 这里就 ...
- 微信小游戏制作坦克大战(四)添加敌方坦克,敌方坦克可以随机移动
微信小游戏制作坦克大战(四)添加敌方坦克,敌方坦克可以随机移动 首先导入敌方坦克素材 重命名为敌方坦克1 敌方坦克也移动到屏幕外面,后面使用克隆体来显示. 我们给敌方坦克添加事件 好的,现在敌方坦克已 ...
- 微信小游戏制作坦克大战(六)碰撞检测,主角坦克碰到敌方坦克、炮弹爆炸
微信小游戏制作坦克大战(六)碰撞检测,主角坦克碰到敌方坦克.炮弹爆炸 导入坦克爆炸效果的图片和声音素材 给主角坦克添加事件 给爆炸动画添加事件 当主角坦克碰到敌方坦克或者炮弹时显示爆炸效果 下一篇文章 ...
- 微信小游戏《飞机打方块》源码分享
微信小游戏<飞机打方块>源码分享 游戏使用CocosCreator v2.4.2开发 源码:https://gitee.com/propertygame/cocos-creator3.x- ...
- 微信小游戏制作坦克大战(五)敌方坦克可以发射炮弹
微信小游戏制作坦克大战(五)敌方坦克可以发射炮弹 在资源管理器中复制炮弹,重命名为敌人坦克的炮弹. 修改敌方坦克的积木 给敌方坦克炮弹添加事件 现在,敌方坦克已经可以自动发射炮弹啦. 下一篇文章:微信 ...
最新文章
- sql注入及mybatis防止sql注入
- 牛客网暑期ACM多校训练营(第九场)
- java apktoo_apktool.jar
- centos7/rhel7安装较高版本ruby2.2/2.3/2.4+
- iphone个系列尺寸_iPhone“立体边框”壁纸来了,拥有3D效果
- keil5图标变成白色_平面设计:创建万圣节图标
- LeetCode(509)——斐波那契数(JavaScript)
- 谷歌有只AI,自动给黑白视频上色,走到哪它都认识你
- laravel redis_解析laravel之redis简单模块操作
- Protel 99SE安装向导
- 教科书级别的软件推荐
- 有哪些比较好的免费简历网站?
- 广告电商源码广告电商系统开发功能与核心技术源码分享
- android设置wifi蓝牙共享文件,无需互联网或蓝牙即可通过WiFi通过android共享文件...
- 酷炫暗黑个人主页简历HTML5模板
- 美团一面(时间1.10h)
- 2D 到 3D 的跨越,探索最佳 AR 交互设计之道
- DB2根据指定列筛选重复数据
- Windows c# 生成验证码图片
- 5、zookeeper四字监控命令/配置属性
热门文章
- html表格判断,lua table 长度解析
- header中的参数讲解
- Java开发面试题及答案,SpringBoot统一日志处理原理
- 【深度学习】基于Torch的Python开源机器学习库PyTorch回归
- 【网络爬虫】BeautfulSoup爬百度百科(真の能看懂~!)
- SqLite中的事务
- putty php环境搭建,centos7(linux)系统下php搭建环境和创建laravel项目
- Windos 10 下,应用版ubuntu系统, 访问windos文件系统
- oracle rman catalogo,ORACLE 11g RMAN备份恢复--catalog
- 网络推广方法教大家提升网站页面收录的技巧!