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>

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

时间: 2021-09-13

JavaScript原生编写《飞机大战坦克》游戏完整实例

先来看看开始的界面图 实现思路: 1.打开页面,背景开始走动: 2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方: 3.当敌人碰到子弹,敌人消失: 4.当敌人和飞机相遇,飞机死亡,结束游戏: html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <link r

js实现飞机大战小游戏

本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 1.html代码 <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <link rel="stylesheet" type="text/

js实现飞机大战游戏

本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 CSS部分的代码: <style> * { margin: 0px; padding: 0px; } canvas{ border: 1px solid #000; display: block; margin: auto; } </style> JavaScript代码: <!-- 先创建一个画布 --> <canvas id="canvas" width=&quo

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

本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 <html> <head> <title> 飞机大战 </title> <style type="text/css"> *{margin:0;padding:0;font-family:"Microsoft yahei"} body{overflow:hidden;;} </style> </head>

用JS实现飞机大战小游戏

本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 小的时候玩的飞机大战感觉还蛮神奇,今天自己就学着做了一个 先制作好要做好的几步以及背景样式 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var start = 0; // 开始阶段 var starting = 1; // 开始的加载阶段 var running =

JS面向对象实现飞机大战

本文实例为大家分享了JS面向对象实现飞机大战的具体代码,供大家参考,具体内容如下 主页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ width: 530px; height: 600px; position: relative; ma

python pygame模块编写飞机大战

本文实例为大家分享了python pygame模块编写飞机大战的具体代码,供大家参考,具体内容如下 该程序没有使用精灵组,而是用列表存储对象来替代精灵组的动画效果.用矩形对象的重叠来判断相撞事件.该程序可以流畅运行,注释较为详细,希望可以帮助大家. import pygame from pygame.locals import * from sys import exit import time import random # 创建子弹类,把子弹的图片转化为图像对象,设定固定的移动速度 clas

pygame实现简易飞机大战

利用pygame实现了简易版飞机大战.源代码如下: # -*- coding:utf-8 -*- import pygame import sys from pygame.locals import * from pygame.font import * import time import random class Hero(object): #玩家 英雄类 def __init__(self, screen_temp): self.x = 210 self.y = 700 self.life

python版飞机大战代码分享

利用pygame实现了简易版飞机大战.源代码如下: # -*- coding:utf-8 -*- import pygame import sys from pygame.locals import * from pygame.font import * import time import random class Hero(object): #玩家 英雄类 def __init__(self, screen_temp): self.x = 210 self.y = 700 self.life

python飞机大战pygame游戏背景设计详解

本文实例讲述了python飞机大战pygame游戏背景设计.分享给大家供大家参考,具体如下: 目标 背景交替滚动的思路确定 显示游戏背景 01. 背景交替滚动的思路确定 运行 备课代码,观察 背景图像的显示效果: 游戏启动后,背景图像 会 连续不断地 向下方 移动 在 视觉上 产生英雄的飞机不断向上方飞行的 错觉 -- 在很多跑酷类游戏中常用的套路 游戏的背景 不断变化 游戏的主角 位置保持不变 1.1 实现思路分析 解决办法 创建两张背景图像精灵 第 1 张 完全和屏幕重合 第 2 张在 屏幕

用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动

目标是拷贝微信的飞机大战,当然拷贝完以后大家就具备自己添加不同内容的能力了. 首先是要拿到一些图片素材,熟悉使用图像处理软件和绘画的人可以自己制作,并没有这项技能的同学只能和我一样从网上下载相应的素材了. 网上可以找到相应的这样的图片,注意,所有的元件图片要是png类型的图片,那样可以有透明的背景,否则会有白色的边框露出来. 找到素材以后我们就要开始搭建我们的飞机大战了. 微信上的飞机大战是由手指控制的,在电脑上,我们就先用鼠标代替了. 按照之前我们在天空上移动云的那个程序,我们可以知道该怎么做

归纳下js面向对象的几种常见写法总结

//定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() 1.工厂方式 var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj; } var c = new Circle(); alert( c.area( 1.0 ) ); 2.比较正规的写法 function Ci