- 新建项目，导入素材
素材地址 - 要实现飞机向上方运动的过程，我们可以让背景向下移动，达到视觉差实现飞机向上移动的功能
新建一个空节点，保存两个背景，新建一个脚本Bg，用于控制两个背景循环向下移动，之间挂载在两个背景的父级节点即可
Bg脚本代码
const {ccclass, property} = cc._decorator; @ccclass export default class Bg extends cc.Component { start () { } update (dt) { //移动 //🏪子物体背景 for(let bgNode of this.node.children){ //每秒y向下移动50的移动 帧->秒 *dt bgNode.y -= 50 * dt; //当背景移出时，将背景位置回到最顶部，循环 if(bgNode.y< -850){ bgNode.y += 852 * 2; } } } }
- 拖进玩家飞机，挂载Player脚本
Player代码
const {ccclass, property} = cc._decorator; @ccclass export default class Player extends cc.Component { start () { //绑定触摸事件，飞机跟随手指移动 this.node.on(cc.Node.EventType.TOUCH_MOVE, (event)=>{ this.node.setPosition(event.getLocation()); }) } update (dt) { //移动 } }
- 移入子弹，绑定一个碰撞组件，绑定脚本Bullet
将子弹转为预设体，绑定在玩家上，记得先去玩家脚本开启预设体
Player代码
const {ccclass, property} = cc._decorator; @ccclass export default class Player extends cc.Component { //开启预设体 @property(cc.Prefab) bulletPre:cc.Prefab=null; start () { //绑定触摸事件，飞机跟随手指移动 this.node.on(cc.Node.EventType.TOUCH_MOVE, (event)=>{ this.node.setPosition(event.getLocation()); }) //攻击 计时器 //方法 0.5秒执行一次 执行几次 this.schedule(()=>{ //创建子弹 let bullet = cc.instantiate(this.bulletPre); //设置父物体 bullet.setParent(cc.director.getScene()); //设置子弹位置 飞机上面 bullet.x = this.node.x; bullet.y = this.node.y + 60; },0.5) } update (dt) { //移动 } }
Bullet代码
const {ccclass, property} = cc._decorator; @ccclass export default class Bullet extends cc.Component { @property speed: number = 800; start () { } update (dt) { //移动 一秒移动800 this.node.y += this.speed * dt; //出屏幕销毁子弹 if(this.node.y > 820){ this.node.destroy(); } } }
- 拖进敌人，敌人加碰撞体，新建敌人脚本Enemy
const { ccclass, property } = cc._decorator; @ccclass export default class Enemy extends cc.Component { //配置速度参数 @property speed: number = 300; //是否死亡 isDie: boolean = false; start() { } update(dt) { if(this.isDie == false){ //移动 一秒移动80 this.node.y -= this.speed * dt; } //出屏幕销毁敌机 if (this.node.y < 0) { this.node.destroy(); } } //死亡 die(){ this.isDie = true; //加载爆炸图片，替换 var that = this; cc.resources.load("enemy0_die", cc.SpriteFrame, function (err, sp: cc.SpriteFrame) { that.getComponent(cc.Sprite).spriteFrame = sp; }); //300毫秒后销毁 setTimeout(()=>{ this.node.destroy(); }, 300) } }
- 全局开启碰撞检测，可以在玩家脚本上开启，因为程序运行必须先加载一个玩家
//开启碰撞检测 cc.director.getCollisionManager().enabled = true;
- 编写子弹新增与敌机碰撞方法
import Enemy from "./Enemy"; const { ccclass, property } = cc._decorator; @ccclass export default class Bullet extends cc.Component { //配置速度参数 @property speed: number = 800; start() { } update(dt) { //移动 一秒移动800 this.node.y += this.speed * dt; //出屏幕销毁子弹 if (this.node.y > 820) { this.node.destroy(); } } /** * 当碰撞产生的时候调用 * @param {Collider} other 产生碰撞的另一个碰撞组件 * @param {Collider} self 产生碰撞的自身的碰撞组件 */ onCollisionEnter(other, self) { //获取碰撞组件的tag，来判断碰到的是那个物体 console.log('碰撞发生' + other.tag); //如果碰到了敌人，记得将敌机的tag改为1 if (other.tag == 1) { //销毁敌人 // other.node.destroy(); other.getComponent(Enemy).die();//调用敌人的die方法 //销毁自己 this.node.destroy(); } } }
- 因为敌机肯定不止一个，要达到敌机随机频繁的从屏幕上方产生，需要将敌机变为一个预设体，在上屏幕外新建一个空节点，用来生成敌机，先绑定预设体（
同样注意代码先开放预设体绑定），绑定脚本EnemyCreate
const { ccclass, property } = cc._decorator; @ccclass export default class EnemyCreate extends cc.Component { //开启预设体，绑定敌机 @property(cc.Prefab) enemyPre:cc.Prefab=null; start() { //每2秒创建一个敌机 this.schedule(()=>{ let enemy = cc.instantiate(this.enemyPre); //设置父物体 enemy.setParent(cc.director.getScene()); enemy.y = this.node.y; //随机x位置生成 enemy.x = Math.random() * 440 + 40; }, 2) } update(dt) { } }
