原生JS实现飞机大战小游戏

最新推荐文章于 2024-07-12 15:18:46 发布

Mr.名人

最新推荐文章于 2024-07-12 15:18:46 发布

阅读量1.3k

点赞数 3

文章标签： javascript 游戏 html

本文链接：https://blog.csdn.net/Mr_mingr/article/details/104921907

版权

这篇博客介绍如何利用原生JavaScript实现一个简单的飞机大战小游戏。内容包括创建游戏引擎，设计子弹构造函数以增强游戏体验，创建主角机和敌机，并启动游戏。虽然游戏中存在一些未完善的地方，如缺少暂停功能，但博主欢迎读者提出建议和指正。

摘要由CSDN通过智能技术生成

原生js实现飞机大战小游戏

废话不多说我们直接开始吧

首先是最基础的html结构，三个小飞机图来表示己方剩余的血量，剩下的css样式自己设置即可。

设置成这样就可以了

//先创建一个游戏引擎

var Engine = {
   
    //刚开始的游戏状态
    gameStatus: false,
    //所有敌机
    enemy: {
   },
    //子弹
    bullet: {
   },
    //得分
    scroe: 0,
    //游戏开始按钮
    goplay: document.getElementById('start'),
    //背景图片
    game: document.querySelector('.game'),
    //页面得分
    textScroe: document.querySelector('.score'),
    //游戏开始页面
    contentdiv: document.getElementById('contentdiv'),
    //游戏结束分数界面
    gameover : document.querySelector('.gameover'),
    //初始化
    init: function () {
   
        this.gameStart();
    },
        //游戏开始
    gameStart: function () {
   
        var _this = this; //保存this
        //点击按钮的时候判断游戏状态
        this.goplay.onclick = function () {
   
            _this.game.style.display = "block";
            _this.contentdiv.style.display = "none";
            if (!_this.gameStatus) {
   
                _this.gameStatus = true;
                //背景移动
                _this.bgMove();
                _this.handleMove();
                _this.createPlane();
            }
        }
    },
    //背景移动
    bgMove: function () {
   
    	//设置背景每次移动距离
        var y = 0;
        //保存this
        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:
             case 10:
                 new SmallEnemy().init();
                 break;
         //创建中性飞机
             case 2:
             case 4:
             case 6:
                 new MiddleEnemy().init();
         //创建大飞机（三个敌机对象在后续补充）
             case 8:
             case 12:
                 new LargeEnemy().init();
            }
        }, 500)
    },
    //所有敌机和子弹开始动起来
    handleMove: function () {
   
    	//this指向改变提前保存
        var _this = this;
        this.moveTimer = setInterval(function () {
   
            //所有子弹
            for (var i in _this.bullet) {
   
                _this.bullet[i].move()
            }
            //所有敌机
            for (var i in _this.enemy) {
   
                _this.enemy[i].move()
            }

        }