飞机大战

来源：互联网发布：网络订票如何取票编辑：程序博客网时间：2024/06/02 16:00

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>飞机大战</title>
<style tyle="text/css">
#game{
position:relative;
width:800px;
height:400px;
margin-left: auto;
margin-right: auto;
background:url("./images/river.png")no-repeat 0px -200px;
}
#player{
position:absolute;
top:150px;
left:250px;

}
</style>
</head>
<body>
<div id="game">
<img src="./images/plane.png" id="player">
</div>
<script type="text/javascript">
var game=document.getElementById("game");
var bgm=-200;
setInterval(function(){
bgm+=2;
if(bgm>=0){
bgm=-200;
}
game.style.backgroundPosition="0px "+bgm+"px";},10)

var player = document.getElementById("player");
window.document.onkeydown=function(ent){
var event = ent||window.event;
//alert(event.keyCode);
switch (event.keyCode){
case 87: //w 上
player.style.top =Math.max((player.offsetTop-10),0)+"px";
break;

case 83: //s 下
player.style.top =Math.min((player.offsetTop+10),250)+"px";
break;

case 65: //a 左
player.style.left =Math.max((player.offsetLeft-10),0)+"px";
break;

case 68: //d右
player.style.left =Math.min((player.offsetLeft+10),450)+"px";
break;

}
}
</script>
</body>

</html>

最后效果如下

0 0