打飞机游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
background: #000;
font-size: 14px;
overflow: hidden;
font-family: "华康少女文字W5(P)";
}
#playAir{
width: 320px;
height: 568px;
background: url(img/bg.jpg)no-repeat;
border: 5px solid #ddd;
margin: 100px auto;
overflow: hidden;
position: relative;
}
#playAir .bg{
width: 320px;
height: 568px;
background: url(img/start.png)no-repeat;
position: relative;
}
#playAir .bg ul{
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -82px;
list-style: none;
}
#playAir .bg ul li{
width: 160px;
height: 40px;
background: #abcdef;
border: 2px solid #ddd;
margin-top: 20px;
text-align: center;
line-height: 40px;
border-radius: 30px;
color: #eee;
cursor: pointer;
}
#playAir .bg p{
position: absolute;
bottom: 5px;
right: 5px;
font-size: 10px;
color: #666;
font-style: oblique;
}
#playAir .myPlane{
position: absolute;
top: 0;
left: 0;
}
#playAir .bullet{
position: absolute;
top: 0;
left: 0;
}
#playAir .enemy{
position: absolute;
top: 0;
left: 0;
}
#playAir .enPlane{
position: absolute;
}
#score{
font-size: 20px;
font-weight: 600;
z-index: 9;
position: absolute;
top: 5px;
left: 5px;
}
#box{
width: 300px;
height: 300px;
background: url(img/over.jpg);
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
#btn{
display: block;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 35px;
font-weight: 600;
color: #fff;
position: absolute;
top: 45%;
left: 18%;
cursor: pointer;
}
</style>
</head>
<body>
<div id="playAir">
</div>
<script type="text/javascript">
var playAir = document.getElementById("playAir");
var oLi = document.getElementsByTagName('li');
window.onload =function(){
oGame.init();
oGame.img();
};
var oGame = {
//图片预加载
'img':function(){
oGame.myPlane = new Image();
oGame.myPlane.className = 'myPlane';
oGame.myPlane.src = 'img/myPlane.gif'; //自己的战斗机
},
//初始化
'init':function(){
playAir.innerHTML = '';
var bg = document.createElement('div');
bg.className = 'bg';
playAir.appendChild(bg);
var ul = '<ul><li>菜鸟模式</li><li>平民模式</li><li>精英模式</li><li>附体模式</li></ul><p>打飞机1-0-0版本</p>';
bg.innerHTML=ul;
for (var i=0;i<oLi.length;i++) {
oLi[i].index = i;
oLi[i].onmouseover = function(){
this.style.background = '#ddd';
this.style.color = '#fff';
}
oLi[i].onmouseout = function(){
this.style.background = '#abcdef';
this.style.color = '#eee';
}
oLi[i].onclick = oGame.start;
}
},
//开始
'start':function(){
playAir.innerHTML = '';
oGame.myPlane.src = 'img/myPlane.gif'; //自己的战斗机
oGame.plone();
oGame.index = this.index;
//alert(oGame.index)0000
oGame.score();
},
//本方飞机
'plone':function(){
playAir.appendChild(oGame.myPlane);
var oL = playAir.offsetLeft + oGame.myPlane.offsetWidth/2;
var oT = playAir.offsetTop + oGame.myPlane.offsetHeight/2;
var oW = playAir.offsetWidth - oGame.myPlane.offsetWidth - parseInt(getStyle(playAir,'border'))*2;
var oH = playAir.offsetHeight - oGame.myPlane.offsetHeight - parseInt(getStyle(playAir,'border'))*2;
var x = 0;
var y = 0;
document.onkeydown = function(ev){
ev = ev || event;
if(ev.keyCode == '37'){
x-=10;
if(x<0){
x=0;
}
oGame.myPlane.style.left = x + 'px';
}
if(ev.keyCode == '38'){
y-=10;
if(y<0){
y=0;
}
oGame.myPlane.style.top = y + 'px';
}
if(ev.keyCode == '39'){
x+=10;
if(x>oW){
x=oW;
}
oGame.myPlane.style.left = x + 'px';
}
if(ev.keyCode == '40'){
y+=10;
if(y>oH){
y=oH;
}
oGame.myPlane.style.top = y + 'px';
}
if(ev.keyCode == '32'){
clearInterval(oGame.bullet.timer)
oGame.bullet(x,y);
}
}
document.onmousemove = function(ev){
ev = ev || event;
x = ev.pageX - oL;
y = ev.pageY - oT;
if(x<0){
x=0;
}else if(x > oW){
x=oW;
}
if(y<0){
y=0;
}else if(y>oH){
y=oH;
}
oGame.myPlane.style.left = x + 'px';
oGame.myPlane.style.top = y + 'px';
}
oGame.bullet.timer = setInterval(function(){
oGame.bullet(x,y)
},500)
oGame.myPlane.timer = setInterval(function(){
oGame.enemy()
},500)
},
//子弹
'bullet':function(xL,yT){
var oBullet = document.createElement('img');
oBullet.className = 'bullet';
oBullet.src='img/bullet1.png'; //飞机打出来的子弹
playAir.appendChild(oBullet)
var top = yT -oBullet.offsetHeight/2 -oBullet.offsetHeight/2 ;
oBullet.style.left = (xL - oBullet.offsetWidth/2 + oGame.myPlane.offsetWidth/2 )+ 'px';
oBullet.style.top = top+'px';
oBullet.timer = setInterval(function(){
top-=10;
if(top<0){
clearInterval(oBullet.timer)
if(oBullet.parentNode){
oBullet.parentNode.removeChild(oBullet);
}
}
oBullet.style.top = top+'px';
},20)
},
//敌机
'enemy':function(){
var oEnemy = document.createElement('img');
oEnemy.className = 'enemy';
oEnemy.src = 'img/enemy3_fly_1.png'; //敌方的飞机
playAir.appendChild(oEnemy);
var lDistance = playAir.offsetWidth - oEnemy.offsetWidth;
var hDistance = playAir.offsetHeight - oEnemy.offsetHeight;
oEnemy.style.left = Math.random()*lDistance+'px';
var y = 0;
oEnemy.timer = setInterval(function(){
y+=10;
oEnemy.style.top = y+'px';
if(y>hDistance){
clearInterval(oEnemy.timer);
oEnemy.parentNode.removeChild(oEnemy);
}else{
//敌机撞子弹
var oBu = document.getElementsByClassName( 'bullet' );
for (var i = 0; i<oBu.length;i++) {
if(oGame.boom( oBu[i],oEnemy )){
oBu[i].parentNode.removeChild( oBu[i] );
oEnemy.src = 'img/中飞机爆炸.gif'; //敌方飞机爆炸gif图
clearInterval(oEnemy.timer);
oGame.num +=100;
document.getElementById("score").innerHTML = oGame.num;
setTimeout(function(){
if(oEnemy.parentNode){
oEnemy.parentNode.removeChild(oEnemy);
}
},500)
}
}
//敌机撞飞机
if(oGame.boom(oGame.myPlane,oEnemy)){
oGame.myPlane.src = 'img/本方飞机爆炸.gif'; //自己飞机爆炸gif图
oEnemy.src = 'img/中飞机爆炸.gif';
clearInterval(oEnemy.timer);
setTimeout(function(){
if(oEnemy.parentNode){
oEnemy.parentNode.removeChild(oEnemy);
}
if(oGame.myPlane.parentNode){
oGame.myPlane.removeChild(oGame.myPlane);
}
},500)
oGame.over();
clearInterval(oGame.myPlane.timer);
clearInterval(oGame.bullet.timer);
document.onmousemove=null;
document.onkeydown=null;
}
}
},100)
},
'boom':function(obj,obj1 ){
var l = obj.offsetLeft;
var r = l + obj.offsetWidth;
var t = obj.offsetTop;
var tt = t + obj.offsetHeight;
var l1= obj1.offsetLeft;
var r1 = l1 + obj1.offsetWidth;
var t1 = obj1.offsetTop;
var tt1 = t1 + obj1.offsetHeight;
if(l>r1 || r<l1 || t>tt1 || tt<t1){
return false;
}else{
return true;
}
},
'speed' : [
[800 , 5 , 200],
[500 , 10 , 250],
[300 , Math.random()*20 + 20 , 300],
[300 , 5, 100]
],
'score':function(){
var span = document.createElement('span');
oGame.num = 0;
span.id = 'score';
span.innerHTML = oGame.num;
playAir.appendChild(span);
},
'over':function(){
playAir.innerHTML = '';
var div = document.createElement(div);
div.id = 'box';
var btn = document.createElement('span');
btn.id = 'btn';
btn.innerHTML = '重新开始';
div.appendChild(btn);
playAir.appendChild(div);
document.getElementById("btn").onclick = oGame.init;
}
}
function getStyle( obj,attr){
return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
</script>
</body>
</html>
