推箱子小游戏原理的实现
功能分析： 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
>
代码很少也很好理解，这里面使用了键值对的方式。
了解更多关注我呦！！！
