版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
实现用js来自定义按键+推箱子
1：需要实现的效果图是：
2：来看代码啦
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自定义按键+推箱子</title>
</head>
<body>
<div style="text-align: center; float: left; width: 100%;">
<h1>自定义按键</h1>
<input type="text" onkeyup="myFunction('up')" maxlength="1">上<br>
<input type="text" onkeyup="myFunction('down')" maxlength="1">下<br>
<input type="text" onkeyup="myFunction('left')" maxlength="1">左<br>
<input type="text" onkeyup="myFunction('right')" maxlength="1">右<br>
<button onclick="confirm()">确定修改</button>
</div>
<lable id="show" />
<img id="img" src="img/2.png" style="width: 80px;height: 80px;position: absolute;left:0px;top: 0px" />
<script type="text/javascript">
var obj = document.getElementById("img");
obj.left = 0;
obj.top = 0;
var up, down, left, right;
var up1, down1, left1, right1;
function confirm() {
up = up1;
down = down1;
left = left1;
right = right1;
alert(up + ";" + down + ";" + left + ";" + right);
move();
}
function myFunction(str) {
if(str == "up") {
up1 = event.keyCode;
}
if(str == "down") {
down1 = event.keyCode;
}
if(str == "left") {
left1 = event.keyCode;
}
if(str == "right") {
right1 = event.keyCode;
}
}
function move() {
console.log(event.keyCode);
if(event.keyCode == left) {
//左
obj.left -= 80;
}
if(event.keyCode == up) {
//上
obj.top -= 80;
}
if(event.keyCode == right) {
//右
obj.left += 80;
}
if(event.keyCode == down) {
//下
obj.top += 80;
}
obj.style.left = obj.left + "px", obj.style.top = obj.top + "px";
}
document.onkeydown = move;
</script>
</body>
</html>
3：呈现的效果为：
好啦，谢谢大家观看！