推箱子小游戏原理的实现
功能分析：
1.找一张类似于箱子的图片自行设置图片的大小
2.设置控制箱子移动的四个方向的按钮
3.使用键盘控制图片上下左右的移动、
效果图演示
原始位置
点击键盘向右移动三次向下移动一次后的位置
看了上述过程是不是感觉很有意思呀？？？
下面看代码
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body onkeydown="change()">
<img src="1.PNG" id="imgShow" style="width: 80px; height: 80px;position:absolute;left: 0px;top: 0px"/>
<script type="text/javascript">var img = document.getElementById("imgShow")img.left = 0;img.top = 0;function change(){var keyCode = event.keyCode;if(keyCode == 37){img.left -= 80;}if(keyCode == 38){img.top -= 80;}if(keyCode == 39){img.left += 80;}if(keyCode == 40){img.top += 80;}img.style.left = img.left + 'px',img.style.top = img.top + 'px';}
</script>
</body>
</html>
代码很少也很好理解，这里面使用了键值对的方式。
了解更多关注我呦！！！
