经典游戏飞机大战
好久没更新了，想起之前做的飞机大战
/**
* Created by Administrator on 2019/6/22.
*/
var playing =(function(){
var start;
function setmap(){
if(start==undefined){
start = new game();
}
return start;
}
//游戏的主类
function game(){
}
//将地图挂载给游戏
game.prototype.mapobj=new map();
function map(){
this.width =window.screen.availWidth ;
this.height =window.screen.availHeight;
this.bgurl="./img/map.jpg";
this.mapp=null;
this.isstart=true;
this.makemap=function(){
if(this.mapp==null){
this.mapp=document.createElement ("div");
this.mapp.style="position:relative;width:"+this.width+"px ;height:"+this.height+"px ;background-image:url("+this.bgurl+"); background-size:"+this.width+"px,"+this.height+"px;";
document.body.appendChild (this.mapp);
}
}
}
//飞机挂载给地图
map.prototype.userplane=function(){
//console.log(this); // this指的是map
return new plane(this); //传参
}
//创建飞机
function plane(m){ //m==map
this.flying=null;
this.width=70;
this.height=65;
this.flysrc="./img/my_2.png";
this.x=null;
this.y=null;
this.blood=5;
this.makeplane=function(){
if(this.flying ==null){
this.flying=document.createElement ("img");
this.flying.src=this.flysrc;
this.flying.style="position:absolute;z-index:33;width:"+this.width+"px;height:"+this.height+"px";
this.flying.setAttribute ("blood_num",this.blood);
m.mapp.appendChild(this.flying);
}
this.x=m.width/2-this.width/2;
this.y=m.height-this.height-13;
this.flying.style.left = this.x +"px";
this.flying.style.top = this.y +"px";
};
this.setevent=function(){
this.flying.addEventListener("touchmove",this.moveflying);
};
this.moveflying=function(a){
a=a|| a.window ; //系统兼容性
// console.log(a.touches[0]); //touch
Plane.x= a.touches[0].pageX;
Plane.y= a.touches[0].pageY;
Plane.x=Plane.x - Plane.width/2; //
Plane.y=Plane.y - Plane.height/2; //
// console.log(this); //this指的是飞机
Plane.x = Plane.x <=0 ? 0 : Plane.x >= m.width -Plane.width ? m.width-Plane.width : Plane.x;
Plane.y = Plane.y <=0 ? 0 : Plane.y >= m.height-Plane.height+10 ? m.height-Plane.height+10: Plane.y;
this.style.left = Plane.x+"px";
this.style.top = Plane.y+"px";
};
}
//子弹挂载给地图
map.prototype.zidan=function() {
return new biudan(this);
}
//创建子弹
function biudan(m) {
this.width = 30;
this.height = 45;
this.src = "./img/myb_1.png";
this.biudanlist = [[], [], []]; //存放三种子弹
this.method = "double";
this.speed=6;
this.dancreattime=12;
this.makebiudan = function (plane) {
switch (this.method) {
case "one":
var middle = document.createElement("img");
middle.src = this.src;
middle.style = "position:absolute;width:" + this.width + "px;height:" + this.height + "px";
this.biudanlist[1].push(middle);
break;
case "double":
//左边子弹
var tleft = document.createElement("img");
tleft.src = this.src;
tleft.style = "position:absolute;width:" + this.width + "px;height:" + this.height + "px";
this.biudanlist[0].push(tleft);
//右边子弹
var tright = document.createElement("img");
tright.src = this.src;
tright.style = "position:absolute;width:" + this.width + "px;height:" + this.height + "px";
this.biudanlist[2].push(tright);
break;
case "three":
//左边子弹
var tleft = document.createElement("img");
tleft.src = this.src;
tleft.style = "position:absolute;width:" + this.width + "px;height:" + this.height + "px";
this.biudanlist[0].push(tleft);
var middle = document.createElement("img");
middle.src = this.src;
middle.style = "position:absolute;width:" + this.width + "px;height:" + this.height + "px";
this.biudanlist[1].push(middle);
//右边子弹
var tright = document.createElement("img");
tright.src = this.src;
tright.style = "position:absolute;width:" + this.width + "px;height:" + this.height + "px";
this.biudanlist[2].push(tright);
break;
break;
}
this.addbiudan(plane);
};
this.addbiudan = function (plane) {
switch (this.method) {
case "one" :
this.biudanlist [1][this.biudanlist[1].length - 1].style.left = (plane.x + plane.width / 2 - this.width / 2) + "px";
this.biudanlist [1][this.biudanlist[1].length - 1].style.top = (plane.y - this.height + 15) + "px";
m.mapp.appendChild(this.biudanlist[1][this.biudanlist[1].length - 1]);
break;
case "double" :
this.biudanlist [0][this.biudanlist[0].length - 1].style.left = (plane.x ) + "px";
this.biudanlist [0][this.biudanlist[0].length - 1].style.top = (plane.y - this.height + 15) + "px";
this.biudanlist [2][this.biudanlist[2].length - 1].style.left = (plane.x + plane.width-this.width) + "px";
this.biudanlist [2][this.biudanlist[2].length - 1].style.top = (plane.y - this.height + 15) + "px";
m.mapp.appendChild(this.biudanlist[0][this.biudanlist[0].length - 1]);
m.mapp.appendChild(this.biudanlist[2][this.biudanlist[2].length - 1]);
break;
case "three" :
this.biudanlist [1][this.biudanlist[1].length - 1].style.left = (plane.x + plane.width / 2 - this.width / 2) + "px";
this.biudanlist [1][this.biudanlist[1].length - 1].style.top = (plane.y - this.height + 15) + "px";
this.biudanlist [0][this.biudanlist[0].length - 1].style.left = (plane.x ) + "px";
this.biudanlist [0][this.biudanlist[0].length - 1].style.top = (plane.y - this.height + 15) + "px";
this.biudanlist [2][this.biudanlist[2].length - 1].style.left = (plane.x + plane.width-this.width) + "px";
this.biudanlist [2][this.biudanlist[2].length - 1].style.top = (plane.y - this.height + 15) + "px";
m.mapp.appendChild(this.biudanlist[0][this.biudanlist[0].length - 1]);
m.mapp.appendChild(this.biudanlist[2][this.biudanlist[2].length - 1]);
m.mapp.appendChild(this.biudanlist[1][this.biudanlist[1].length - 1]);
break;
}
};
this.movebiudan = function (enemy) {
switch (this.method) {
case "one":
for(var key in this.biudanlist[1] ){
var top = parseInt(this.biudanlist[1][key].style.top);
top-=this.speed;
this.biudanlist[1][key].style.top=top + "px";
if(top<=0){
this.biudanlist[1][key].remove();
this.biudanlist[1].splice(key,1);
}
}
break;
case "double":
//遍历左边
for(var key in this.biudanlist[0] ){
var top = parseInt(this.biudanlist[0][key].style.top);
top-=this.speed;
this.biudanlist[0][key].style.top=top + "px";
if(top<=0){
this.biudanlist[0][key].remove();
this.biudanlist[0].splice(key,1);
}
}
for(var key in this.biudanlist[2] ){
var top = parseInt(this.biudanlist[2][key].style.top);
top-=this.speed;
this.biudanlist[2][key].style.top=top + "px";
if(top<=0){
this.biudanlist[2][key].remove();
this.biudanlist[2].splice(key,1);
}
}
break;
case "three":
//遍历左边
for(var key in this.biudanlist[0] ){
var top = parseInt(this.biudanlist[0][key].style.top);
top-=this.speed;
this.biudanlist[0][key].style.top=top + "px";
if(top<=0){
this.biudanlist[0][key].remove();
this.biudanlist[0].splice(key,1);
}
}
for(var key in this.biudanlist[1] ){
var top = parseInt(this.biudanlist[1][key].style.top);
top-=this.speed;
this.biudanlist[1][key].style.top=top + "px";
if(top<=0){
this.biudanlist[1][key].remove();
this.biudanlist[1].splice(key,1);
}
}
for(var key in this.biudanlist[2] ){
var top = parseInt(this.biudanlist[2][key].style.top);
top-=this.speed;
this.biudanlist[2][key].style.top=top + "px";
if(top<=0){
this.biudanlist[2][key].remove();
this.biudanlist[2].splice(key,1);
}
}
break;
}
this.checkenemy (enemy);
};
this.checkenemy=function(enemy){
for(var i=0;i= m.height){
this.enemylist [key].remove();
this.enemylist.splice(key,1);
}
}
};
this.en_biudan=function(){
for(var key in this.enemylist){
var biudan=document.createElement ("img");
biudan.src="./img/epb_1.png";
biudan.style="position:absolute; width:20px; height:30px";
var left=parseInt (this.enemylist[key].style.left) + parseInt(this.enemylist[key].style.width)/2 - 10;
var top=parseInt (this.enemylist[key].style.top) + parseInt(this.enemylist[key].style.height);
biudan.style.left=left+"px";
biudan.style.top=top+"px";
this.enemybiudanlist[key].push(biudan);
m.mapp.appendChild (biudan );
}
};
this.moveenemybiudan=function(plane){
for(var i=0;i= m.height){
this.enemybiudanlist[i][k].remove();
this.enemybiudanlist[i].splice(k,1);
}
//检测用户飞机,打到用户飞机时
var mtop=parseInt(plane.flying.style.top);
var mleft=parseInt(plane.flying.style.left);
if(top+30>=mtop && top <= plane.height+mtop && mleft<=left+20 && left<=plane.width+mleft){
console.log(2);
this.enemybiudanlist[i][k].remove();
this.enemybiudanlist[i].splice(k,1);
var mblood = plane.flying.getAttribute ("blood_num");
mblood--;
plane.flying.setAttribute ("blood_num",mblood);
if(mblood<=0){
m.isstart=false;
setInterval (function(){
cancelAnimationFrame (gametime )
},1)
}
}
}
}
}
}
return{
gamestart: setmap
}
})();
var Begin =playing.gamestart();
Begin.mapobj.makemap ();
var Plane=Begin.mapobj.userplane();
Plane.makeplane ();
Plane.setevent ();
var Biudan=Begin.mapobj.zidan ();
var makebiudan=0;
var Enemy=Begin.mapobj.enemy_plane ();
var make_enemy=0; //敌机产生时间
var make_enbiudantime=0;
var isenemystart=true;
var gametime=null;
setInterval (function(){
isenemystart =!isenemystart ;
},1000);
animate();
function animate(){
makebiudan ++;
make_enemy ++;
if(makebiudan>=Biudan.dancreattime){
makebiudan =0;
Biudan.makebiudan (Plane);
}
if(make_enemy >=Enemy.maketime ){
make_enemy=0;
Enemy.makeenemy ();
}
Biudan.movebiudan (Enemy);
Enemy.moveenemy();
if(isenemystart ){
make_enbiudantime++;
if(make_enbiudantime>=14){
make_enbiudantime=0;
Enemy.en_biudan ();
}
}
Enemy.moveenemybiudan (Plane);
gametime =window.requestAnimationFrame (animate);
if(!Begin.mapobj.isstart ){
Plane.flying.removeEventListener("touchmove",Plane.moveflying);
}
}
/*
console.log(Begin);
console.log(Plane);*/