这是JS版本的飞机大战,和C#版本的思路相同,就是语言上有差别,用来巩固知识。可以将代码直接引入到HTML中就可以看到效果
//编写背景对象 function Background(width,height,X,Y){ // 背景的宽度 this.width=width; // 背景的高度 this.height=height; // 背景的水平坐标 this.X=X; // 背景的垂直坐标 this.Y=Y; // 创建背景函数将背景存放在 draw属性上 this.draw=(function(X,Y,width,height){ var a=document.createElement("div"); a.style.cssText="position:fixed;top:"+Y+"px;left:"+X+"px;" +width+"px;height:"+height+"px;background-color:aqua;"; return a; })(this.X,this.Y,this.width,this.height); // 创建背景函数的绘制方法 this.drawing=function(){ document.body.appendChild(this.draw); } } //创建我方飞机对象 function MyPlane(width,height,X,Y){ // 背景的宽度 this.width=width; // 背景的高度 this.height=height; // 背景的水平坐标 this.X=X; // 背景的垂直坐标 this.Y=Y; // 创建我方飞机函数将背景存放在 draw属性上 this.draw=(function(X,Y,width,height){ var a=document.createElement("div"); a.style.cssText="position:fixed;top:"+Y+"px;left:"+X+"px;" +width+"px;height:"+height+"px;background-color:aqua;"; return a; })(this.X,this.Y,this.width,this.height); // 创建我方飞机函数的绘制方法 this.drawing=function(){ document.body.appendChild(this.draw); } // 创建飞机移动函数,同时进行边缘判断 this.move=function(x,y){ if(x>=620&&x<=1030){ this.X = x; } if(y>=170&&y<=730){ this.Y = y; } this.draw.style.cssText="position:fixed;top:" +(this.Y-this.height/2)+"px;left:"+(this.X-this.width/2)+ "px;"+width+"px;height:"+height+"px;background-color:red;"; } } //创建子弹对象 function MyZidan(width,height,X,Y,speed){ //子弹的宽度 this.width=width; //子弹的高度 this.height=height; //子弹的水平坐标 this.X=X; //子弹的垂直坐标 this.Y=Y; //子弹的速度 this.speed=speed; //将子弹dom存放在dram上 this.draw=(function(X,Y,width,height){ var a=document.createElement("div"); a.style.cssText="position:fixed;top:"+Y+"px;left:"+X+"px;" +width+"px;height:"+height+"px;background-color:aqua;"; return a; })(this.X,this.Y,this.width,this.height); //创建子弹函数的绘制方法 this.drawing=function(){ document.body.appendChild(this.draw); } //子弹移动函数 this.move=function(){ this.Y=this.Y-this.speed; this.draw.style.cssText="position:fixed;top:" +(this.Y-this.height/2)+"px;left:"+(this.X-this.width/2)+ "px;"+width+"px;height:"+height+"px;background-color:red;"; } //子弹删除函数 this.remove=function(){ document.body.removeChild(this.draw); } } //创建敌人飞机对象 function EnemyPlane(width,height,X,Y,speed){ //敌人飞机的宽度 this.width=width; //敌人飞机的长度 this.height=height; //敌人飞机的水平坐标 this.X=X; //敌人飞机的垂直坐标 this.Y=Y; //敌人飞机的速度 this.speed=speed; //将敌人飞机dom存放在dram上 this.draw=(function(width,height,X,Y){ var a=document.createElement("div"); a.style.cssText="position:fixed;top:"+Y+"px;left:"+X+"px;" +width+"px;height:"+height+"px;background-color:blue;"; return a; })(this.width,this.height,this.X,this.Y); //创建敌人飞机函数的绘制方法 this.drawing=function(){ document.body.appendChild(this.draw); } //敌人飞机移动函数 this.move=function(){ this.Y=this.Y+this.speed; this.draw.style.cssText="position:fixed;top:" +(this.Y-this.height/2)+"px;left:"+(this.X-this.width/2)+ "px;"+width+"px;height:"+height+"px;background-color:blue;"; } //敌人飞机删除函数 this.remove=function(){ document.body.removeChild(this.draw); } } //创建单例类 function SingleObjct(background,myPlane){ //存放实例化背景对象 this.background=background; //存放实例化我方飞机对象 this.myPlane=myPlane; //存放我方飞机子弹对象列表 this.myZidan=[]; //添加子弹对象 this.addZidan=function(){ this.myZidan.push(new MyZidan(10,10,this.myPlane.X,this.myPlane.Y-20,2)); } //绘制子弹函数 this.drawMyZidan=function(){ for(var i=0;i<this.myZidan.length;i++){ this.myZidan[i].drawing(); } } //子弹移动函数 this.moveMyZidan=function(){ for(var i=0;i<this.myZidan.length;i++){ this.myZidan[i].move(); } } //判断子弹是否出界,出界则将对象删除 this.moveToBorderZidan=function(){ for(var i=0;i<this.myZidan.length;i++){ if(this.myZidan[i].Y<=150){ this.myZidan[i].remove(); this.myZidan.splice(i,1); return; } } } //存放敌人飞机对象列表 this.ListEnemyPlane=[]; //添加敌人飞机对象方法 this.addEnemyPlany=function(X,Y){ var a=new EnemyPlane(20,20,X,Y,2); a.drawing(); this.ListEnemyPlane.push(a); } //绘制敌人飞机函数 this.drawEnemyPlane=function(){ for(var i=0;i<this.ListEnemyPlane.length;i++){ this.ListEnemyPlane[i].drawing(); } } //移动敌人飞机函数 this.moveEnemyPlane=function(){ for(var i=0;i<this.ListEnemyPlane.length;i++){ this.ListEnemyPlane[i].move(); } } //判断敌人飞机是否出界,出界就将其移除 this.moveToBorderEnemyPlane=function(){ for(var i=0;i<this.ListEnemyPlane.length;i++){ if(this.ListEnemyPlane[i].Y>=740){ this.ListEnemyPlane[i].remove(); this.ListEnemyPlane.splice(i,1); } } } //判断子弹和敌人飞机是否向撞 this.PZJC=function(){ for(var i=0;i<this.myZidan.length;i++){ for(var j=0;j<this.ListEnemyPlane.length;j++){ if(rectangle(this.myZidan[i].width,this.myZidan[i].height,this.myZidan[i].X,this.myZidan[i].Y, this.ListEnemyPlane[j].width,this.ListEnemyPlane[j].height, this.ListEnemyPlane[j].X,this.ListEnemyPlane[j].Y)){ this.myZidan[i].remove(); this.myZidan.splice(i,1); this.ListEnemyPlane[j].remove(); this.ListEnemyPlane.splice(j,1); return; } } } } } //窗体加载 window.onload=function(){ var singleObjct=new SingleObjct(new Background(450,600,600,150),new MyPlane(40,40,100,100)); singleObjct.background.drawing(); singleObjct.myPlane.drawing(); //鼠标移动事件 window.onmousemove=function(event){ singleObjct.myPlane.move(event.clientX,event.clientY); } //鼠标单击事件 window.onclick=function(event){ singleObjct.addZidan(); singleObjct.drawMyZidan(); } //间隔时间触发函数,10毫秒触发一次 var timer = setInterval(function(){ singleObjct.moveToBorderZidan(); singleObjct.moveMyZidan(); singleObjct.moveToBorderEnemyPlane(); singleObjct.moveEnemyPlane(); singleObjct.PZJC(); if(singleObjct.ListEnemyPlane.length<6){ singleObjct.addEnemyPlany(getRandomX(),getRandomY()); } },10) } //随机生成水平坐标 function getRandomX(){ return ~~(Math.random()*430+600) } //随机生成垂直坐标 function getRandomY(){ return ~~(Math.random()*200+110) } //判断矩形重合 function rectangle(width1,height1,X1,Y1,width2,height2,X2,Y2){ var rectangleX1=X1+width1/2; var rectangleY1=Y1+height1/2; var rectangleX2=X2+width2/2; var rectangleY2=Y2+height2/2; var X=Math.abs(rectangleX1-rectangleX2); var Y=Math.abs(rectangleY1-rectangleY2); if(2*X<width1+width2&&2*Y<height1+height2){ return true; } return false; }
