javascript飞机大战-----009游戏结束

Alley-巷子      2022-02-13     121

关键词:

/*
游戏引擎
 */
var Engine = {
    //刚开始的游戏状态
    gameStatus:false,
    //所以敌机
    enemy:{},
    //子弹
    bullet:{},
    //得分
    scroe:0,
    //背景图片
    game:document.querySelector(‘.game‘),
    //页面得分
    textScroe:document.querySelector(‘.score‘),

    //初始化
    init:function(){
        this.gameStart();
    },
    //游戏开始
    gameStart:function(){
        var _this = this;
        //点击图片的时候判断游戏状态
        this.game.onclick = function(){
            if(!_this.gameStatus){
                _this.gameStatus = true;
                //移动移动
                _this.bgMove();
                _this.handleMove();
                _this.createPlane();
            }
        }
    },
    //背景移动
    bgMove:function(){
        var y=0;
        var _this = this;
        this.bgTimer = setInterval(function(){
            y+=2;
            _this.game.style[‘background-position-y‘]=y+‘px‘;
        },50)
    },
    createPlane:function(){
        //创建敌机和英雄机
        Hero.init();

        //创建敌机
        this.createTimer = setInterval(function(){
            var num = parseInt(Math.random()*15)+1;
            switch (num) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 9:
                    new SmallEnemy().init();
                    break;
                case 2:
                case 4:
                case 6:
                    new MiddleEnemy().init();
                case 8:
                case 12:
                    new LargeEnemy().init();

                
                    
            }
        },500)
    },
    //所有敌机和子弹都要动
    handleMove:function(){
        var _this=this;
         this.moveTimer = setInterval(function(){
            //创建所有子弹
            for(var i in _this.bullet){
                _this.bullet[i].move()
            }
            //c创建所有敌机动
            for(var i in _this.enemy){
                _this.enemy[i].move()
            }

        },30)
    },
    //碰撞检测
    isCompact:function(obj1,obj2){
        var l1 = obj1.offsetLeft>obj2.offsetLeft+obj2.offsetWidth;
        var l2 = obj2.offsetLeft>obj1.offsetLeft+obj1.offsetWidth;
        var t1 = obj1.offsetTop>obj2.offsetTop+obj2.offsetHeight;
        var t2 = obj2.offsetTop>obj1.offsetTop+obj1.offsetHeight;
        if(l1||l2||t1||t2){
            return false;
        }else{
            return true;
        }
    },
    //更新得分
    updateScroe:function(scroe){

        this.scroe+=scroe;

        this.textScroe.innerHTML="分数"+this.scroe;
    },
    gameOver:function(){
        //停止创建敌机
        clearInterval(this.createTimer);

        //子弹停止
        clearInterval(this.moveTimer);
    }
};
Engine.init();

 

子弹停止

/*
英雄机:因为英雄机只有一辆所以不需要用构造函数
 */
var Hero = {
    //初始图片
    self:null,
    //初始left
    left:0,
    //初始top
    top:0,
    //生命值
    life:3,
    //加载进来的图和爆照的图
    imgs:[‘image/hero.gif‘,‘image/hero-bang.gif‘],
    //获得到自己的红星
    allHero:document.querySelectorAll(‘.life>img‘),
    //初始化
    init:function(){
        //创建一个元素
        var img = document.createElement(‘img‘);
        //将图片路径赋值给它
        img.src=this.imgs[0];
        //插入到game中
        Engine.game.appendChild(img);
        //赋值给英雄机的初始图片
        this.self = img;
        //当图片加载完成以后获取图片的高度和宽度
        var _this = this;//在函数里面this的指向会改变,所以我们提前报存下来
        img.onload = function(){
            //因为上面的属性有this.left所以我们应该和图片一样赋值给它
            _this.left = (Engine.game.offsetWidth-img.offsetWidth)/2;//英雄机的left中心点等于(game的宽度-英雄机的宽度)除以2
            _this.top = Engine.game.offsetHeight-img.offsetHeight;
            img.style.left = _this.left+‘px‘;
            img.style.top = _this.top+‘px‘;
            //初始化的时候调用move
            _this.move();
            _this.shoot();
        };
        
    },
    //鼠标移动的时候英雄机也要移动
    move:function(){
        //类似于放大镜
        var _this = this;
        document.onmousemove = function(e){
            var e = e||event;
            var l = e.clientX - Engine.game.offsetLeft - _this.self.offsetWidth/2;
            var t = e.clientY - Engine.game.offsetTop  - _this.self.offsetHeight/2;
            //边界处理
            var lmax = Engine.game.offsetWidth-_this.self.offsetWidth;//最大边界

            var bmax = Engine.game.offsetHeight-_this.self.offsetHeight;//最大边界
            l = l < 0 ? 0 : (l > lmax ? lmax : l);
            t = t < 0 ? 0 : (t > bmax ? bmax : t);

            //赋值
            _this.self.style.left = l+‘px‘;
            _this.self.style.top = t+‘px‘;

            //更新left  top
            _this.left = l;
            _this.top = t;
        }
    },
    //发子弹
    shoot:function(){
        //每隔100毫秒发一次子弹
        var _this = this;
        this.shootTimer = setInterval(function(){
            var l = _this.left+_this.self.offsetWidth/2
            new Bullet(l,_this.top).init();
        },100)
    },
    bang:function(){
        var img = document.createElement(‘img‘);
        img.src = this.imgs[1];
        img.style.left = this.left+‘px‘;
        img.style.top = this.top+‘px‘;
        Engine.game.appendChild(img)
        setTimeout(function(){
            img.remove();
        },1000)
    },
    die:function(){
        this.life--;
        this.allHero = document.querySelectorAll(‘.life img‘);
        this.allHero[0].remove();
        
        console.log(this.allHeart,this.allHero[0])
        if(this.life<=0){
            this.destroy();
        }
    },
    destroy:function(){
        this.self.remove();
        this.bang();
        clearInterval(this.shootTimer);
        //游戏结束
        this.gameOver();
    }
}
//在游戏没开始的时候不能出现英雄机和子弹所以要放在引擎里面
//Hero.init();

 

javascript飞机大战-----002游戏引擎

基本html布局<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}.game{position:relative;width:320px;height 查看详情

java实现飞机大战小游戏|java入门结课作业(代码片段)

...Web开始更新文章。代码布局如下图项目分析通过键盘控制飞机前后移 查看详情

javascript飞机大战-----007爆炸效果

要检验什么时候碰撞,我们必须了解什么时候不相撞。以上四种情况是不相撞的时候首先在引擎里面写好什么时候碰撞什么时候不碰撞/*游戏引擎*/varEngine={//刚开始的游戏状态gameStatus:false,//所以敌机enemy:{},//子弹bullet:{},//得分scor... 查看详情

飞机大战项目(代码片段)

学习python的一个小项目项目名称:飞机大战项目项目语言:python实现功能:飞机连续发射三个子弹,打中敌机,敌机销毁,飞机碰到敌机,飞机销毁,游戏结束importpygamefromplane_spritesimport*classPlaneGame(object):‘‘‘飞机大战主游戏‘... 查看详情

基于java的飞机大战游戏的设计与实现

基于Java的飞机大战游戏主要需要我方飞机和敌方飞机,还有子弹,特殊nPC,开始背景,结束背景,以及背景音乐。我方飞机可以随意移动,敌方飞机无规律出现。游戏玩家通过鼠标移动控制飞机移动,我方飞机在游戏开始时就... 查看详情

小游戏“飞机大战”

Airplane类Award接口Bee类Bullet类Enemy接口FlyingObjectFlyingObject类主方法 查看详情

飞机大战html游戏全代码jsjquery操作(代码片段)

...!注意事项博主的话当时博主只会html,css和原生JavaScript,假期用了一周编出来,那个时候的状态就是天天不想睡觉,就想把这个游戏编完。后来博主开学了,去图书馆借了一本Jquery的书,于是就把原... 查看详情

雷电飞机大战游戏|基于java开发实现雷电飞机大战游戏(代码片段)

作者主页:编程指南针作者简介:Java领域优质创作者、CSDN博客专家、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容:Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助收藏点赞不迷... 查看详情

6步搭建一个飞机大战游戏

...or开发的Web游戏,可以进行飞机大战。开发语言:JavaScript(49.3%)、CSS(36.6%)、Html(14%)部署环境:CentOS7.664bitforKai1s+jdk1.8涉及云服务:华为云DevCloud、华为云弹性云服务器ECS操作流程操... 查看详情

javascript飞机大战-----008积分

/*创建敌机:*/functionEnemy(blood,speed,imgs,scroe){//敌机leftthis.left=0;//敌机topthis.top=0;//敌机血量this.blood=blood;//敌机速度this.speed=speed;//敌机图片集合this.imgs=imgs;//爆炸前和爆炸后//分数this.scroe=scroe;}Enemy.prototype 查看详情

求一款飞机大战游戏(很经典)

小时候看到一款飞机大战的游戏可以选择很多种飞机,这些飞机攻击的风格很华丽,按了一个按键以后会已飞机为中心出现一个扫描区域我还记得有些是圆形的有些是梯形的还有一些是三角形的然后敌机在这个扫描区域内放开按... 查看详情

飞机大战(代码片段)

...理解游戏循环和游戏时钟理解精灵和精灵组项目准备新建飞机大战项目新建一个hm_01_pygame入门.py导入游戏素材图片游戏的第一印象把一些静止的图像绘制到游戏窗口中根据用户的交互或其他情况,移动这些图像,产生动画效果根... 查看详情

6步搭建一个飞机大战游戏

...要:本文以华为云软件开发平台DevCloud为例,展示飞机大战游戏开发的DevOps实践流程。DevOps实践DevOps实践是一种开发、测试运维一体化的模式,其实践的外在表现一般包括了如代码仓库、构建、测试、发布、配置、监... 查看详情

javascript飞机大战-----006创建敌机

先写一个敌机类/*创建敌机:*/functionEnemy(blood,speed,imgs){//敌机leftthis.left=0;//敌机topthis.top=0;//敌机血量this.blood=blood;//敌机速度this.speed=speed;//敌机图片集合this.imgs=imgs;//爆炸前和爆炸后}Enemy.prototype={constructor:Enemy, 查看详情

canvas:飞机大战(代码片段)

最开始我们要初始化信息,我们有五个状态,游戏封面,加载状态,运行状态,游戏暂停,游戏结束我们还需要得分score,生命lifevarSTART=1;//初始状态varLOADING=2;//加载状态varRUNNING=3;//游戏运行状态varWAIT=4;//游戏暂停状态varGAMEOVER=5;... 查看详情

javascript飞机大战-----0010完整版代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}.game{position:relative;width:320px;height:568px;m 查看详情

javascript飞机大战-----003创建英雄机

/*英雄机:因为英雄机只有一辆所以不需要用构造函数*/varHero={//初始图片self:null,//初始leftleft:0,//初始toptop:0,//生命值life:3,//加载进来的图和爆照的图imgs:[‘image/hero.gif‘,‘image/hero-bang.gif‘],//初始化init:function(){//创建一个元素vari... 查看详情

javaswing飞机大战游戏github免费开源公开源码

本次项目来自:java飞机大战游戏开发教程子弹打飞机游戏经典游戏开发教程Java项目实战最详细的游戏开发课程但是它不是开源的,课程讲到一半就要付费了所以我把该项目的源码公开了,放在了github与码云上,... 查看详情