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中，在刷新键处右键强制清缓存，并且刷新

然后就搞定了

（哇塞，它终于能动了）