JavaScript实现飞机大战游戏

 更新时间:2021年09月14日 10:38:45   作者:山与小岛  
这篇文章主要为大家详细介绍了JavaScript实现飞机大战游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了canvas ,js 实现一个简单的飞机大战,供大家参考,具体内容如下

预览图:

代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <script>
        // 获取 canvas元素
        var canvas = document.getElementsByTagName('canvas')[0];
        // 获取画笔
        var ctx = canvas.getContext('2d');
        // 画布信息
        var canvasParam = {
            width: 480,
            height: 852
        }
        canvas.width = canvasParam.width;
        canvas.height = canvasParam.height;

        // 初始化游戏状态
        var ready = 0; // 准备中
        var loading = 1; // 载入中
        var running = 2; // 游戏中
        var pause = 3; // 暂停
        var gameOver = 4; // 结束

        // 判断当前游戏状态
        var gameState = ready;

        // 初始化生命值
        var life = 3;

        // 初始化游戏得分
        var score = 0;

        // 背景 /
        //  创建背景图片
        var bgSrc = new Image();
        bgSrc.src = 'img/background.png';
        // 背景图片信息
        var bgParam = {
            bgSrc: bgSrc,
            x: 0,
            y: 0,
            width: 480,
            height: 852
        }

        // 构造函数: 背景
        function Bg(param) {
            this.bgSrc = param.bgSrc;
            this.x = param.x;
            this.y = param.y;
            this.y1 = param.y1;
            this.width = param.width;
            this.height = param.height;

            // 交替图片的坐标
            this.y1 = -this.height;

            // 绘制背景图
            this.paint = function() {
                ctx.drawImage(this.bgSrc, this.x, this.y, this.width, this.height);
                ctx.drawImage(this.bgSrc, this.x, this.y1, this.width, this.height);
            }

            // 背景图片交替移动
            this.sport = function() {
                this.y += 5;
                this.y1 += 5;
                if (this.y >= this.height) {
                    this.y = -this.height;
                }
                if (this.y1 >= this.height) {
                    this.y1 = -this.height;
                }
            }
        }
        // 实例化背景图片
        var bgObj = new Bg(bgParam);

        //  创建logo 
        var logoSrc = new Image();
        logoSrc.src = 'img/start.png';
        //  logo信息
        var logoParam = {
            logoSrc: logoSrc,
            x: 0,
            y: 0,
            width: 480,
            height: 852
        }

        // 构造函数 Logo
        function Logo(param) {
            this.logoSrc = param.logoSrc;
            this.x = param.x;
            this.y = param.y;
            this.width = param.width;
            this.height = param.height;

            // 绘制logo
            this.paint = function() {
                ctx.drawImage(this.logoObj, this.x, this.y, this.width, this.height);
            }
        }
        // 实例化logo对象
        var logoObj = new Logo(logoParam);


        // 点击画布,进入下一阶段 loading
        canvas.onclick = function() {
            if (gameState === ready) {
                gameState = loading;
            }
        }


        // 游戏加载阶段 loading 
        // 飞机进场
        // 飞机进场图片
        var loadImgArr = ['img/game_loading1.png', 'img/game_loading2.png', 'img/game_loading3.png', 'img/game_loading4.png']
            // 一个空数组,用来存放飞机进场的图片
        var loadingImg = [];
        // 循环创建飞机进场图片,将其存入数组loadingImg中
        for (var i = 0; i < loadImgArr.length; i++) {
            loadingImg[i] = new Image();
            loadingImg[i].src = loadImgArr[i];
        }

        // 飞机进场图片信息
        var loadingParam = {
            loadingImg: loadingImg,
            x: 0,
            width: 186,
            height: 38
        }

        // 构造函数:飞机进场信息
        function Loading(param) {
            this.loadingImg = loadingImg;
            this.width = param.width;
            this.height = param.height;
            this.x = param.x;
            this.y = canvasParam.height - param.height;

            // 定义载入中图片下标
            this.index = 0;

            // 定义 num 判断定时器的执行次数
            this.num = 0;

            // 绘制载入中图片
            this.paint = function() {
                ctx.drawImage(this.loadingImg[this.index], this.x, this.y, this.width, this.height);
            }

            // 改变载入中图片
            this.sport = function() {
                this.num++;
                if (this.num % 5 == 0) {
                    this.index++;
                    if (this.index === this.loadingImg.length) {
                        gameState = running;
                    }
                }
            }
        }

        // 实例化 载入中飞机对象
        var loadingObj = new Loading(loadingParam);


        // 我方飞机 ///
        // 我方飞机各个状态的图片
        var heroImgs = [
                'img/hero1.png',
                'img/hero2.png',
                'img/hero1.png',
                'img/hero_blowup_n1.png',
                'img/hero_blowup_n2.png',
                'img/hero_blowup_n3.png',
                'img/hero_blowup_n4.png'
            ]
            // 创建一个空数组,存放我方飞机各个状态的图片
        var heroRunning = [];
        // 循环创建我方飞机图片,存入数组heroRunning中
        for (var i = 0; i < heroImgs.length; i++) {
            heroRunning[i] = new Image();
            heroRunning[i].src = heroImgs[i];
        }

        // 我方飞机信息
        var heroParam = {
            haroRunning: heroRunning,
            width: 99,
            height: 124
        }

        // 我方飞机 构造函数
        function Hero(param) {
            this.heroRunning = heroRunning;
            this.x = canvasParam.width / 2 - param.width / 2;
            this.y = canvasParam.height - param.height * 1.2;
            this.width = param.width;
            this.height = param.height;

            // 我方飞机图片下标
            this.index = 0;
            // 判断飞机是否被撞击
            this.down = false;

            // 间隔触发
            this.num = 0;

            // 绘制我方飞机
            this.paint = function() {
                    ctx.drawImage(this.heroRunning[this.index], this.x, this.y, this.width, this.height);
                }
                // 交替绘制我方飞机执行时的图片
            this.sport = function() {
                if (!this.down) {
                    this.num++;
                    // 定时器每执行3次,我方飞机飞行图片交替一次
                    if (this.num % 3 === 0) {
                        if (this.index === 0) {
                            this.index = 1;
                        } else {
                            this.index = 0;
                        }
                    }
                } else {
                    // 我方飞机被撞击了
                    this.index++; // 图片数组下标+1,显示被撞击的图片
                    if (this.index === this.heroRunning.length) {
                        life--; // 生命值-1
                        if (life == 0) {
                            // 游戏状态变为 结束
                            gamerState = gameOver;
                            // 游戏结束之后 让飞机停留在冒烟状态
                            this.index = this.heroRunning.length - 1;
                        } else {
                            // 创建一个新的我方飞机
                            heroObj = new Hero(heroParam);
                        }
                    }
                }

            }

            // 创建子弹间隔
            this.bulletTime = 0;
            // 创建子弹
            this.newBullet = function() {
                this.bulletTime++;
                // 定时器执行3次,创建一个子弹
                if (this.bulletTime % 2 === 0) {
                    bullets.push(new Bullet(bulletParam));
                }
            }
        }

        // 实例化 我方飞机
        var heroObj = new Hero(heroParam);

        // 给画布绑定移动事件我方飞机随鼠标移动
        canvas.onmousemove = function(e) {
            if (gameState === running) {
                heroObj.x = e.offsetX - heroObj.width / 2;
                heroObj.y = e.offsetY - heroObj.height / 2;
            }

        }

        // 子弹 //
        var bulletImg = new Image();
        bulletImg.src = 'img/bullet1.png';

        var bulletParam = {
            bulletImg: bulletImg,
            width: 9,
            height: 21
        }

        // 构造函数:子弹
        function Bullet(param) {
            this.bulletImg = param.bulletImg;
            this.x = heroObj.x + heroObj.width / 2 - param.width / 2;
            this.y = heroObj.y - param.height;
            this.width = param.width;
            this.height = param.height;

            // 绘制子弹
            this.paint = function() {
                ctx.drawImage(this.bulletImg, this.x, this.y, this.width, this.height);
            }

            // 判断子弹是否碰到敌机
            this.down = false;

            // 子弹移动速度
            this.sport = function() {
                this.y -= 50;
            }
        }

        // 弹夹
        var bullets = [];

        // 制造子弹
        function bulletsPaint() {
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].paint();
            }
        }

        // 发射子弹
        function bulletsSport() {
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].sport();
            }
        }

        //  子弹飞出屏幕外面
        //  子弹与敌机碰撞
        function bulletsDelete() {
            for (var i = 0; i < bullets.length; i++) {
                if (bullets[i].y < -this.height || bullets[i].down) {
                    bullets.splice(i, 1);
                }
            }
        }

        // 敌方飞机
        // 小型敌机
        var enemy1Arr = [
            'img/enemy1.png',
            'img/enemy1_down1.png',
            'img/enemy1_down2.png',
            'img/enemy1_down3.png',
            'img/enemy1_down4.png'
        ];
        var enemy1Img = [];
        for (var i = 0; i < enemy1Arr.length; i++) {
            enemy1Img[i] = new Image();
            enemy1Img[i].src = enemy1Arr[i];
        }
        // 中型敌机
        var enemy2Arr = [
            'img/enemy2.png',
            'img/enemy2_down1.png',
            'img/enemy2_down2.png',
            'img/enemy2_down3.png',
            'img/enemy2_down4.png'
        ];
        var enemy2Img = [];
        for (var i = 0; i < enemy2Arr.length; i++) {
            enemy2Img[i] = new Image();
            enemy2Img[i].src = enemy2Arr[i];
        }
        // 大型敌机
        var enemy3Arr = [
            'img/enemy3_n1.png',
            'img/enemy3_n2.png',
            'img/enemy3_hit.png',
            'img/enemy3_down1.png',
            'img/enemy3_down2.png',
            'img/enemy3_down3.png',
            'img/enemy3_down4.png',
            'img/enemy3_down5.png',
            'img/enemy3_down6.png'
        ];
        var enemy3Img = [];
        for (var i = 0; i < enemy3Arr.length; i++) {
            enemy3Img[i] = new Image();
            enemy3Img[i].src = enemy3Arr[i];
        }

        // 小型敌机信息
        var enemy1Param = {
                enemyImg: enemy1Img,
                width: 57,
                height: 51,
                life: 3,
                score: 1
            }
            // 中型敌机信息
        var enemy2Param = {
                enemyImg: enemy2Img,
                width: 69,
                height: 95,
                life: 10,
                score: 3
            }
            // 大型敌机信息
        var enemy3Param = {
            enemyImg: enemy3Img,
            width: 169,
            height: 258,
            life: 20,
            score: 10
        }

        // 构造函数:敌机
        function Enemy(param) {
            this.enemyImg = param.enemyImg;
            this.width = param.width;
            this.height = param.height;
            this.life = param.life;
            this.score = param.score;

            this.x = Math.random() * (canvasParam.width - this.width);
            this.y = -this.height;

            // 图片下标
            this.index = 0;
            // 判断敌机是否发生碰撞
            this.down = false;
            // 是否完成爆炸
            this.bang = false;

            // 绘制敌机
            this.paint = function() {
                ctx.drawImage(this.enemyImg[this.index], this.x, this.y, this.width, this.height);
            }

            // 敌机移动
            this.sport = function() {
                if (!this.down) {
                    // 当前敌机未被碰撞时
                    this.y += 3;
                } else {
                    // 敌机碰后生命值-1
                    this.life--;
                    // 生命值-1后,碰撞变为false
                    this.down = false;
                    // 生命值变为0时,变为敌机爆炸图片
                    if (this.life <= 0) {
                        this.index++;
                        this.down = true;
                        if (this.index === this.enemyImg.length) {
                            this.index = this.enemyImg.length - 1;
                            this.bang = true;
                        }
                    }

                }
            }

            // 判断是否被碰撞
            this.hit = function(obj) {
                return obj.x + obj.width >= this.x && obj.x <= this.x + this.width &&
                    obj.y <= this.y + this.height && obj.y + obj.height >= this.y;
            }
        }

        // 创建一个空数组,存放敌机
        var enemies = [];

        // 随机创建小型、中型、大型敌机
        function pushEnemy() {
            var random = Math.random();
            if (random < 0.65) {
                enemies.push(new Enemy(enemy1Param));
            } else if (random < 0.9) {
                // 中号飞机
                enemies.push(new Enemy(enemy2Param));
            } else {
                // 大号飞机
                enemies.push(new Enemy(enemy3Param));
            }
        }

        // 绘制、运动敌机对象
        function enemyPaint() {
            for (var i = 0; i < enemies.length; i++) {
                enemies[i].paint();
                enemies[i].sport();
            }
        }
        // 绘制暂停时的敌机
        function enemyPaint1() {
            for (var i = 0; i < enemies.length; i++) {
                enemies[i].paint();
            }
        }
        // 删除敌机  和增加分数
        function enemyDelete() {
            for (var i = 0; i < enemies.length; i++) {
                if (enemies[i].bang) {
                    score += enemies[i].score;
                }
                if (enemies[i].y >= canvasParam.height || enemies[i].bang) {
                    enemies.splice(i, 1);
                    // score += enemies[i].score;
                }
            }
        }


        // 如何检测每一个敌机是否被 子弹或我方飞机 碰撞
        function checkHit() {
            for (var i = 0; i < enemies.length; i++) {
                // 子弹和敌机撞击
                for (var j = 0; j < bullets.length; j++) {
                    if (enemies[i].hit(bullets[j])) {
                        enemies[i].down = true;
                        bullets[j].down = true;
                    }
                }
                // 敌机和hero
                if (enemies[i].hit(heroObj)) {
                    enemies[i].down = true;
                    heroObj.down = true;
                }
            }
        }

        // 分数
        function scoreText() {
            ctx.font = '20px bold';
            ctx.fillText('得分: ' + score, 20, 30);
            ctx.fillText('生命值:' + life, 360, 30)
        }

        // 鼠标移出游戏暂停
        canvas.onmouseout = function() {
            if (gameState === running) {
                gameState = pause;
            }
        };
        // 鼠标移入游戏开始
        canvas.onmouseover = function() {
            if (gameState === pause) {
                gameState = running;
            }
        };
        // 游戏暂停界面
        function pausePanit() {
            var pauseImg = new Image()
            pauseImg.src = "img/game_pause_nor.png";
            heroObj.paint();
            // 绘制子弹
            bulletsPaint();
            // 绘制敌机              
            enemyPaint1();
            scoreText();
            ctx.drawImage(pauseImg, 220, 420);
        }
        // 游戏结束
        function gameOverText() {
            ctx.font = '50px bold';
            ctx.fillText('game over', 120, 420);
            ctx.font = '30px bold';
            ctx.fillText('点击重新开始', 160, 520);
        }

        // 点击事件,重新开始游戏
        canvas.addEventListener("click", function(e) {
            if (gameState === gameOver) {
                gameState = ready;
                loadingObj.num = 0;
                loadingObj.index = 0;
                enemies = [];
                bullets = [];
                life = 3;
                score = 0;
                heroObj.down = false;

            }
        });

        // 创建敌机的时间间隔
        var enemyNum = 0;
        // 开启定时器, 绘制图片 
        setInterval(function() {
            bgObj.paint();
            bgObj.sport();

            if (gameState === ready) {
                ctx.drawImage(logoSrc, 0, 0, 480, 852);
                // logoObj.paint();

            } else if (gameState === loading) {
                loadingObj.paint();
                loadingObj.sport();
            } else if (gameState === running) {
                canvas.style.cursor = 'none';
                heroObj.paint();
                heroObj.sport();
                heroObj.newBullet();

                // 绘制子弹
                bulletsPaint();
                bulletsSport();
                // 删除子弹
                bulletsDelete();

                // 绘制敌机
                enemyNum++;
                if (enemyNum % 20 === 0) {
                    pushEnemy();
                }

                enemyPaint();
                checkHit();
                enemyDelete();
                scoreText();
                if (life === 0) {
                    gameState = gameOver;
                }

            } else if (gameState === pause) {
                pausePanit();
            } else if (gameState === gameOver) {
                canvas.style.cursor = 'pointer';
                gameOverText();
                heroObj.paint();
            }

        }, 60)
    </script>
</body>

</html>

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

相关文章

  • 微信浏览器下拉黑边解决方案 wScroollFix

    微信浏览器下拉黑边解决方案 wScroollFix

    这篇文章主要介绍了微信浏览器下拉黑边解决方案 wScroollFix,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • 微信小程序实现watch监听

    微信小程序实现watch监听

    这篇文章主要介绍了微信小程序实现watch监听,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 一文详解JavaScript中this指向的问题

    一文详解JavaScript中this指向的问题

    JavaScript中this指向的问题是面试中常常会问到的,所以本文就来通过一些简单的示例为大家详细讲讲,文中的示例代码讲解详细,需要的可以参考一下
    2023-04-04
  • JavaScript设计模式之工厂模式和构造器模式

    JavaScript设计模式之工厂模式和构造器模式

    这篇文章主要介绍了JavaScript设计模式之工厂模式和构造器模式,本文同时讲解了设计模式的类别如创建型设计模式、结构型设计模式、行为设计模式等内容,需要的朋友可以参考下
    2015-02-02
  • phantomjs导出html到pdf的方法总结

    phantomjs导出html到pdf的方法总结

    这篇文章主要介绍了phantomjs导出html到pdf的方法总结,需要的朋友可以参考下
    2017-10-10
  • 在JavaScript中如何使用宏详解

    在JavaScript中如何使用宏详解

    这篇文章主要给大家介绍了关于在JavaScript中如何使用宏的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • uniapp如何编写含有后端的登录注册页面

    uniapp如何编写含有后端的登录注册页面

    uniapp是一个使用html5标准的,一次开发,可以发布到安卓,ios,小程序的多端框架,非常方便,下面这篇文章主要给大家介绍了关于uniapp如何编写含有后端的登录注册页面的相关资料,需要的朋友可以参考下
    2023-05-05
  • javascript结合CSS实现苹果开关按钮特效

    javascript结合CSS实现苹果开关按钮特效

    这篇文章主要介绍了javascript结合CSS实现苹果开关按钮特效的方法以及全部代码,效果非常不错,兼容性也很好,有需要的小伙伴自己参考下
    2015-04-04
  • JavaScript 判断一个对象{}是否为空对象的简单方法

    JavaScript 判断一个对象{}是否为空对象的简单方法

    下面小编就为大家带来一篇JavaScript 判断一个对象{}是否为空对象的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JS正则表达式验证密码强度

    JS正则表达式验证密码强度

    这篇文章主要为大家详细介绍了JS正则表达式验证密码强度,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03

最新评论