<!DOCTYPE html>
<html>
<head>
<title>js游戏人物上下左右跑步效果 </title>
<meta charset=
"utf-8"
/>
<style type=
"text/css"
>
table {
position: absolute;
top: 100px;
right: 100px;
width: 150px;
height: 150px;
}
input {
width: 40px;
height: 30px;
background: orange;
color: white;
font-weight: bold;
border: none;
border-radius: 5px;
}
img {
position: absolute;
top: 300px;
left: 500px;
}
</style>
</head>
<body>
<img src=
"/static/imghw/default1.png"
data-src=
"images/down-0.png"
class
=
"lazy"
id=
"im"
/ alt=
"js游戏人物上下左右跑步效果代码分享_javascript技巧"
>
<table>
<tr>
<td><input id=
"leftUp"
type=
"button"
value=
"左上"
/></td>
<td><input id=
"goUp"
type=
"button"
value=
"向上"
/></td>
<td><input id=
"rightUp"
type=
"button"
value=
"右上"
/></td>
</tr>
<tr>
<td><input id=
"goLeft"
type=
"button"
value=
"左"
/></td>
<td><input id=
"stop"
type=
"button"
value=
"停止"
/></td>
<td><input id=
"goRight"
type=
"button"
value=
"右"
/></td>
</tr>
<tr>
<td><input id=
"leftDown"
type=
"button"
value=
"左下"
/></td>
<td><input id=
"goDown"
type=
"button"
value=
"向下"
/></td>
<td><input id=
"rightDown"
type=
"button"
value=
"右下"
/></td>
</tr>
</table>
<script type=
"text/javascript"
>
var
i = 0, clc = null, flage;
var
images = document.getElementById(
'im'
);
var
oGoUp = document.getElementById(
'goUp'
);
var
oGoDown = document.getElementById(
'goDown'
);
var
oGoLeft = document.getElementById(
'goLeft'
);
var
oGoRight = document.getElementById(
'goRight'
);
var
oLeftUp = document.getElementById(
'leftUp'
);
var
oLeftDown = document.getElementById(
'leftDown'
);
var
oRightUp = document.getElementById(
'rightUp'
);
var
oRightDown = document.getElementById(
'rightDown'
);
var
oStop = document.getElementById(
'stop'
);
images.style.top =
'300px'
;
images.style.left =
'500px'
;
oStop.onclick =
function
(){
switch
(flage){
case
1: images.src =
'images/up-0.png'
;
break
;
case
2: images.src =
'images/down-0.png'
;
break
;
case
3: images.src =
'images/left-0.png'
;
break
;
case
4: images.src =
'images/right-0.png'
;
break
;
case
5: images.src =
'images/rightUp-0.png'
;
break
;
case
6: images.src =
'images/rd-0.png'
;
break
;
case
7: images.src =
'images/ld-0.png'
;
break
;
case
8: images.src =
'images/lu-0.png'
;
break
;
}
clearInterval(clc);
}
oGoUp.onclick =
function
(){
i = 0;
clearInterval(clc);
clc = setInterval(
"goUp(i++);"
, 100);
}
function
goUp(){
i = i % 4;
var
name =
"images/up-"
+ i +
"."
+
"png"
;
images.src = name;
images.style.top = parseInt(images.style.top) - 10 +
'px'
;
flage = 1;
}
oGoDown.onclick =
function
(){
i = 0;
clearInterval(clc);
clc = setInterval(
"goDown(i++);"
, 100);
}
function
goDown(){
i = i % 4;
var
name =
"images/down-"
+ i +
"."
+
"png"
;
images.src = name;
images.style.top = parseInt(images.style.top) + 10 +
'px'
;
flage = 2;
}
oGoLeft.onclick =
function
(){
i = 0;
clearInterval(clc);
clc = setInterval(
"goLeft(i++);"
, 100);
}
function
goLeft(){
i = i % 4;
var
name =
"images/left-"
+ i +
"."
+
"png"
;
images.src = name;
images.style.left = parseInt(images.style.left) - 10 +
'px'
;
flage = 3;
}
oGoRight.onclick =
function
(){
i = 0;
clearInterval(clc);
clc = setInterval(
"goRight(i++);"
, 100);
}
function
goRight(){
i = i % 4;
var
name =
"images/right-"
+ i +
"."
+
"png"
;
images.src = name;
images.style.left = parseInt(images.style.left) + 10 +
'px'
;
flage = 4;
}
oRightUp.onclick =
function
(){
i = 0;
clearInterval(clc);
clc = setInterval(
"goRightUp(i++);"
, 100);
}
function
goRightUp(){
i = i % 4;
var
name =
"images/rightUp-"
+ i +
"."
+
"png"
;
images.src = name;
images.style.left = parseInt(images.style.left) + 10 +
'px'
;
images.style.top = parseInt(images.style.top) - 10 +
'px'
;
flage = 5;
}
oRightDown.onclick =
function
(){
i = 0;
clearInterval(clc);
clc = setInterval(
"goRightDown(i++);"
, 100);
}
function
goRightDown(){
i = i % 4;
var
name =
"images/rd-"
+ i +
"."
+
"png"
;
images.src = name;
images.style.left = parseInt(images.style.left) + 10 +
'px'
;
images.style.top = parseInt(images.style.top) + 10 +
'px'
;
flage = 6;
}
oLeftDown.onclick =
function
(){
i = 0;
clearInterval(clc);
clc = setInterval(
"goLeftDown(i++);"
, 100);
}
function
goLeftDown(){
i = i % 4;
var
name =
"images/ld-"
+ i +
"."
+
"png"
;
images.src = name;
images.style.left = parseInt(images.style.left) - 10 +
'px'
;
images.style.top = parseInt(images.style.top) + 10 +
'px'
;
flage = 7;
}
oLeftUp.onclick =
function
(){
i = 0;
clearInterval(clc);
clc = setInterval(
"goLeftUp(i++);"
, 100);
}
function
goLeftUp(){
i = i % 4;
var
name =
"images/lu-"
+ i +
"."
+
"png"
;
images.src = name;
images.style.left = parseInt(images.style.left) - 10 +
'px'
;
images.style.top = parseInt(images.style.top) - 10 +
'px'
;
flage = 8;
}
</script>
<div style=
"text-align:center;clear:both"
>
</div>
</body>
</html>