css部分
*{
margin: 0;
padding: 0;
}
body,html{
100%;
height: 100%;
background: #000;
font-size: 14px;
font-family: "DFPSHAONVW5-GB";
}
#all{
320px;
height: 568px;
position: absolute;
top: 150px;
left: 50%;
margin-left: -160px;
background: url(../img/background_1.png) no-repeat;
overflow: hidden;
}
#bg{
320px;
height: 568px;
position: absolute;
top: 0;
left: 0;
background: url(../img/beginbg.png) no-repeat;
}
#bg ul{
position: absolute;
bottom: 60px;
left: 50%;
margin-left: -80px;
}
#bg ul li{
160px;
height: 40px;
background: #b4b8b9;
color: #666;
border: 2px solid #8f9293;
margin-top: 20px;
text-align: center;
line-height: 40px;
border-radius: 10px;
list-style: none;
cursor: pointer;
}
#bg p{
font-size: 12px;
position: absolute;
bottom: 5px;
right: 5px;
color: #666;
font-style: italic;
}
#all .myplane{
position: absolute;
top: 0;
left: 0;
cursor: none;
}
#all .bullet{
position: absolute;
6px;
height: 14px;
top: 0;
left: 0;
background: url(../img/bullet1.png) no-repeat;
}
#all .enemy{
position: absolute;
34px;
height: 24px;
top: 0;
left: 0;
/*background: url(../img/enemy1_fly_1.png) no-repeat;*/
}
#all .over{
200px;
height: 300px;
margin: 100px auto;
line-height: 300px;
text-align: center;
font-size: 25px;
font-weight: bold;
}
#all .jump{
cursor: pointer;
}
html部分
<div id="all">
<div id="bg"></div>
</div>
js部分
var oBg = document.getElementById("bg");
var oAll = document.getElementById("all");
window.onload = function(){
plane.first();
plane.img();
}
var plane = {
'speed':[
[ 800 , 5 , 200 ],
[ 600 , 7 , 250 ],
[ 400 , 9 , 300 ],
[ 200 , 11 , 350]
],
'img': function(){
plane.myplane = new Image();
plane.myplane.className = 'myplane';
plane.myplane.src = 'img/myplane.gif';
},
'first': function(){
oBg.innerHTML = '';
var ul = '<ul><li>青铜段位</li><li>白银段位</li><li>黄金段位</li><li>白金段位</li></ul><p>H5-1623李佳徽版</p>';
oBg.style.display = 'block';
oBg.innerHTML = ul;
oAll.appendChild(oBg);
var oLi = document.getElementsByTagName('li');
for( var i = 0 ; i < oLi.length ; i++ ){
oLi[i].index = i;
oLi[i].onmouseover = function(){
this.style.background = '#8f9293';
this.style.color = '#ccc';
}
oLi[i].onmouseout=function(){
this.style.background = '#b4b8b9';
this.style.color = '#666';
}
oLi[i].onclick = plane.start;
}
},
'start':function(ev){
plane.index = this.index;
ev = ev || event;
var x = ev.pageX - oAll.offsetLeft - plane.myplane.offsetWidth/2;
var y = ev.pageY - oAll.offsetTop - plane.myplane.offsetHeight/2;
oBg.style.display = 'none';
plane.myplane.src = 'img/myplane.gif';
oAll.appendChild( plane.myplane );
var oW = oAll.clientWidth - plane.myplane.offsetWidth;
var oH = oAll.clientHeight - plane.myplane.offsetHeight;
// console.log(x +':'+ y);
document.onkeydown = function(ev){
ev = ev || event;
if( ev.keyCode == '37' )
{
x -= 5;
}else if( ev.keyCode == '38' )
{
y -=5;
}else if( ev.keyCode == '39' )
{
x +=5;
}else if( ev.keyCode == '40' )
{
y +=5;
}
if( x < 0 )
{
x = 0;
}else if( x > oW )
{
x = oW;
}
if( y < 0 )
{
y = 0;
}else if( y > oH )
{
y = oH;
}
plane.myplane.style.left = x + 'px';
plane.myplane.style.top = y + 'px';
}
document.onmousemove = function(ev){
ev = ev || event;
x = ev.pageX - oAll.offsetLeft - plane.myplane.offsetWidth/2;
y = ev.pageY - oAll.offsetTop - plane.myplane.offsetHeight/2;
if( x < 0 )
{
x = 0;
}else if( x > oW )
{
x = oW;
}
if( y < 0 )
{
y = 0;
}else if( y > oH )
{
y = oH;
}
plane.myplane.style.left = x + 'px';
plane.myplane.style.top = y + 'px';
}
oBg.timer = setInterval( function(){ //生产子弹
plane.bullet( x , y );
} , plane.speed[plane.index][2] );
oBg.timer2 = setInterval( function(){ //生产敌机
plane.enemy();
} , plane.speed[plane.index][0] );
},
'bullet':function( m , n ){
var bullet = document.createElement('img');
bullet.className = 'bullet';
var oL = m + plane.myplane.offsetWidth / 2 - bullet.offsetWidth / 2;
var oT = n - bullet.offsetHeight;
// console.log(oL +':'+ oT)
bullet.style.left = oL + 'px';
bullet.style.top = oT + 'px';
oAll.appendChild(bullet);
bullet.timer = setInterval( function(){
var bulletTop = bullet.offsetTop;
bulletTop -= 5;
if( bulletTop < -bullet.offsetHeight )
{
clearInterval(bullet.timer);
if( bullet.parentNode )
{
bullet.parentNode.removeChild( bullet );
}
}
bullet.style.top = bulletTop + 'px';
} , 30 )
},
'enemy':function(){
var enemy = document.createElement('img');
enemy.className = 'enemy';
enemy.src = 'img/enemy1_fly_1.png';
oAll.appendChild(enemy);
var leftRandom = Math.random()*( oAll.clientWidth - enemy.offsetWidth );
enemy.style.left = leftRandom + 'px';
var enemyTop = 0;
enemy.timer = setInterval(function(){
enemyTop +=plane.speed[plane.index][1];
if( enemyTop >= oAll.clientHeight )
{
clearInterval( enemy.timer );
if( enemy.parentNode )
{
enemy.parentNode.removeChild( enemy );
}
}else{
var oBullet = document.getElementsByClassName('bullet');
for( var i = 0 ;i < oBullet.length; i++ )
{
if( plane.boom( oBullet[i] , enemy ) )
{
oBullet[i].parentNode.removeChild( oBullet[i] );
enemy.src = 'img/enemy.gif';
clearInterval( enemy.timer );
setTimeout( function(){
if( enemy.parentNode )
{
enemy.parentNode.removeChild( enemy );
}
} , 100 )
}
}
}
if( plane.boom( plane.myplane , enemy ) )
{
enemy.src = 'img/enemy.gif';
setTimeout( function(){
if( enemy.parentNode )
{
enemy.parentNode.removeChild( enemy );
}
} , 300 );
plane.myplane.src = 'img/myplaneBoom.gif';
clearInterval( oBg.timer );
clearInterval( oBg.timer2 );
document.onmousemove = null;
setTimeout( function(){
plane.over();
} ,300 )
}
enemy.style.top = enemyTop + 'px';
} , 100)
},
'boom':function( obj , obj1 ){
var t = obj.offsetTop;
var h = obj.offsetTop + obj.offsetHeight;
var l = obj.offsetLeft;
var w = obj.offsetLeft + obj.offsetWidth;
var t1 = obj1.offsetTop;
var h1 = obj1.offsetTop + obj1.offsetHeight;
var l1 = obj1.offsetLeft;
var w1 = obj1.offsetLeft + obj1.offsetWidth;
if( t > h1 || h < t1 || l > w1 || w < l1 ){
return false;
}else{
return true;
}
},
'over':function(){
oAll.innerHTML = '';
var div = document.createElement('div');
var p1 = document.createElement('p');
var a1 = document.createElement('a');
div.className = 'over';
a1.className = 'jump';
p1.innerHTML = 'Game Over!';
a1.innerHTML = '点击继续';
div.appendChild(p1);
div.appendChild(a1);
oAll.appendChild(div);
a1.onclick = function(){
oAll.innerHTML = '';
plane.first();
}
}
}