jQuery实现飞机大战游戏
作者:南初️
这篇文章主要为大家详细介绍了jQuery实现飞机大战游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现飞机大战游戏的具体代码,供大家参考,具体内容如下
一、效果图
二、核心代码
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 top for (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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。