您的位置：首页 > 其它

飞机大战

2016-07-23 10:08 393 查看

<!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>

最后效果如下

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航