运用KeyCode在浏览器中按WASD使图形运动

Posted 2020-11-02 franklongger

如何实现在浏览器中按WASD四个键使图形上下左右运动呢？

其实很简单，用keyCode方法就可以实现了。

先放个div在html中：

1 <div id="ball" style="left: 0px;top: 0px"></div>

在div中设置内联css样式，至于为什么要设置内联式，之后在解释。

css部分：

1 <style>
2     div{
3         height: 100px;
4         width: 100px;
5         background: #0ff;
6         border-radius: 50px;
7         position: absolute;
8     }
9 </style>

因为在div中设置了left和top属性，所以必须设置绝对定位

那么接下来就是js部分了：

1 var key={
2         W:87,S:83,A:65,D:68 
3     }

声明一个变量key，存放WASD四个按键的Unicode码。

 1 function keymove(e){
 2             var ball=document.getElementById(‘ball‘);
 3             var left=parseInt(ball.style.left);
 4             var top=parseInt(ball.style.top);
 5             switch(e.keyCode){
 6                 case key.W:
 7                     ball.style.top=top-2+‘px‘;
 8                 break;
 9                 case key.S:
10                     ball.style.top=top+2+‘px‘;
11                 break;    
12                 case key.A:
13                     ball.style.left=left-2+‘px‘;
14                 break;    
15                 case key.D:
16                     ball.style.left=left+2+‘px‘;
17                 break;    
18             }
19         }
20         document.onkeydown=keymove;

写一个函数keymove参数为e(随意什么英文都可以)，因为元素的属性值是字符串，所以需要用parseInt方法将其转换成int数据类型，接下来要用一系列的判断语句，if或者switch语句都可以，这里我用switch是因为更方便些。

参数名.keyCode的返回值是用户摁下键盘按键对应的Unicode码值。

最后调用函数，当触发onkeydown事件时执行函数，keyCode还可以用于onkeypress和onkeyup事件中。

最后回答为什么left和top属性用内联式而不用嵌入式方法，这里设置及到一些知识点：

在js中 element指的是js获取的dom对象，

而element.style则代表js获取的内联式样式，如果对象没有内联式，则为空对象。

当然有别的获取对象样式的方法可以获取非内联式的样式，但是如果用element.style的方法获取样式，非内联式方法定义的样式是获取不到的哦。