<head>
<meta charset="utf-8" />
<title>拳皇小游戏</title>
<style type="text/css">
*{margin: 0;
padding: 0;
}
html{height: 100%;}
body{height: 100%; background: url(img/bg.jpg) no-repeat; background-size:100% ;}
#site{
position: relative;
height: 100%;
}
img{
position: absolute;
bottom: 50px;
width: 200px;
height: 350px;
}
</style>
</head>
<body>
<div id="site">
<img src="img/stand.gif" id="MC"/>
</div>
</body>
JS部分
<script type="text/javascript " >
function Yagami(imgobj){
this.obj=imgobj;
this.Left=0;
this.timer=null;
}
Yagami.prototype.action=function(code){
if(this.skill[code]){
this.skill[code].call(this);
}
}
Yagami.prototype.skill={
"40":function(){
this.obj.src='img/7490881c38cfba5ef724e4ba.gif'
},
"37":function(){
this.timer=setInterval(function(){
this.Left-=5;
this.obj.style.left=this.Left+"px";
}.bind(this),13);
this.obj.src='img/retreat.gif'
},
"39":function(){
this.timer=setInterval(function(){
this.Left+=5;
this.obj.style.left=this.Left+"px";
}.bind(this),13);
this.obj.src='img/advance.gif'
},
"stop":function(){
this.obj.src='img/stand.gif'
}
}
Yagami.prototype.stop=function(){
this.skill.stop.call(this);
clearInterval(this.timer);
}
var imgobj=document.getElementById("MC");
var MC=new Yagami(imgobj);
document.onkeydown=keys;
function keys(evt){
var code=evt.keyCode;
MC.action(code);
this.onkeyup=function(){
MC.stop();
this.onkeydown=keys;
}
this.onkeydown=null;
}
</script>
效果图：
IMG_3486.GIF
