用原生js实现一个可以用wasd控制在屏幕内不断移动的小红球
作为js初学者,感觉新学习的键盘事件很有趣。然后,就想着我能不能做一个东西,可以用上键盘事件。便有了这个“听话的红色小球”的诞生。
开始的时候,我是直接在键盘事件后面的匿名函数中,写了四个判断,在判断成功的执行语句中使用document.getElementById("dd").style.top="200px"和document.getElementById("dd").style.top="100px"的方法直接更改css中设置的top和left的值,用来实现小红球的移动。但是后来发现,由于这样设置的top和left的值是固定的,就只能实现小红球单次得向上移动或者向其他方向移动,把小球禁锢在了四个点上,无法让它听话的随着wasd在全屏幕内移动。
然后就进入了第二个阶段,为了使小红球的移动范围扩大,我放弃了之前在在判断成功的执行语句中直接设置top和left的固定值得方法,改为用document.getElementById("dd").style.left=d()+"px"这种方法,为每次的top和left赋值。首先,我设置了两个变量x和y分别用来接收css中设置的top和left的值。然后声明了四个方法,分别是水平移动的a()、d()和竖直方向上移动的s()、w(),这四个方法分别通过对y和x的值得改变实现小球的位移。我选择的没次位移20像素的距离,有需要的话可以改到每次移动1像素的距离。
具体代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>div平移</title> <style> #dd{ width: 50px; height: 50px; background-color: red; border-radius: 50%; position: relative; top:300px; left: 200px; } </style> </head> <body> <div id="dd" > </div> </body> <script> var dd=document.getElementById("dd"); //键盘事件 document.body.onkeydown = function(e){ //87为w的keyCode,按下w时,调用w()函数。 if(e.keyCode==87){ dd.style.top=w()+"px"; }else if(e.keyCode==65){ dd.style.left=a()+"px"; }else if(e.keyCode==83){ dd.style.top=s()+"px"; }else if(e.keyCode==68){ dd.style.left=d()+"px"; } //console.log(e.keyCode); } //获得css设置的top值 var x =dd.offsetTop; console.log(x); //获得css设置的left值 var y =dd.offsetLeft; console.log(y); //w()方法,调用时top减小 function w(){ x -=20; return x; } //s()方法,调用时top增加 function s(){ x +=20; return x; } //a()方法,调用时left减小 function a(){ y -=20; return y; } //d()方法,调用时left增加 function d(){ y +=20; return y; } </script> </html>