文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

jQuery实现飞机大战游戏

2024-04-02 19:55

关注

本文实例为大家分享了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;
            } 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯