js 利用上下左右键盘控制物体移动

须知:
上下左右的keyCode
← :37
↑:38
→:39
↓:40
**注意!!! 要将元素设为绝对定位 position:absolute 否则移动不了 **

js代码:

//获取移动元素
var moveblock=document.getElementById("moveblock")
//键盘按下事件
document.onkeydown=function(e){//传入事件对象e 
	var evt=e||event;//解决浏览器兼容
	switch(evt.keyCode){
		case 37://向左
		moveblock.style.left=moveblock.offsetLeft-5+"px";
		//用offsetLeft来获取位置 不用走style那一套函数,但获取到的是纯数字 所以还要加上单位"px" 这里是按键一次移动5px
		break;
		case 38://向上
		moveblock.style.top=moveblock.offsetTop-5+"px";
		break;
		case 39://向右
		moveblock.style.left=moveblock.offsetLeft+5+"px";
		break;
		case 40://向下
		moveblock.style.top=moveblock.offsetTop+5+"px";
		
	}
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页