项目地址https://github.com/2016caicai/palngame
游戏界面（略丑）
核心代码
首先是创建飞机类，还有给飞机添加移动的行为，为接下来的飞碟和星球打基础
/*
创建飞机类
*/
function plan(X,Y,imagesrc,sizeX,sizeY,score,dietime,sudu,boomimage,hp){
this.planX=X;//飞碟初始化位置x
this.planY=Y;//飞碟初始化位置y
this.imagenode=null;//飞碟元素
this.planscore=score;//经验值
this.plansizeX=sizeX;//飞碟x坐标
this.plansizeY=sizeY;//飞碟y坐标
this.planboomimage=boomimage;//死亡图片
this.planisdie=false;//死亡状态
this.planhp=1;
this.plandietime=dietime;//死亡时间
this.plansudu=sudu;//速度
//行为
/*
移动速度
*/
this.planmove=function(){
if(leve_init<=3){
this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px";
}
else if(leve_init>3&&leve_init<=6){
this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+20+"px";
}
else{
this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+40+"px";
}
}
//初始化
this.init=function(){
this.imagenode=document.createElement("img");
this.imagenode.style.left=this.planX+"px";
this.imagenode.style.top=this.planY+"px";
this.imagenode.src=imagesrc;
game_contain.appendChild(this.imagenode);
}
this.init();
}
/*
这里是创建子弹类，也给子弹加了移动行为，对接下来的碰撞做准备
/*
创建子弹类
*/
function bullet(X,Y,sizeX,sizeY,imagesrc){
this.bulletX=X;
this.bulletY=Y;
this.bulletimage=null;
this.bulletattach=1;
this.bulletsizeX=sizeX;
this.bulletsizeY=sizeY;
//行为
/*
移动行为
*/
this.bulletmove=function(){
this.bulletimage.style.top=this.bulletimage.offsetTop-30+"px";
}
this.init=function(){
this.bulletimage=document.createElement("img");
this.bulletimage.style.left= this.bulletX+"px";
this.bulletimage.style.top= this.bulletY+"px";
this.bulletimage.src=imagesrc;
game_contain.appendChild(this.bulletimage);
}
this.init();
}
这里是实例化子弹，飞碟和星球，接下来会再定时器里面不断触发飞碟和子弹的实例化方法
/*
创建单行子弹类
*/
function oddbullet(X,Y){
bullet.call(this,X,Y,6,14,"zidan.png");
this.bulletimage.style.width=20+leve_init*3+"px";
this.bulletimage.style.height=20+leve_init*3+"px";
}
// 创建飞碟
function ourplan(){
plan.call(this,120,485,'mine.png',66,80,5,660);
this.imagenode.setAttribute('id','ourplan');
this.imagenode.style.width=80+'px';
this.imagenode.style.height=50+'px';
}
//创建星球
function otherplan(leve_init){
plan.call(this,Math.random()*window.innerWidth-40,10,'other.png',66,80,0,660,20);
other++;
this.imagenode.style.width=40+'px';
this.imagenode.style.height=40+'px';
this.imagenode.style.top<window.innerHeight? this.imagenode.style.top+=50+'px':this.imagenode.remove;
}
主要的逻辑在开始函数里面， 首先是用定时器来移动背景图片，实现动态 接着用定时器来创建无限的子弹和有限的星球，星球用一个数组来保存，每实例化一个就push进数组，最大是屏幕上限20个， 当星球与子弹坐标重叠或者星球飞出屏幕，则去除星球元素并在数组中删除，击中星球会加飞碟的经验值，经验达到一百会升级，升级后的飞碟的子弹会变大； 当星球与飞碟的坐标重叠，则游戏结束清除定时器，然后跳出到游戏结束界面；
//游戏开始函数
function beginGame(){
var t=100, pageX= 0,pageY= 0, selfplan=new ourplan();//创建本方飞机
//移动事件
var ourPlan=document.getElementById('ourplan');
ourPlan.addEventListener('touchstart',function(event){
var touch = event.targetTouches[0];
pageX=touch.pageX;
pageY=touch.pageY;
//removeEventListener
})
ourPlan.addEventListener('touchmove',function(event){
var touch = event.targetTouches[0];
if (touch.pageX>40&&touch.pageX<window.innerHeight/2&&touch.pageY>40&&touch.pageY<window.innerHeight-10){
ourPlan.style.left= touch.pageX-40+"px";
ourPlan.style.top=touch.pageY-40+"px";
}
})
//背景移动
var bgt=setInterval(function(){
game_contain.style.backgroundPositionY=t+'px';
t>1000?t=100:t+=50;
},70);
//星球
var othert=setInterval(function(){
var otherslen=others.length;
var bulletslen=bullets.length;
//星球创建
if(otherslen<20){
others.push(new otherplan(leve_init))
}
for(var i=0;i<otherslen;i++){
if(others[i].planisdie!=true){
others[i].planmove();
}
/*
如果超出边界,删除机敌
*/
if(others[i].imagenode.offsetTop>568){
game_contain.removeChild(others[i].imagenode);
others.splice(i,1);
otherslen--;
}
//当敌机死亡标记为true时，经过一段时间后清除敌机
if(others[i].planisdie==true){
others[i].plandietimes+=20;
if(others[i].plandietimes==others[i].plandietime){
game_contain.removeChild(others[i].imagenode);
others.splice(i,1);
otherslen--;
}
}
}
//子弹创建
if(other>=0){
bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+30,parseInt(selfplan.imagenode.style.top)-10));
}
/*
移动子弹
*/
for(var i=0;i<bulletslen;i++){
bullets[i].bulletmove();
/*
如果子弹超出边界,删除子弹
*/
if(bullets[i].bulletimage.offsetTop<10){
game_contain.removeChild(bullets[i].bulletimage);
bullets.splice(i,1);
bulletslen--;
}
}
for(var k=0;k<bulletslen;k++){
for(var j=0;j<otherslen;j++){
//判断碰撞本方飞机
if(others[j].planisdie==false){
if(others[j].imagenode.offsetLeft+others[j].plansizeX>=selfplan.imagenode.offsetLeft&&others[j].imagenode.offsetLeft<=selfplan.imagenode.offsetLeft+selfplan.plansizeX){
if(others[j].imagenode.offsetTop+others[j].plansizeY>=selfplan.imagenode.offsetTop+40&&others[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop+selfplan.plansizeY){
//碰撞本方飞机，游戏结束，统计分数
console.log("游戏结束");
document.querySelector('.bestlevel').innerHTML=leve_init;
over_game.style.display='block';
music.pause();
musictrl.style.display='none';
clearInterval(othert);
}
}
//判断子弹与敌机碰撞
if((bullets[k].bulletimage.offsetLeft+bullets[k].bulletsizeX>others[j].imagenode.offsetLeft)&&(bullets[k].bulletimage.offsetLeft<others[j].imagenode.offsetLeft+others[j].plansizeX)){
if(bullets[k].bulletimage.offsetTop<=others[j].imagenode.offsetTop+others[j].plansizeY&&bullets[k].bulletimage.offsetTop+bullets[k].bulletsizeY>=others[j].imagenode.offsetTop){
//敌机血量减子弹攻击力
others[j].planhp=others[j].planhp-bullets[k].bulletattach;
//敌机血量为0，敌机图片换为爆炸图片，死亡标记为true，计分
if(others[j].planhp==0){
if(progress.value==100){
leve_init++;
progress.value=0;
level_num.innerText=parseInt(leve_init);
}else{
progress.value+=5;
}
//others[j].imagenode.src=others[j].planboomimage;
others[j].planisdie=true;
game_contain.removeChild(others[j].imagenode);
others.splice(j,1);
otherslen--;
}
//删除子弹
game_contain.removeChild(bullets[k].bulletimage);
bullets.splice(k,1);
bulletslen--;
break;
}
}
}
}
}
},150)
}
最后是音乐控制
musictrl.addEventListener('click',function(){
if(this.innerHTML=="关闭音乐"){
music.pause();
this.innerHTML="打开音乐";
}else{
music.play();
this.innerHTML="关闭音乐";
}
})
This work is licensed under a CC A-S 4.0 International License.