<!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.οnkeydοwn=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 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.οnkeydοwn=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>
最后效果如下