• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JavaScript实现飞机大战游戏

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
浅谈node node-sass sass-loader版本对应问题发布时间:2022-02-05
下一篇:
js实现简单圆盘时钟发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap