js飞机大战
这是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:"
+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:"
+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:"+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:"
+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:"+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:"
+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:"+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;
}