前言：
目前大家对“js上下左右键”大约比较注意，咱们都需要学习一些“js上下左右键”的相关资讯。那么小编同时在网上汇集了一些对于“js上下左右键””的相关内容，希望你们能喜欢，大家快快来学习一下吧！说明
大二上学期国庆节在图书馆下午所做，基于一定的js基础，想利用定时器函数等方法写出发射炮台的效果。所有效果和代码均为独自设计，未参考相应项目。代码的设计、格式、结构、以及算法、数学公式还有很大的改进和提升空间。在此先记录一下。
操作和使用wasd键移动炮台位置鼠标移动到某一位置并点击，可以让炮台发射炮弹发射炮弹的速度和点击位置距炮台中心点的距离成正比效果图源代码
<!DOCTYPE html><meta charseet="utf-8"><!-- 鼠标控制练习 2020年10月8日 by littlefean --><html><head> <title>鼠标控制练习</title> <style> :root { --barrelLength: 250px; --barrelWidth: 20px; } /* 枪 */ #gun { width: var(--barrelLength); height: var(--barrelWidth); background-color: gray; position: absolute; left: 500px; top: 300px; transform: rotate(99deg); } /* 枪头 */ #gun .muzzle { width: var(--barrelWidth); height: var(--barrelWidth); background-color: rgb(83, 83, 83); float: right; } .bullet { height: var(--barrelWidth); width: var(--barrelWidth); background-color: brown; border: rgb(83, 83, 83); border-width: 5px; border-radius: 100px; position: absolute; left: 20px; top: 20px; } #ground { width: 1000px; height: 1000px; background-color: skyblue; margin: 0 auto; /* 文字 */ font-size: 20px; color: balck; text-indent: 2em; line-height: 50px; user-select: none; } /* 水平竖直参考线 */ #xline { height: 1px; width: 1000px; background-color: #000; position: absolute; top: 310px; } #yline { height: 1000px; width: 1px; position: absolute; left: 700px; background-color: #000; } </style></head><body> <div id="gun"> <div class="muzzle"></div> </div> <div id="ground"> 鼠标晃动控制炮口瞄准方向， 点击鼠标发射炮弹， 点击位置距离炮位置越远，发射速度越快， WASD键控制炮台上下左右移动。 </div> <!-- <div id="xline"></div> <div id="yline"></div> --> <script> //设置枪的参数 var gun = document.getElementById("gun"); var mouseLoc; //时时刻刻获取鼠标位置并保存到变量mouseLoc中 var gunRotate; //鼠标移动时：获取鼠标的位置并更新炮管 document.onmousemove = function (e) { mouseLoc = { 'x': e.pageX, 'y': e.pageY }; gunRotate = getGunRotateByMouse("gun", mouseLoc); setGunRotate(gunRotate); }; //按下键盘时：炮管会跟着移动 document.onkeypress = function (e) { var keyNum = window.event ? e.keyCode : e.which; // console.log(keyNum); var gun = document.getElementById("gun"); var step = 10; switch (keyNum) { case 119: gun.style.top = gun.offsetTop - step + 'px'; // console.log("up"); break; case 115: gun.style.top = gun.offsetTop + step + 'px'; // console.log("down"); break; case 97: gun.style.left = gun.offsetLeft - step + 'px'; // console.log("left"); break; case 100: gun.style.left = gun.offsetLeft + step + 'px'; // console.log("right"); break; } }; //鼠标点击时 document.onclick = function (e) { //创建一个子弹 var bullet = document.createElement("div"); bullet.setAttribute("class", "bullet"); var gun = document.getElementById("gun"); var gunCenterY = (gun.offsetTop * 2 + gun.offsetHeight) / 2; var gunCenterX = (gun.offsetLeft * 2 + gun.offsetWidth) / 2; bullet.style.left = gunCenterX bullet.style.top = gunCenterY var dx = (mouseLoc.x - gunCenterX) / 50; var dy = (mouseLoc.y - gunCenterY) / 50; //子弹在场地中 var ground = document.getElementById("ground"); ground.appendChild(bullet); //设定并执行动画 var t = 0; var shootAni = setInterval(function () { // console.log("s"); t++; bullet.style.left = gunCenterX + t * dx + 'px'; bullet.style.top = gunCenterY + t * dy + 'px'; // console.log(t*dx); if (t >= 200) { bullet.remove(); clearInterval(shootAni); } }, 10); }; /** * 设置枪支的旋转角度 * 参数ro是css属性值 */ function setGunRotate(ro) { document.getElementById("gun").style.transform = "rotate(" + ro + "deg)"; } /** * 根据Id和鼠标位置参数获得枪应该转向的角度 * gunIdName：枪的Id名，字符串 * mouse：鼠标位置，字典形式 * return：角度 */ function getGunRotateByMouse(gunIdName, mouse) { var gun = document.getElementById(gunIdName); var gunCenterY = (gun.offsetTop * 2 + gun.offsetHeight) / 2; var gunCenterX = (gun.offsetLeft * 2 + gun.offsetWidth) / 2; var dy = mouse.y - gunCenterY; var dx = mouse.x - gunCenterX; var a = Math.atan(dy / dx); // console.log(a); if (mouse.x > gunCenterX) { return a * 60; } else { return 180 + a * 60; } } </script></body></html>待改进移动很卡顿，没有游戏的那种物理驱动的感觉鼠标位置转化成炮台瞄准角度时公式选用不好，在垂直位置时会卡顿一下炮弹是直接在中心点发射的，不是在枪管口出来 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js上下左右键
