JavaScript编写实现飞机大战

本文实例为大家分享了JavaScript实现飞机大战的具体代码,供大家参考,具体内容如下

一.飞机大战游戏介绍:

游戏中,玩家驾驶飞机,在空中进行战斗。点击并移动自己的飞机,发射炮弹,打掉敌小型飞机、中型飞机和大型飞机,来获得分数和奖励,打掉一架小型飞机赢得3分,打掉一架中型飞机赢得5分,打掉一架大型飞机赢得10分,累加得分。撞到敌飞机命减1,当命数为0时,则游戏结束。

二. 效果图页面展示:

初始界面如图-1所示:

玩家在如图-1所示的界面的任意位置,按下鼠标左键,开始游戏。

图-1

默认分数为0,默认5条命,请看如图-2所示具体介绍:

图-2

在游戏进行过程中,鼠标离开游戏界面,游戏将进入暂停状态,界面效果如图-3所示:

图-3

当鼠标再次移入界面时,游戏将继续进行。

三. 完整代码如下:

画布样式:

<style>
        canvas {
            border: 1px solid #f8c1ab;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
        }
</style>

设置画布,定义初始状态,准备阶段:

// 画布
        var canvas = document.getElementById('canvas')
        var ctx = canvas.getContext('2d');
        // 存储画布宽高
        var width = canvas.width;
        var height = canvas.height;
        var height = 852;
        // 准备初始化
        var ready = 0;
        var loading = 1;
        var running = 2;
        var pause = 3;
        var over = 4;
        var life = 3;
        var score = 0;
        // 定义初始状态
        var state = ready;
 
        // 一. 准备阶段,在画布上以图片的形式画出背景图片
        var bg = new Image();
        bg.src = 'img/background.png';
        // 1. 创建一个对象,用来存储当前图片绘制的等信息
        var bgParam = {
            bg: bg, //对象里的第一个参数为构建的image对象,.src属性存储了图片的信息
            x: 0,
            y: 0,
            width: 480,
            height: 852
        }
        // 2 .创建构造函数,调用函数时绘制这张图,将图片绘制的信息传递给这个函数时,根据传递的信息绘制出图片
        function bgPaint(param) {
            this.bg = param.bg;
            this.x = param.x;
            this.y = param.y;
            this.width = param.width;
            this.height = param.height;
 
            // 两张图片交替绘制,实现滚动效果
            this.y1 = -this.height;
 
            // 绘制图片
            this.draw = function () {
                ctx.drawImage(this.bg, this.x, this.y, this.width, this.height)
                ctx.drawImage(this.bg, this.x, this.y1, this.width, this.height)
            }
            // 让图片不断下移,实现动态滚动效果
            this.scroll = function () {
                this.y += 7;
                this.y1 += 7;
                // 每张图片到达底部后重新回到上面
                if (this.y >= this.height) {
                    this.y = -this.height
                }
                if (this.y1 >= this.height) {
                    this.y1 = -this.height
                }
            }
        }
        // 创建背景图片对象
        var bgObj = new bgPaint(bgParam);

绘制游戏开始前:

 // 二. 绘制游戏开始前logo
var logo = new Image();
        logo.src = 'img/start.png'
        var logoParam = {
            logo: logo,
            x: 0,
            y: 0,
            width: 480,
            height: 852
        }
 
        function logoPaint(param) {
            this.logo = param.logo;
            this.x = param.x;
            this.y = param.y;
            this.width = param.width;
            this.height = param.height;
 
            this.draw = function () {
                ctx.drawImage(this.logo, this.x, this.y, this.width, this.height)
            }
        }
        var logoObj = new logoPaint(logoParam);
 
        // 点击后改变游戏状态
        
        canvas.addEventListener('click',function () {
            if (state == ready) {
                state = loading;
            }else if (state == loading){
                state = pause;
            }else if (state == running){
                state = pause;
            }else if (state == pause){
                if(state != over){
                    state = running;
                    console.log(22);
                }
            }
        })
        canvas.addEventListener('mouseleave',function(){
            if(state == loading){
                state = pause;
            }else if (state == running){
                state = pause;
            }
        })

游戏加载阶段:

// 三. 游戏加载阶段
//  定义数组存放图片的信息
var imgArr = ['img/game_loading1.png', 'img/game_loading2.png', 'img/game_loading3.png',
            'img/game_loading4.png']
        var loadingImg = [];
        for (var i = 0; i < imgArr.length; i++) {
            loadingImg[i] = new Image();
            loadingImg[i].src = imgArr[i]
        }
        var loadingParam = {
            loadingImg: loadingImg, //第一个参数为一个数组,数组里存放了一系列new Image()所new出来的图片对象,图片对象.src为地址
            width: 186,
            height: 38
        }
 
        function loadingPaint(param) {
            this.loadingImg = param.loadingImg;
            this.width = param.width;
            this.height = param.height;
            this.x = 0;
            this.y = height - param.height;
 
            // 定义绘制的下标
            this.index = 0;
            this.times = 0;
            // 绘制图片
            this.draw = function () {
                ctx.drawImage(this.loadingImg[this.index], this.x, this.y, this.width, this.height)
            }
            // 每隔一段时间通过改变下标来改变图片以使图片动起来
            this.sport = function () {
                // 定时器累计一定次数后才改变下一张图片,避免加载图片更换太快
                this.times++;
                if (this.times % 2 == 0) {
                    this.index++;
                    if (this.index == this.loadingImg.length) {
                        // 绘制完加载图片后,改变游戏状态
                        state = running;
 
                    }
                }
            }
        }
        // 在绘制完加载图片后自动更换了游戏运行状态
        var loadingObj = new loadingPaint(loadingParam);

游戏进行阶段:

// 四. 游戏进行阶段
// 绘制我方飞机
var heroArr = ['img/hero1.png', 'img/hero2.png', 'img/hero_blowup_n1.png', 'img/hero_blowup_n2.png',
            'img/hero_blowup_n3.png', 'img/hero_blowup_n4.png'
        ]
        var heroPlane = [];
        for (var i = 0; i < heroArr.length; i++) {
            heroPlane[i] = new Image();
            heroPlane[i].src = heroArr[i]
        }
        // 定义飞机的图像信息
        var heroParam = {
            heroPlane: heroPlane,
            width: 99,
            height: 124,
            life:5
        }
        var flag = true;
        function heroPaint(param) {
            this.heroPlane = param.heroPlane;
            this.width = param.width;
            this.height = param.height;
            this.life = param.life;
            
            flag = false;
            this.x = width / 2 - this.width / 2;
            this.y = height - this.height;
 
            // 存储切换图片的下标
            this.index = 0;
 
            // 判断是否被撞击
            this.down = false;
 
            // 切换频率
            this.times = 0;
 
            // 绘制hero函数
            this.draw = function () {
                ctx.drawImage(this.heroPlane[this.index], this.x, this.y, this.width, this.height)
 
            }
 
            // 判断飞机是否被撞击以及被撞击后的状态改变
            this.sport = function () {
                // 没有被撞击时飞机的状态只会在hero1和hero2之间切换
                if (!this.down) {
                    if (this.index == 0) {
                        this.index = 1;
                    } else {
                        this.index = 0;
                    }
                } else {
                    // 被撞击后状态的改变加上爆炸的样子
                    
                    this.index++;
                    if (this.index == this.heroPlane.length) {
                        // 游戏结束后飞机停留在冒烟状态
                        this.index = this.heroPlane.length - 1;
                        heroParam.life--;
                        if (heroParam.life <= 0) {
                            state = over;
                            
                        } else {
                            // 还有生命值时重新开始游戏
                            heroObj = new heroPaint(heroParam)
                        }
                    }
                }
            }
 
            this.shoot = function () {
                this.times++;
                if (this.times % 2 === 0) {
                    // 飞机在就源源不断地补充子弹
                    bullets.push(new Bullet(bulletParam));
                }
            }
 
        }
 
        var heroObj = new heroPaint(heroParam);
 
        // 让飞机跟着鼠标动
        canvas.onmousemove = function (e) {
            if(state === pause){
                state = running;
            }
            if (state === running) {
                // 获取鼠标移动后的位置
                heroObj.x = e.offsetX - heroObj.width / 2;
                heroObj.y = e.offsetY - heroObj.height / 2;
            }
        }

设置子弹和敌机状态:

// 子弹
var bullet = new Image();
bullet.src = 'img/bullet1.png';
        var bulletParam = {
            bullet: bullet,
            width: 9,
            height: 21
        }
        function Bullet(param) {
            this.bullet = param.bullet;
            this.width = param.width;
            this.height = param.height;
            this.x = heroObj.x + heroObj.width / 2 - this.width / 2;
            this.y = heroObj.y - this.height - 10;
 
            // 判断是否被撞击的标志
            this.down = false;
            this.draw = function () {
                ctx.drawImage(this.bullet, this.x, this.y, this.width, this.height);
            }
 
            // 运动
            this.sport = function () {
                this.y -= 25;
            }
        }
        var bullets = [];
 
 
        // 绘制子弹
        function bulletsPaint() {
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].draw();
            }
        }
 
        function bulletsSport() {
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].sport();
            }
        }
 
        // 删除子弹
        // 1. 子弹飞出屏幕外面
        // 2. 子弹敌机碰撞了
        function bulletsDelete() {
            for (var i = 0; i < bullets.length; i++) {
                if (bullets[i].y < -bullets[i].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 enemy1Plane = [];
        for (var i = 0; i < enemy1Arr.length; i++) {
            enemy1Plane[i] = new Image();
            enemy1Plane[i].src = enemy1Arr[i];
        }
 
        // 小号飞机信息
        var enemy1 = {
            enemyPlane: enemy1Plane,
            width: 57,
            height: 51,
            life: 3
        }
        // 敌方中号飞机
        var enemy2Arr = ['img/enemy2.png', 'img/enemy2_down1.png', 'img/enemy2_down2.png', 'img/enemy2_down3.png',
            'img/enemy2_down4.png'
        ];
        var enemy2Plane = [];
        for (var i = 0; i < enemy2Arr.length; i++) {
            enemy2Plane[i] = new Image();
            enemy2Plane[i].src = enemy2Arr[i];
        }
 
        // 中号飞机信息
        var enemy2 = {
            enemyPlane: enemy2Plane,
            width: 69,
            height: 95,
            life: 5
        }
        // 敌方大号飞机
        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 enemy3Plane = [];
        for (var i = 0; i < enemy3Arr.length; i++) {
            enemy3Plane[i] = new Image();
            enemy3Plane[i].src = enemy3Arr[i];
        }
 
        // 大号飞机信息
        var enemy3 = {
            enemyPlane: enemy3Plane,
            width: 169,
            height: 258,
            life: 10
        }
 
 
        // 敌机的构造函数
        function Enemy(param) {
            this.enemyPlane = param.enemyPlane;
            this.width = param.width;
            this.height = param.height;
            this.life = param.life;
 
            this.x = Math.random() * (width - this.width);
            this.y = -this.height;
 
            this.index = 0;
            // 判断敌机是否发生碰撞
            this.down = false;
            // 是否爆照完成
            this.bang = false;
 
            this.paint = function () {
                ctx.drawImage(this.enemyPlane[this.index], this.x, this.y, this.width, this.height);
            }
 
            this.sport = function () {
                if (!this.down) {
                    // 当前敌机未被碰撞时
                    this.y += 5;
                } else {
                    this.index++;
                    if (this.index === this.enemyPlane.length) {
                        this.index = this.enemyPlane.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 = [];
        var times = 0
 
        function pushEnemy() {
            times++;
            if (times % 10 == 0) {
                var random = Math.random();
                if (random < 0.5) {
                    enemies.push(new Enemy(enemy1));
                } else if (random < 0.8) {
                    // 中号飞机
                    enemies.push(new Enemy(enemy2));
                } else {
                    // 大号飞机
                    enemies.push(new Enemy(enemy3));
                }
            }
 
        }
        // 绘制、运动飞机对象
        function enemyPaint() {
            for (var i = 0; i < enemies.length; i++) {
                enemies[i].paint();
            }
        }
        function enemySport() {
            for (var i = 0; i < enemies.length; i++) {
                enemies[i].sport();
            }
        }
 
        function enemyDelete() {
            for (var i = 0; i < enemies.length; i++) {
                if (enemies[i].y >= height || enemies[i].bang) {
                    enemies.splice(i, 1);
                }
            }
        }
 
        // 如何检测每一个敌机是否被(每一个子弹 hero)碰撞
        function checkHit() {
            for (var i = 0; i < enemies.length; i++) {
                // 子弹和敌机撞击
                for (var j = 0; j < bullets.length; j++) {
                    if (enemies[i].hit(bullets[j])) {
                        bullets[j].down = true;
                        enemies[i].life--;
                        if (enemies[i].life == 0) {
                            enemies[i].down = true;
                            if(enemies[i].width == 169){
                                score += 10;
                            }else if(enemies[i].width == 69){
                                score += 5;
                            }else{
                                score += 3;
                            }
                            
                        }
                    }
 
                }
                // 敌机和hero
                if (enemies[i].hit(heroObj)) {
                    enemies[i].life -= heroObj.life;
                    heroObj.down = true;
                    if(enemies[i].life <= 0){
                        enemies[i].down = true;
                        if(enemies[i].width == 169){
                            score += 10;
                        }else if(enemies[i].width == 69){
                            score += 5;
                        }else{
                            score += 3;
                        }
                    }
                    
                    
                }
            }
        }

设置游戏暂停和生命值、分数:

// 游戏暂停画面信息
var pauseImg = new Image();
        pauseImg.src = 'img/game_pause_nor.png';
       
 
        function gameoverfn() {
            ctx.font = "50px bold"
            ctx.fillText("GAME OVER !!!", 80, 300);
            ctx.fillText("ONCE MORE !!!", 80, 400);
        };
 
        // 分数和生命值
        var score = 0;
        // 绘制分数和生命值
        function scoreText() {
            ctx.font = "30px bold"
            ctx.strokeText(`Score:${score}`, 10, 30)
            ctx.fillText("life:" + heroParam.life, 300, 30);
        };
 
 
        // 在定时器中绘制每一帧的图像
        var timer = setInterval(function () {
            // 调用背景图片绘制函数绘制
            bgObj.draw()
            bgObj.scroll()
 
            // 判断游戏状态,state为ready时绘制logo图形
            switch (state) {
                case ready:
                    logoObj.draw();
                    break;
                case loading:
                    loadingObj.draw();
                    loadingObj.sport();
                    break;
                case running:
                    heroObj.draw();
                    heroObj.sport();
                    heroObj.shoot();
 
                    // 绘制子弹
                    bulletsPaint();
                    bulletsSport();
                    bulletsDelete();
 
                    // 绘制敌机
                    pushEnemy();
                    enemyPaint();
                    enemySport();
 
                    checkHit();
                    enemyDelete();
                    scoreText();
                    
                    break;
                case pause:
                    ctx.drawImage(pauseImg, 210, 376, 60, 45);
                    heroObj.draw();0
                    heroObj.shoot();
 
                    // 绘制子弹
                    bulletsPaint();
                    bulletsDelete();
 
                    // 绘制敌机
                    enemyPaint();
                    scoreText()
                    break;
                case over:
                    heroObj.draw();
                    gameoverfn();
                    scoreText();
                    break;
            }
 
        }, 60)

整体代码:

<!DOCTYPE html>
<html lang="en">
 
<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 {
            border: 1px solid #f8c1ab;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
 
<body>
    <canvas id="canvas" width="480" height="852"></canvas>
    <script>
         // 画布
        var canvas = document.getElementById('canvas')
        var ctx = canvas.getContext('2d');
        // 存储画布宽高
        var width = canvas.width;
        var height = canvas.height;
        var height = 852;
        // 准备初始化
        var ready = 0;
        var loading = 1;
        var running = 2;
        var pause = 3;
        var over = 4;
        var life = 3;
        var score = 0;
        // 定义初始状态
        var state = ready;
 
        // 一. 准备阶段,在画布上以图片的形式画出背景图片
        var bg = new Image();
        bg.src = 'img/background.png';
        // 1. 创建一个对象,用来存储当前图片绘制的等信息
        var bgParam = {
            bg: bg, //对象里的第一个参数为构建的image对象,.src属性存储了图片的信息
            x: 0,
            y: 0,
            width: 480,
            height: 852
        }
        // 2 .创建构造函数,调用函数时绘制这张图,将图片绘制的信息传递给这个函数时,根据传递的信息绘制出图片
        function bgPaint(param) {
            this.bg = param.bg;
            this.x = param.x;
            this.y = param.y;
            this.width = param.width;
            this.height = param.height;
 
            // 两张图片交替绘制,实现滚动效果
            this.y1 = -this.height;
 
            // 绘制图片
            this.draw = function () {
                ctx.drawImage(this.bg, this.x, this.y, this.width, this.height)
                ctx.drawImage(this.bg, this.x, this.y1, this.width, this.height)
            }
            // 让图片不断下移,实现动态滚动效果
            this.scroll = function () {
                this.y += 7;
                this.y1 += 7;
                // 每张图片到达底部后重新回到上面
                if (this.y >= this.height) {
                    this.y = -this.height
                }
                if (this.y1 >= this.height) {
                    this.y1 = -this.height
                }
            }
        }
        // 创建背景图片对象
        var bgObj = new bgPaint(bgParam);
 
        // 二. 绘制游戏开始前logo
        var logo = new Image();
        logo.src = 'img/start.png'
        var logoParam = {
            logo: logo,
            x: 0,
            y: 0,
            width: 480,
            height: 852
        }
 
        function logoPaint(param) {
            this.logo = param.logo;
            this.x = param.x;
            this.y = param.y;
            this.width = param.width;
            this.height = param.height;
 
            this.draw = function () {
                ctx.drawImage(this.logo, this.x, this.y, this.width, this.height)
            }
        }
        var logoObj = new logoPaint(logoParam);
 
        // 点击后改变游戏状态
        
        canvas.addEventListener('click',function () {
            if (state == ready) {
                state = loading;
            }else if (state == loading){
                state = pause;
            }else if (state == running){
                state = pause;
            }else if (state == pause){
                if(state != over){
                    state = running;
                    console.log(22);
                }
            }
        })
        canvas.addEventListener('mouseleave',function(){
            if(state == loading){
                state = pause;
            }else if (state == running){
                state = pause;
            }
        })
 
        //  三. 游戏加载阶段
        //  定义数组存放图片的信息
        var imgArr = ['img/game_loading1.png', 'img/game_loading2.png', 'img/game_loading3.png',
            'img/game_loading4.png']
        var loadingImg = [];
        for (var i = 0; i < imgArr.length; i++) {
            loadingImg[i] = new Image();
            loadingImg[i].src = imgArr[i]
        }
        var loadingParam = {
            loadingImg: loadingImg, //第一个参数为一个数组,数组里存放了一系列new Image()所new出来的图片对象,图片对象.src为地址
            width: 186,
            height: 38
        }
 
        function loadingPaint(param) {
            this.loadingImg = param.loadingImg;
            this.width = param.width;
            this.height = param.height;
            this.x = 0;
            this.y = height - param.height;
 
            // 定义绘制的下标
            this.index = 0;
            this.times = 0;
            // 绘制图片
            this.draw = function () {
                ctx.drawImage(this.loadingImg[this.index], this.x, this.y, this.width, this.height)
            }
            // 每隔一段时间通过改变下标来改变图片以使图片动起来
            this.sport = function () {
                // 定时器累计一定次数后才改变下一张图片,避免加载图片更换太快
                this.times++;
                if (this.times % 2 == 0) {
                    this.index++;
                    if (this.index == this.loadingImg.length) {
                        // 绘制完加载图片后,改变游戏状态
                        state = running;
 
                    }
                }
            }
        }
        // 在绘制完加载图片后自动更换了游戏运行状态
        var loadingObj = new loadingPaint(loadingParam);
 
        // 四. 游戏进行阶段
        // 绘制我方飞机
        var heroArr = ['img/hero1.png', 'img/hero2.png', 'img/hero_blowup_n1.png', 'img/hero_blowup_n2.png',
            'img/hero_blowup_n3.png', 'img/hero_blowup_n4.png'
        ]
        var heroPlane = [];
        for (var i = 0; i < heroArr.length; i++) {
            heroPlane[i] = new Image();
            heroPlane[i].src = heroArr[i]
        }
        // 定义飞机的图像信息
        var heroParam = {
            heroPlane: heroPlane,
            width: 99,
            height: 124,
            life:5
        }
        var flag = true;
        function heroPaint(param) {
            this.heroPlane = param.heroPlane;
            this.width = param.width;
            this.height = param.height;
            this.life = param.life;
            
            flag = false;
            this.x = width / 2 - this.width / 2;
            this.y = height - this.height;
 
            // 存储切换图片的下标
            this.index = 0;
 
            // 判断是否被撞击
            this.down = false;
 
            // 切换频率
            this.times = 0;
 
            // 绘制hero函数
            this.draw = function () {
                ctx.drawImage(this.heroPlane[this.index], this.x, this.y, this.width, this.height)
 
            }
 
            // 判断飞机是否被撞击以及被撞击后的状态改变
            this.sport = function () {
                // 没有被撞击时飞机的状态只会在hero1和hero2之间切换
                if (!this.down) {
                    if (this.index == 0) {
                        this.index = 1;
                    } else {
                        this.index = 0;
                    }
                } else {
                    // 被撞击后状态的改变加上爆炸的样子
                    
                    this.index++;
                    if (this.index == this.heroPlane.length) {
                        // 游戏结束后飞机停留在冒烟状态
                        this.index = this.heroPlane.length - 1;
                        heroParam.life--;
                        if (heroParam.life <= 0) {
                            state = over;
                            
                        } else {
                            // 还有生命值时重新开始游戏
                            heroObj = new heroPaint(heroParam)
                        }
                    }
                }
            }
 
            this.shoot = function () {
                this.times++;
                if (this.times % 2 === 0) {
                    // 飞机在就源源不断地补充子弹
                    bullets.push(new Bullet(bulletParam));
                }
            }
 
        }
 
        var heroObj = new heroPaint(heroParam);
 
        // 让飞机跟着鼠标动
        canvas.onmousemove = function (e) {
            if(state === pause){
                state = running;
            }
            if (state === running) {
                // 获取鼠标移动后的位置
                heroObj.x = e.offsetX - heroObj.width / 2;
                heroObj.y = e.offsetY - heroObj.height / 2;
            }
        }
 
        // 子弹
        var bullet = new Image();
        bullet.src = 'img/bullet1.png';
        var bulletParam = {
            bullet: bullet,
            width: 9,
            height: 21
        }
        function Bullet(param) {
            this.bullet = param.bullet;
            this.width = param.width;
            this.height = param.height;
            this.x = heroObj.x + heroObj.width / 2 - this.width / 2;
            this.y = heroObj.y - this.height - 10;
 
            // 判断是否被撞击的标志
            this.down = false;
            this.draw = function () {
                ctx.drawImage(this.bullet, this.x, this.y, this.width, this.height);
            }
 
            // 运动
            this.sport = function () {
                this.y -= 25;
            }
        }
        var bullets = [];
 
 
        // 绘制子弹
        function bulletsPaint() {
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].draw();
            }
        }
 
        function bulletsSport() {
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].sport();
            }
        }
 
        // 删除子弹
        // 1. 子弹飞出屏幕外面
        // 2. 子弹敌机碰撞了
        function bulletsDelete() {
            for (var i = 0; i < bullets.length; i++) {
                if (bullets[i].y < -bullets[i].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 enemy1Plane = [];
        for (var i = 0; i < enemy1Arr.length; i++) {
            enemy1Plane[i] = new Image();
            enemy1Plane[i].src = enemy1Arr[i];
        }
 
        // 小号飞机信息
        var enemy1 = {
            enemyPlane: enemy1Plane,
            width: 57,
            height: 51,
            life: 3
        }
        // 敌方中号飞机
        var enemy2Arr = ['img/enemy2.png', 'img/enemy2_down1.png', 'img/enemy2_down2.png', 'img/enemy2_down3.png',
            'img/enemy2_down4.png'
        ];
        var enemy2Plane = [];
        for (var i = 0; i < enemy2Arr.length; i++) {
            enemy2Plane[i] = new Image();
            enemy2Plane[i].src = enemy2Arr[i];
        }
 
        // 中号飞机信息
        var enemy2 = {
            enemyPlane: enemy2Plane,
            width: 69,
            height: 95,
            life: 5
        }
        // 敌方大号飞机
        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 enemy3Plane = [];
        for (var i = 0; i < enemy3Arr.length; i++) {
            enemy3Plane[i] = new Image();
            enemy3Plane[i].src = enemy3Arr[i];
        }
 
        // 大号飞机信息
        var enemy3 = {
            enemyPlane: enemy3Plane,
            width: 169,
            height: 258,
            life: 10
        }
 
 
        // 敌机的构造函数
        function Enemy(param) {
            this.enemyPlane = param.enemyPlane;
            this.width = param.width;
            this.height = param.height;
            this.life = param.life;
 
            this.x = Math.random() * (width - this.width);
            this.y = -this.height;
 
            this.index = 0;
            // 判断敌机是否发生碰撞
            this.down = false;
            // 是否爆照完成
            this.bang = false;
 
            this.paint = function () {
                ctx.drawImage(this.enemyPlane[this.index], this.x, this.y, this.width, this.height);
            }
 
            this.sport = function () {
                if (!this.down) {
                    // 当前敌机未被碰撞时
                    this.y += 5;
                } else {
                    this.index++;
                    if (this.index === this.enemyPlane.length) {
                        this.index = this.enemyPlane.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 = [];
        var times = 0
 
        function pushEnemy() {
            times++;
            if (times % 10 == 0) {
                var random = Math.random();
                if (random < 0.5) {
                    enemies.push(new Enemy(enemy1));
                } else if (random < 0.8) {
                    // 中号飞机
                    enemies.push(new Enemy(enemy2));
                } else {
                    // 大号飞机
                    enemies.push(new Enemy(enemy3));
                }
            }
 
        }
        // 绘制、运动飞机对象
        function enemyPaint() {
            for (var i = 0; i < enemies.length; i++) {
                enemies[i].paint();
            }
        }
        function enemySport() {
            for (var i = 0; i < enemies.length; i++) {
                enemies[i].sport();
            }
        }
 
        function enemyDelete() {
            for (var i = 0; i < enemies.length; i++) {
                if (enemies[i].y >= height || enemies[i].bang) {
                    enemies.splice(i, 1);
                }
            }
        }
 
        // 如何检测每一个敌机是否被(每一个子弹 hero)碰撞
        function checkHit() {
            for (var i = 0; i < enemies.length; i++) {
                // 子弹和敌机撞击
                for (var j = 0; j < bullets.length; j++) {
                    if (enemies[i].hit(bullets[j])) {
                        bullets[j].down = true;
                        enemies[i].life--;
                        if (enemies[i].life == 0) {
                            enemies[i].down = true;
                            if(enemies[i].width == 169){
                                score += 10;
                            }else if(enemies[i].width == 69){
                                score += 5;
                            }else{
                                score += 3;
                            }
                            
                        }
                    }
 
                }
                // 敌机和hero
                if (enemies[i].hit(heroObj)) {
                    enemies[i].life -= heroObj.life;
                    heroObj.down = true;
                    if(enemies[i].life <= 0){
                        enemies[i].down = true;
                        if(enemies[i].width == 169){
                            score += 10;
                        }else if(enemies[i].width == 69){
                            score += 5;
                        }else{
                            score += 3;
                        }
                    }
                    
                    
                }
            }
        }
 
        // 游戏暂停画面信息
        var pauseImg = new Image();
        pauseImg.src = 'img/game_pause_nor.png';
       
 
        function gameoverfn() {
            ctx.font = "50px bold"
            ctx.fillText("GAME OVER !!!", 80, 300);
            ctx.fillText("ONCE MORE !!!", 80, 400);
        };
 
        // 分数和生命值
        var score = 0;
        // 绘制分数和生命值
        function scoreText() {
            ctx.font = "30px bold"
            ctx.strokeText(`Score:${score}`, 10, 30)
            ctx.fillText("life:" + heroParam.life, 300, 30);
        };
 
 
        // 在定时器中绘制每一帧的图像
        var timer = setInterval(function () {
            // 调用背景图片绘制函数绘制
            bgObj.draw()
            bgObj.scroll()
 
            // 判断游戏状态,state为ready时绘制logo图形
            switch (state) {
                case ready:
                    logoObj.draw();
                    break;
                case loading:
                    loadingObj.draw();
                    loadingObj.sport();
                    break;
                case running:
                    heroObj.draw();
                    heroObj.sport();
                    heroObj.shoot();
 
                    // 绘制子弹
                    bulletsPaint();
                    bulletsSport();
                    bulletsDelete();
 
                    // 绘制敌机
                    pushEnemy();
                    enemyPaint();
                    enemySport();
 
                    checkHit();
                    enemyDelete();
                    scoreText();
                    
                    break;
                case pause:
                    ctx.drawImage(pauseImg, 210, 376, 60, 45);
                    heroObj.draw();0
                    heroObj.shoot();
 
                    // 绘制子弹
                    bulletsPaint();
                    bulletsDelete();
 
                    // 绘制敌机
                    enemyPaint();
                    scoreText()
                    break;
                case over:
                    heroObj.draw();
                    gameoverfn();
                    scoreText();
                    break;
            }
 
        }, 60)
    </script>
 
</body>
 
</html>

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

(0)

相关推荐

  • 原生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实现飞机大战游戏的具体代码,供大家参考,具体内容如下 1.html代码 <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <link rel="stylesheet" type="text/

  • javascript实现简单飞机大战小游戏

    本文实例为大家分享了javascript实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 效果图 html文件 <!DOCTYPE html><html lang='zh'><head>    <meta charset='UTF-8'>    <title>mm</title>    <link rel="stylesheet" href="./css/index.css">

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

  • JavaScript实现微信飞机大战游戏

    本文实例为大家分享了JavaScript实现微信飞机大战游戏的具体代码,供大家参考,具体内容如下 html代码 <!DOCTYPE> <html> <head>     <title>微信经典飞机大战 </title>     <meta http-equiv="content" content="text/html" charset="utf-8"/>     <li

  • JavaScript实现简易飞机大战

    本文实例为大家分享了JavaScript实现简易飞机大战的具体代码,供大家参考,具体内容如下 话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale

  • javascript实现飞机大战小游戏

    本文实例为大家分享了javascript实现飞机大战游戏的具体代码,供大家参考,具体内容如下 文档结构如下 其中tool文件中只使用了随机数,audio中是存放的音乐文件,images中是己方和敌方飞机的图片. HTML部分 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X

  • JavaScript实现飞机大战游戏

    本文实例为大家分享了canvas ,js 实现一个简单的飞机大战,供大家参考,具体内容如下 预览图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

  • 用JS实现飞机大战小游戏

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

随机推荐