js自定義控制圖片移動——推箱子，貪喫蛇原理
之前給大家分享了一個簡單的推箱子原理的js代碼
現在做了一些改進
這一次的是升級版的，升級爲自定義的了，就是自己控制哪一些字符，數字代表上下左右鍵來使用
這是一個效果GIF圖：
不要在意頁面簡單醜陋，效果纔是乾貨
下面是一些代碼的展示，可能還有很多不足的地方，大神多指正
喜歡的可以拿去玩玩，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<center>
<h3>請自定義上下左右鍵</h3>
上：<input type="text" id="up" onkeyup="myFunction('up')" maxlength="1" ><br><br>
下：<input type="text" id="down" onkeyup="myFunction('down')" maxlength="1" ><br><br>
左：<input type="text" id="left" onkeyup="myFunction('left')" maxlength="1" ><br><br>
右：<input type="text" id="right" onkeyup="myFunction('right')" maxlength="1" ><br><br>
<button onclick="xuigai()">確定修改</button>
</center>
<label id="show"></label>
<img id="img" src="feiji.jpg" style="width: 100px;height: 100px;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 xuigai() {
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 == parseInt(up)) {
//上
obj.top -= 100;
}
if(event.keyCode == parseInt(down)) {
//下
obj.top += 100;
}
if(event.keyCode == parseInt(left)) {
//左
obj.left -= 100;
}
if(event.keyCode == parseInt(right)) {
//右
obj.left += 100;
}
obj.style.left = obj.left + "px",obj.style.top = obj.top + "px";
}
document.onkeydown = move;
</script>
</body>
</html>
把小飛機的圖片也給出來，頁面做的炫酷一點就更好看了
