egret 开发飞机大战，web应用开发相关技术

• egret.Timer定时器。创建出定时器对象，绑定egret.TimerEvent.TIMER事件，使用定时器对象的start()、stop()方法

let propsTimer: egret.Timer = new egret.Timer(10000);

propsTimer.addEventListener(

egret.TimerEvent.TIMER,

() => {

console.log(“执行了”);

},

this

);

propsTimer.start();

• egret.EventDispatcher事件派发

这个极其的重要，我们可以自定义事件，一些元素监听这些自定义事件，当满足某些条件的时候触发自定义事件，元素就可以捕获到这个事件，从而做一个处理。

// 自定义事件对象类

class CustomDispatcher extends egret.EventDispatcher {

public static START: string = “gamestart”;

constructor() {

super();

}

public startGame(): void {

this.dispatchEventWith(CustomDispatcher.START);

}

}

// 实例化自定义事件对象

let dispatcher: CustomDispatcher = new CustomDispatcher();

// 监听游戏开始事件

dispatcher.addEventListener(

CustomDispatcher.START,

() => {

console.log(“游戏开始了”);

},

this

);

// 触发游戏开始事件

dispatcher.startGame();

当我们触发了开始游戏事件，其他类中如果有绑定游戏开始事件的监听，就能够捕获到这一动作，接着做一些处理

在飞机大战的开发中绑定了很多自定义事件，如游戏开始，游戏暂停，继续游戏，游戏结束，游戏重开，主机扣血等

• RES.getRes('bgm_mp3')播放音频

let sound: egret.Sound = RES.getRes(“bgm_mp3”);

let channel = sound.play();

channel.stop();

上面就是音频播放的一些常用 api，细节是

1. 使用RES.getRes()必须先在default.res.json文件中引用定义这个变量，和变量的类型和地址才能使用

2. play() 不传参的时候会以 loop 的轮播方式进行播放，也可以传参，如：play(0, 1)，表示从音频的进度 0 开始播放，播放一次

3. 每次 play()调用之后会返回一个 channel 对象，这个对象相当于这个音频的遥控器，通过它可以执行 stop()方法让音频停下来。

• removeChild的使用

这个 API 用于在画布上清除元素，如子弹打中飞机了需要将碰撞的子弹和飞机在画布上清除掉，就需要使用removeChild清除，这个 api 也是有细节的

1. 一个元素只能由容纳这个元素的容器才能清除，简单的理解就是只有这个元素的父亲才能删除，其他是不能删除的，如爷爷等辈的也是不能删除的

2. 这个操作是一个相对危险的操作，所以无论何时我们要删除的时候，一定要先判断是否存在于父容器里面，只有存在的时候才删除

// this.$children 查看子元素

if (this.$children.indexOf(enemy) != -1) {

this.store.that.removeChild(enemy);

}

• getBounds()和intersects()碰撞检测

这个 api 是获取元素的坐标，所以利用这个检测碰撞的逻辑是两个元素都获取位置，判断两个元素的坐标是否有重合的地方，如果有就说明发生了碰撞。

let rect1: egret.Rectangle = this.prop.getBounds();

let rect2: egret.Rectangle = this.hero.getBounds();

rect1.x = this.prop.x;

rect1.y = this.prop.y;

rect2.x = this.hero.x;

rect2.y = this.hero.y;

if (rect1.intersects(rect2)) {

console.log(“发生碰撞了”);

}

• egret.MainContext.instance.stage.stageWidth和egret.MainContext.instance.stage.stageHeight可以主舞台（满屏）的宽和高

• anchorOffsetX,anchorOffsetY设置元素的锚点

之所以要设置锚点是因为我们要为主机添加拖动事件，只有当把锚点设为飞机的最中间才能拖动的准确，否则每个元素的锚点默认是在左上角

this.hero.anchorOffsetX = this.hero.width / 2;

this.hero.anchorOffsetY = this.hero.height / 2;

// 将hero元素的锚点设为元素中心

• removeEventLinstner的使用细节

addEventListener的使用是非常简单的，但是removeEventListener却是有很重要的使用细节的，这个就在于如果使用removeEventListener的处理函数必须和addEventListener的处理函数是同一个函数才能移除，这个同一个函数指的是使用的同一个地址的函数，所以当我们处理函数是需要传参的时候，这种情况就很难处理，之前我一直解决不了。

// 这种情况是移除不了事件的，因为两个箭头函数的地址是不同的，所以要移除只能使用具名函数

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

态和一个坚持的心很重要**，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

[外链图片转存中…(img-4ligowpf-1710593111045)]