jQuery实现飞机大战小游戏

一、效果图二、核心代码1.创建地图2.用户选择飞机界面3.设置背景循环4.创建飞机5.创建敌机6.敌机移动7.设置敌机爆炸8.创建子弹9.检测子弹的移动（是否打到敌机）10.设置敌机被消灭的情况

一、效果图

二、核心代码

1.创建地图

this.createMap = function () {var that = this;that._bg = $("<div class='bgmap'></div>");that._bg.css({width: sw,height: sh,backgroundPosition: '0px ' + (-sh) + 'px'});mapEle.append(that._bg);this.startAnimate();//创建分数that.score=$("<span class='score'>0</span>");mapEle.append(that.score);};

2.用户选择飞机界面

this.createPage=function(){var that=this;that._userPage=$("<div class='user_check'></div>");that._userplane[0]=$("<div class='plane1'><img src='./img/my_1.png'></div>");that._userplane[1]=$("<div class='plane2'><img src='./img/my_2.png'></div>");that._userplane.map(function (item,index){!index?item.addClass("check"):'';//默认第一个选中that._userPage.append(item);item.on("click",function(){//设置二选一$(this).addClass("check").siblings().removeClass("check");});});that._start = $("<button class='start'>开始</button>");that._start.on("click",function(){that._userplane.map(function(item,index){if(item.hasClass("check")){that._userPage.hide();//开启背景动画that.startAnimate();//获取用户选择的飞机的图片路径that._userFeisrc=item.find("img").attr("src");that._plane.createUser(that._userFeisrc);}})});that._close = $("<button class='start'>关闭</button>");that._close.on("click",function(){//浏览器关闭window.close();})that._userPage.append(that._start);that._userPage.append(that._close);mapEle.append(that._userPage);}

3.设置背景循环

this.startAnimate=function(){var that=this;that._bg.animate({backgroundPositionY:0},5000,'linear').queue(function(){$(this).css({backgroundPosition:'0px '+(-sh)+'px'}).dequeue();that.startAnimate();});};

4.创建飞机

this.createUser=function(src){var that=this;that._user=$("<img class='user' src="+src+"/>");mapEle.append(that._user);that._user.css({top:sh,left: sw / 2 - 30}).animate({top:that.pos.top},1000,function(){//动画执行完成之后用户开始操作console.log("开始触屏");//给当前飞机添加触屏事件that.addTouch();//设置子弹几发，并且开始发射that.gun();//敌机开始动that.randomEnemy();});};

5.创建敌机

this.createEnemy = function () {var that = this;that.index = Math.floor(Math.random() * that.enemylist.length);var wrandom = Math.random() * sw;var ele = that.enemylist[that.index];//获取当前的敌机that.enemy = $("<img class='enemy'/>");mapEle.append(that.enemy);that.top = ele.direct == 'todown' ? -ele.h : sh + ele.h;that.left = wrandom - ele.w < 0 ? 0 : wrandom + ele.w > sw ? sw - ele.w : wrandom;that.w = ele.w;that.h = ele.h;that.enemy.css({width: that.w,height: that.h,left: that.left,top: that.top}).attr("src", ele.src);that.blood = ele.blood;that.score = ele.score;that.way = ele.direct;that.speed = ele.speed;//敌机移动that.move();};

6.敌机移动

this.move=function(){var that=this;if(that.way=="todown"){that.top+=that.speed;if(that.top>=sh){that.enemy.remove();return;}}else{that.top-=that.speed;if(that.top<=0){that.enemy.remove();return;}}that.enemy.css({top: that.top});that.timer=setTimeout(function(args){args.move();},that.tspeed,that)}

7.设置敌机爆炸

this.blow = function (index) {var that = this;//开始爆炸that.blowool = true;that.enemy.remove();//加分allsc+=that.score;$(".score").text(allsc);//在原位置创建爆炸var b = $("<img class='blow' src='./img/blow.gif'/>");b.css({left: that.left,top: that.top,width: that.w,height: that.h});b.timer = setTimeout(function (arg) {arg.remove();}, 300, b)mapEle.append(b);allEnemy.splice(index, 1);};

8.创建子弹

this.createBullet=function(pos,left){this._bullet = $("<img class='bullet' src='" + this.img + "'/>");mapEle.append(this._bullet);//设置当前子弹的坐标this.top = pos.top - 20;this.left = left - this.w / 2;this._bullet.css({width: this.w,height: this.h,left: this.left,top: this.top});this.move();}

9.检测子弹的移动（是否打到敌机）

this.move=function(){var that=this;that.top-=that.dus;if(that.top<=0){that._bullet.remove();return;}//在子弹里面去检测 是否打到敌机that = that.checkEnemy();//检测子弹如果为null 直接出if (that == null)return;that._bullet.css({top: that.top});that.timer=setTimeout(function(args){args.move();},that.speed,that);};

10.设置敌机被消灭的情况

this.checkEnemy = function () {var that = this;//left topfor (var i = 0; i < allEnemy.length; i++) {var item = allEnemy[i];//检测条件if (item.blowool == false && that.left + that.w >= item.left && that.left <= item.left + item.w && that.top <= item.top +item.h && that.top + that.h >= item.top) {//开始血量减少item.blood -= 1;if (item.blood <= 0) {//敌机移除item.blow(i);}//子弹移除that._bullet.remove();//移除子弹对象return null;}}return that;}