纯JS打飞机游戏

window.onload = function(){
var mainBoxWidth = 480 + 'px';
var mainBoxHeight = 800 + 'px';
var firstFlightWidth = 60 + 'px';
var firstFlightHeight = 75 + 'px';
var bulletWidth = 8 + 'px';
var bulletHeight = 17 + 'px';
var monsterWidth = 70 + 'px';
var monsterHeight = 100 + 'px';
var speed = 1;
var monsterSpeed = 5;
var flightMoveSpeed = 12;
var bulletSpeed = 6;
var flag = false;
var msIntervel;
var btIntervel;
var bgIntervel;
var fourMs;
function J(id){
var obj = document.getElementById(id);
return obj;
}
function T(tag){
var tags = document.getElementsByTagName(tag);
return tags;
}
function N(nm){
var tags = document.getElementsByName(nm);
return tags;
}
function createMainBox(){
var mainBox = document.createElement('div');
mainBox.id = 'main';
mainBox.setAttribute('style','width:'+mainBoxWidth+';height:'+mainBoxHeight+';' +
'position:absolute;left:50%;top:50%;margin-left:-'+parseInt(mainBoxWidth)/2+'px;margin-top:-'+parseInt(mainBoxHeight)/2+'px;background: url(images/bg_01.jpg) 0px 0px;overflow:hidden;');
T('body')[0].appendChild(mainBox);
}
createMainBox();
function createFlight(){
var myFlight = document.createElement('div');
myFlight.id = 'flight';
myFlight.setAttribute('style','display:block;width:'+firstFlightWidth+';height:'+firstFlightHeight+';' +
'position: absolute;bottom:0;left:'+(parseInt(mainBoxWidth)/2-parseInt(firstFlightWidth)/2)+'px;background: url(images/plane.png) -67px -674px;');
J('main').appendChild(myFlight);
}
createFlight();
function bulletAnimate(){}
bulletAnimate.prototype.animate = function(id){
var obj = document.getElementById(id);
var _bottom = parseInt(GetCurrentStyle(obj,'bottom'));
_bottom+=bulletSpeed;
if(_bottom >= parseInt(mainBoxHeight)){
J('main').removeChild(obj);
}
obj.style.bottom = _bottom + 'px';
collide(id);
if(flag){
setTimeout(function(){
bulletShow.animate(id);
},speed)
}
}
var bulletShow = new bulletAnimate();
var bulletNum = 0;
function createBullet(){
bulletNum++;
var bulletPsLeft = parseInt(GetCurrentStyle(J('flight'),'left'));
var bulletPsBottom = parseInt(GetCurrentStyle(J('flight'),'bottom'));
var bullet = document.createElement('i');
bullet.id = 'bullet'+bulletNum+'';
bullet.setAttribute('style','display:block;width:'+bulletWidth+';height:'+bulletHeight+';' +
'position:absolute;left:'+(bulletPsLeft+parseInt(firstFlightWidth)/2-parseInt(bulletWidth)/2)+'px;bottom:'+(bulletPsBottom+parseInt(firstFlightHeight))+'px;' +
'background: url(images/plane.png) -66px -748px;');
J('main').appendChild(bullet);
bulletShow.animate('bullet'+bulletNum+'');
}
function monsterAnimate(){}
monsterAnimate.prototype.msanimate = function(id){
var obj = document.getElementById(id);
var _monsterBottom = parseInt(GetCurrentStyle(obj,'bottom'));
_monsterBottom--;
if(_monsterBottom <= -parseInt(monsterHeight)){
J('main').removeChild(obj);
}
obj.style.bottom = _monsterBottom + 'px';
flightCollide(id);
if(flag){
setTimeout(function(){
monsterShow.msanimate(id);
},monsterSpeed)
}
}
var monsterShow = new monsterAnimate();
var monsterNum = 0;
function createMonster(){
monsterNum++;
var randomLeft = parseInt(Math.random()*parseInt(GetCurrentStyle(J('main'),'width')));
if(randomLeft >= parseInt(mainBoxWidth)-parseInt(monsterWidth)){
randomLeft = parseInt(mainBoxWidth)-parseInt(monsterWidth);
}
var monster = document.createElement('b');
monster.id = 'monster'+monsterNum+'';
monster.setAttribute('name','monster');
monster.setAttribute('style','display:block;width:'+monsterWidth+';height:'+monsterHeight+';' +
'position:absolute;left:'+randomLeft+'px;bottom:'+parseInt(mainBoxHeight)+'px;' +
'background: url(images/plane.png) -129px -760px;');
J('main').appendChild(monster);
monsterShow.msanimate('monster'+monsterNum+'');
}
function createFourMonster(){
var _left = 0;
for(var i = 0;i<4;i++){
monsterNum++;
var monster = document.createElement('b');
monster.id = 'monster'+monsterNum+'';
monster.setAttribute('name','monster');
monster.setAttribute('style','display:block;width:'+monsterWidth+';height:'+monsterHeight+';' +
'position:absolute;left:'+_left+'px;bottom:'+parseInt(mainBoxHeight)+'px;' +
'background: url(images/plane.png) -129px -760px;');
J('main').appendChild(monster);
_left+=136;
monsterShow.msanimate('monster'+monsterNum+'');
}
}
// createFourMonster();
// createMonster();
function collide(b){
var obj = document.getElementById(b);
var btBottom = parseInt(GetCurrentStyle(obj,'bottom'));
var btLeft = parseInt(GetCurrentStyle(obj,'left'));
for(var i = 0;i<T('b').length;i++){
if(btBottom >= parseInt(GetCurrentStyle(T('b')[i],'bottom')) && btLeft >= parseInt(GetCurrentStyle(T('b')[i],'left')) && btLeft <= parseInt(GetCurrentStyle(T('b')[i],'left'))+parseInt(monsterWidth)){
J('main').removeChild(obj);
J('main').removeChild(T('b')[i]);
var sc = parseInt(J('myScore').innerHTML);
sc++;
J('myScore').innerHTML = sc + '<span style="color:#ffffff;font-size: 0.8em !important;margin-left: 20px;">分</span>';
}
// console.log(parseInt(GetCurrentStyle(T('b')[i],'bottom')));
}
}
function flightCollide(m){
var obj = document.getElementById(m);
var mtBottom = parseInt(GetCurrentStyle(obj,'bottom'));
var mtLeft = parseInt(GetCurrentStyle(obj,'left'));
if(mtBottom <= parseInt(GetCurrentStyle(J('flight'),'bottom'))+parseInt(firstFlightHeight) && mtLeft >= parseInt(GetCurrentStyle(J('flight'),'left'))-parseInt(monsterWidth) && mtLeft <= parseInt(GetCurrentStyle(J('flight'),'left'))+parseInt(firstFlightWidth)){
clearInterval(bgIntervel);
clearInterval(msIntervel);
clearInterval(btIntervel);
flag = false;
}
}
function score(){
var scoreBox = document.createElement('span');
scoreBox.id = 'myScore';
scoreBox.setAttribute('style','display:block;position:absolute;right:100px;top:20px;font-size:2em;color:red;z-index: 99999;')
J('main').appendChild(scoreBox);
J('myScore').innerHTML = 0 + '<span style="color:#ffffff;font-size: 0.8em !important;margin-left: 20px;">分</span>';
}
score();
var bgNum = 0;
function bg(){
if(bgNum >= 800){
bgNum = 0;
}else{
bgNum++;
}
J('main').style.background = 'url(images/bg_01.jpg) 0px -'+bgNum+'px';
}
J('start').onclick = function(){
if(J('start').innerHTML == '开始游戏'){
msIntervel = setInterval(function(){
createMonster();
},800)
btIntervel = setInterval(function(){
createBullet();
},500)
bgIntervel = setInterval(function(){
bg();
},1)
flag = true;
}
}
J('restart').onclick = function(){
location.replace(location.href='index.html');
}
function leftMove(){
var _left = parseInt(GetCurrentStyle(J('flight'),'left'));
_left-=flightMoveSpeed;
if(_left <= 0){
_left = 0;
}
J('flight').style.left = _left + 'px';
}
function rightMove(){
var _left = parseInt(GetCurrentStyle(J('flight'),'left'));
_left+=flightMoveSpeed;
if(_left >= (parseInt(GetCurrentStyle(J('main'),'width'))-parseInt(GetCurrentStyle(J('flight'),'width')))){
_left = (parseInt(GetCurrentStyle(J('main'),'width'))-parseInt(GetCurrentStyle(J('flight'),'width')));
}
J('flight').style.left = _left + 'px';
}
function upMove(){
var _bottom = parseInt(GetCurrentStyle(J('flight'),'bottom'));
_bottom+=flightMoveSpeed;
if(_bottom >= (parseInt(GetCurrentStyle(J('main'),'height'))-parseInt(GetCurrentStyle(J('flight'),'height')))){
_bottom = (parseInt(GetCurrentStyle(J('main'),'height'))-parseInt(GetCurrentStyle(J('flight'),'height')));
}
J('flight').style.bottom = _bottom + 'px';
}
function downMove(){
var _bottom = parseInt(GetCurrentStyle(J('flight'),'bottom'));
_bottom-=flightMoveSpeed;
if(_bottom <= 0){
_bottom = 0;
}
J('flight').style.bottom = _bottom + 'px';
}
window.onkeydown = function(){
var keyNum = event.keyCode;
if(flag){
switch (keyNum){
case 32: ;break;
case 37: leftMove() ;break;
case 38: upMove() ;break;
case 39: rightMove() ;break;
case 40: downMove() ;break;
case 100: leftMove() ;break;
case 102: rightMove() ;break;
case 104: upMove() ;break;
case 98: downMove() ;break;
case 103: leftMove();upMove() ;break;
case 105: rightMove();upMove() ;break;
case 97: leftMove();downMove() ;break;
case 99: rightMove();downMove() ;break;
}
}
}
function GetCurrentStyle (obj, prop) {
if (obj.currentStyle) {
return obj.currentStyle[prop];
}
else if (window.getComputedStyle) {
propprop = prop.replace (/([A-Z])/g, "-$1");
propprop = prop.toLowerCase ();
return document.defaultView.getComputedStyle (obj,null)[prop];
}
return null;
}
}