Html飞机大战(六):移动飞机
好家伙,这篇移动主角
我们先来看看一个好东西,
addEventListener() 方法
(他真的很好用)
我们直译一下,就叫他添加事件监听器方法
而可监听的对象就有很多啦
我们来了解一下
事件类型:
Web浏览器中可以发生很多种事件。如前所述,所发生事件的类型决定了事件对象中会保存什么信息。
DOM3 Events定义了如下事件类型。
口用户界面事件(UIEvent):涉及与BOM交互的通用浏览器事件。
口焦点事件(FocusEvent):在元素获得和失去焦点时触发。
口鼠标事件(MouseEvent):使用鼠标在页面上执行某些操作时触发。
口滚轮事件(WheelEvent):使用鼠标滚轮(或类似设备)时触发。没有被
口输入事件(InputEvent):向文档中输入文本时触发。览器,
口键盘事件(KeyboardEvent):使用键盘在页面上执行某些操作时触发。
口合成事件(CompositionEvent):在使用某种IME(Input Method Editor,输入法编辑器)输人 存在字符时触发。
----来自《JS高级程序设计》
(红包书,JS的新华字典,刚好它也是红的)
在这里,我们想让我们的飞机动起来,我会想:
让飞机随着鼠标移动,那么自然就是添加对应的鼠标移动事件了
让飞机在我按下WASD后随之进行上下左右的移动,那么肯定是添加键盘事件
行了思路清晰,开搞
1.添加鼠标移动事件监听,
canvas.addEventListener("mousemove", (e) => {
console.log(e.offsetX, e.offsetY);
let x = e.offsetX - hero.width / 2;
let y = e.offsetY - hero.height / 2;
console.log(x,y,hero.widthh);
hero.x = x;
hero.y = y;
})
然后来看看效果:
好家伙,这不是监听的"mousemove"鼠标移动的吗,怎么变成了"click"点击移动飞机
或许因为在F12的页面,又或许是缓存的原因
我们去到F12中,在刷新键处右键强制清缓存,并且刷新
然后就搞定了
(哇塞,它终于能动了)