jQuery实现飞机大战游戏
更新时间：2022年05月09日 09:19:10 作者：南初️
这篇文章主要为大家详细介绍了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;
} 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
前面我们分享了使用jquery中EasyUI实现同步树的代码，本文我们就来看下使用EasyUI实现异步树的方法和示例，希望小伙伴们能够喜欢。2015-03-03
存储过程是在大型数据库系统中，一组为了完成特定功能的sql语句集，经过编译存储在数据库中，用户通过指定存储过程的名字并给出参数（如果该存储过程带有参数）来执行它，下面小编给大家介绍asp.net中oracle存储过程，需要的朋友可以参考下2015-08-08
下面小编就为大家带来一篇JQuery validate 验证一个单独的表单元素实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
jquery动态改变onclick属性导致失效的问题解决方法
onclick属性失效的问题，相信很多的朋友都有遇到过吧，jquery动态改变onclick属性就会导致此问题的发生，解决方法如下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了JQuery 实现文件下载的常用方法,结合实例形式分析了jQuery的GET方式、POST方式及HTML5 Blob对象等常见的文件下载机制、原理与实现方法,需要的朋友可以参考下2019-10-10
ajax联动框想必大家早有所耳闻，接下来本文详细介绍下使用jquery实现的原理及代码，感兴趣的你可以参考下，或许对你有所帮助2013-03-03
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
这篇文章主要介绍了jQuery实现Table表格隔行变色及高亮显示当前选择行效果,涉及jQuery针对table元素遍历、运算、样式及鼠标事件动态响应相关操作技巧,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了jQuery实现的分子运动小球碰撞效果,涉及jQuery基于定时函数操作页面元素动态变换的技巧,需要的朋友可以参考下2016-01-01
这篇文章主要为大家介绍了jQuery实现多级联动下拉列表查询框，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了jQuery模拟html下拉多选框的原生实现方法,结合完整实例形式分析了jQuery动态操作页面元素实现select下拉框效果的相关操作技巧,需要的朋友可以参考下2019-05-05
最新评论