您的位置:首页 > 编程学习 > > 正文

js简单小游戏代码(用JS实现飞机大战小游戏)

更多 时间:2022-01-15 01:02:36 类别:编程学习 浏览量:1178

js简单小游戏代码

用JS实现飞机大战小游戏

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

小的时候玩的飞机大战感觉还蛮神奇,今天自己就学着做了一个

先制作好要做好的几步以及背景样式

  • var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                var start = 0; // 开始阶段
                var starting = 1; // 开始的加载阶段
                var running = 2; // 游戏阶段
                var pause = 3; // 暂停阶段
                var gameover = 4; // 结束阶段
                var state = start; // 目前状态
                var width = canvas.width; // 获取画布的宽度
                var height = canvas.height; // 获取画布的高度
                var score = 0; // 分数
                var life = 3; // 我放飞机生命值
                var bg = new Image(); // 创建背景图片
                bg.src = "img/background.png";
                var BG = {
                    imgs: bg,
                    width: 480,
                    height: 852,
                };
                // 创建生成背景图片的构造函数
                function Bg(config) { // 参数为BG对象
                    this.imgs = config.imgs;
                    this.width = config.width;
                    this.height = config.height;
                    // 定义两张背景图片,用于动画
                    this.x1 = 0;
                    this.y1 = 0;
                    this.x2 = 0;
                    //第二张背景图的初始高度放在背景高度(固定)的上面
                    this.y2 = -this.height;
                    // 背景图片绘制方法
                    this.paint = function() {
                        //分别绘制了两张背景图
                        ctx.drawImage(this.imgs, this.x1, this.y1);
                        ctx.drawImage(this.imgs, this.x2, this.y2);
                    };
                    // 背景图片运动的方法
                    this.step = function() {
                        //背景图片位置向下移动一个,然后利用定时器让背景图动起来
                        this.y1++;
                        this.y2++;
                        //判断图片高度的临界点,
                        if (this.y1 == this.height) {
                            this.y1 = -this.height;
                        }
                        if (this.y2 == this.height) {
                            this.y2 = -this.height;
                        }
                    }
                };
                // 创建背景图片对象
                var sky = new Bg(BG);
                // 生成游戏名文字
                var logo = new Image();
                logo.src = "img/start.png";
                // 游戏加载过程的4张图片存入一个数组中
                var loadings = [];
                loadings[0] = new Image();
                loadings[0].src = "img/game_loading1.png";
                loadings[1] = new Image();
                loadings[1].src = "img/game_loading2.png";
                loadings[2] = new Image();
                loadings[2].src = "img/game_loading3.png";
                loadings[3] = new Image();
                loadings[3].src = "img/game_loading4.png";
                var LOADING = {
                    imges: loadings,
                    length: loadings.length,
                    width: 186,
                    height: 38,
                };
                // 构造函数
                function Loading(config) {
                    this.imges = config.imges;
                    this.length = config.length;
                    this.width = config.width;
                    this.height = config.height;
                    this.startIndex = 0; // 用于判断需要显示的图片是哪个
                    // 绘制方法
                    this.paint = function() {
                        ctx.drawImage(this.imges[this.startIndex], 0, height - this.height)
                    };
                    this.time = 0; // 加载时图片切换速度
                    // 图片切换方法
                    this.step = function() {
                        this.time++;
                        if (this.time % 4 === 0) {
                            this.startIndex++;
                        }
                        if (this.startIndex === this.length) {
                            // 加载阶段结束,进入游戏阶段
                            state = running;
                        }
                    }
                };
      // 创建加载阶段的对象
    var loading = new Loading(LOADING);
    
  • 在制作我方飞机

  •  // 我方飞机
                var heros = [];
                heros[0] = new Image();
                heros[0].src = "img/hero1.png";
                heros[1] = new Image();
                heros[1].src = "img/hero2.png";
                heros[2] = new Image();
                heros[2].src = "img/hero_blowup_n1.png";
                heros[3] = new Image();
                heros[3].src = "img/hero_blowup_n2.png";
                heros[4] = new Image();
                heros[4].src = "img/hero_blowup_n3.png";
                heros[5] = new Image();
                heros[5].src = "img/hero_blowup_n4.png";
                var HEROS = {
                    imgs: heros,
                    length: heros.length,
                    width: 99,
                    height: 124,
                    frame: 2
                };
                // 我方飞机的构造函数
                function Hero(config) {
                    this.imgs = config.imgs;
                    this.length = config.length;
                    this.width = config.width;
                    this.height = config.height;
                    this.frame = config.frame;
                    this.startIndex = 0; // 用于判断我方飞机当前状态
                    // 定义我方飞机的位置
                    this.x = width / 2 - this.width / 2;
                    this.y = height - this.height;
                    // 定义飞机撞击的标志,表示飞机没有被撞击
                    this.down = false;
                    // 定义飞机是否爆破完成,表示飞机还没有完全爆炸
                    this.candel = false;
                    // 绘制方法
                    this.paint = function() {
                        ctx.drawImage(this.imgs[this.startIndex], this.x, this.y)
                    };
                    // 我方飞机运动方法
                    this.step = function() {
                        if (!this.down) { // 飞机正常状态
                            if (this.startIndex === 0) {
                                this.startIndex = 1;
                            } else {
                                this.startIndex = 0
                            }
                        } else { // 爆炸状态
                            this.startIndex++;
                            if (this.startIndex === this.length) { // 判断是否炸完了
                                // 炸完了,命-1
                                life--;
                                if (life === 0) { // 判断是否挂了
                                    state = gameover;
                                    this.startIndex = this.length - 1;
                                } else { // 重新开始新生命
                                    hero = new Hero(HEROS)
                                }
                            }
                        }
                    };
                    // 我方飞机碰撞
                    this.bang = function() {
                        this.down = true;
                    };
    
  • 绘制子弹状态

  • var bullet = new Image();
                bullet.src = "img/bullet1.png";
                // 初始化
                var BULLETS = {
                    imgs: bullet,
                    width: 9,
                    height: 21,
                };
                // 创建子弹的构造函数
                function Bullet(config) {
                    this.imgs = config.imgs;
                    this.width = config.width;
                    this.height = config.height;
                    // 子弹坐标
                    this.x = hero.x + hero.width / 2 - this.width / 2;
                    this.y = hero.y - this.height;
                    // 绘制方法
                    this.paint = function() {
                        ctx.drawImage(this.imgs, this.x, this.y)
                    };
                    // 运动方法
                    this.step = function() {
                        this.y -= 10;
                    };
                    this.candel = false; // 用于判断子弹是否碰撞
                    // 子弹碰撞方法
                    this.bang = function() {
                        this.candel = true;
                    }
                };
                // 所有new的子弹对象放到一个数组
                var bullets = [];
                // 遍历绘制子弹
                function bulletdPaint() {
                    for (var i = 0; i < bullets.length; i++) {
                        bullets[i].paint();
                    }
                };
                // 遍历调用子弹的运动;
                function bulletdStep() {
                    for (var i = 0; i < bullets.length; i++) {
                        bullets[i].step();
                    }
                };
                // 子弹的删除函数
                function bulletDel() {
                    // 碰撞的时候删除子弹
                    // 超出画布的高度,即负的子弹的高度
                    for (var i = 0; i < bullets.length; i++) {
                        if (bullets[i].candel || bullets[i].y < -bullets[i].height) {
                            bullets.splice(i, 1)
                        }
                    }
                };
    
  • 子弹跟随飞机的移动而移动

  •  // 子弹发射
                    this.time = 0; // 设计速度初始为0
                    this.shoot = function() {
                        this.time++;
                        if (this.time % 2 === 0) { // 每2步移动射击一次
                            bullets.push(new Bullet(BULLETS))
                        }
                    };
                };
                // 创建我方飞机的对象实例
                var hero = new Hero(HEROS);
                // 鼠标移动事件
                canvas.onmousemove = function(event) {
                    // console.log("onmousemove");
                    var event = event || window.event;
                    if (state == running) { //判断当前游戏状态
                        //把获取到的页面中的鼠标横坐标的值赋给飞机的横坐标(位置)
                        hero.x = event.offsetX - hero.width / 2;
                        //把获取到的页面中的鼠标纵坐标的值赋给飞机的纵坐标(位置)
                        hero.y = event.offsetY - hero.height / 2;
                    }
                };
    
  • 绘制敌方飞机

  • // 敌方飞机的绘制
                var enemy1 = []; //小飞机
                enemy1[0] = new Image();
                enemy1[0].src = "img/enemy1.png";
                enemy1[1] = new Image();
                enemy1[1].src = 'img/enemy1_down1.png';
                enemy1[2] = new Image();
                enemy1[2].src = 'img/enemy1_down2.png';
                enemy1[3] = new Image();
                enemy1[3].src = 'img/enemy1_down3.png';
                enemy1[4] = new Image();
                enemy1[4].src = 'img/enemy1_down4.png';
                var enemy2 = []; //中飞机
                enemy2[0] = new Image();
                enemy2[0].src = "img/enemy2.png";
                enemy2[1] = new Image();
                enemy2[1].src = "img/enemy2_down1.png";
                enemy2[2] = new Image();
                enemy2[2].src = "img/enemy2_down2.png";
                enemy2[3] = new Image();
                enemy2[3].src = "img/enemy2_down3.png";
                enemy2[4] = new Image();
                enemy2[4].src = "img/enemy2_down4.png";
                var enemy3 = []; //大飞机
                enemy3[0] = new Image();
                enemy3[0].src = "img/enemy3_n1.png";
                enemy3[1] = new Image();
                enemy3[1].src = "img/enemy3_n2.png";
                enemy3[2] = new Image();
                enemy3[2].src = "img/enemy3_down1.png";
                enemy3[3] = new Image();
                enemy3[3].src = "img/enemy3_down2.png";
                enemy3[4] = new Image();
                enemy3[4].src = "img/enemy3_down3.png";
                enemy3[5] = new Image();
                enemy3[5].src = "img/enemy3_down4.png";
                enemy3[6] = new Image();
                enemy3[6].src = "img/enemy3_down5.png";
                enemy3[7] = new Image();
                enemy3[7].src = "img/enemy3_down6.png";
                // 初始化数据
                var ENEMY1 = {
                    imgs: enemy1,
                    length: enemy1.length,
                    width: 57,
                    height: 51,
                    type: 1,
                    frame: 2,
                    life: 1,
                    score: 1,
                };
                var ENEMY2 = {
                    imgs: enemy2,
                    length: enemy2.length,
                    width: 69,
                    height: 95,
                    type: 2,
                    frame: 2,
                    life: 5,
                    score: 5,
                };
                var ENEMY3 = {
                    imgs: enemy3,
                    length: enemy3.length,
                    width: 165,
                    height: 261,
                    type: 3,
                    frame: 2,
                    life: 15,
                    score: 20,
                };
                // 敌方飞机的构造函数
                function Enemy(config) {
                    this.imgs = config.imgs;
                    this.length = config.length;
                    this.width = config.width;
                    this.height = config.height;
                    this.type = config.type;
                    this.frame = config.frame;
                    this.life = config.life;
                    this.score = config.score;
                    // 敌方飞机的坐标
                    this.x = Math.random() * (width - this.width);
                    this.y = -this.height;
                    this.startIndex = 0; // 用于判断的下标
                    this.down = false; // 用于判断是否碰撞
                    this.candel = false; // 用于判断是否爆炸完成
                    //绘制方法
                    this.paint = function() {
                        ctx.drawImage(this.imgs[this.startIndex], this.x, this.y);
                    };
                    //运动方法
                    this.step = function() {
                        if (!this.down) { // 敌方飞机处于正常状态
                            // 小飞机,中飞机的下标始终都是0
                            // 大飞机的下标是在0和1之间进行切换
                            this.startIndex++;
                            this.startIndex = this.startIndex % this.frame;
                            // 飞机向下的动画
                            this.y += 2;
                        } else { //飞机发生碰撞以后
                            this.startIndex++;
                            if (this.startIndex == this.length) {
                                this.candel = true;
                                this.startIndex = this.length - 1;
                            }
                        }
                    };
                    // 判断是否被碰撞
                    this.checkHit = function(wo) { //判断四个边
                        return wo.y + wo.height > this.y &&
                            wo.x + wo.width > this.x &&
                            wo.y < this.y + this.height &&
                            wo.x < this.x + this.width;
                    };
                    //敌方飞机碰撞后
                    this.bang = function() {
                        this.life--;
                        if (this.life === 0) {
                            this.down = true;
                            score += this.score;
                        }
                    }
                };
                // 数组存放敌方飞机
                var enemise = [];
                // 往敌方飞机数组中添加数据
                function enterEnemise() {
                    var rand = Math.floor(Math.random() * 100)
                    if (rand < 10) {
                        // 添加小飞机
                        enemise.push(new Enemy(ENEMY1));
                    } else if (rand < 55 && rand > 50) {
                        // 添加中飞机
                        enemise.push(new Enemy(ENEMY2));
                    } else if (rand === 88) {
                        // 添加大飞机
                        if (enemise[0].type !== 3 && enemise.length > 0) {
                            enemise.splice(0, 0, new Enemy(ENEMY3));
                        }
                    }
                };
                // 绘制敌方飞机函数
                function enemyPaint() {
                    for (var i = 0; i < enemise.length; i++) {
                        enemise[i].paint();
                    }
                };
                // 敌方飞机的运动函数
                function enemyStep() {
                    for (var i = 0; i < enemise.length; i++) {
                        enemise[i].step();
                    }
                };
                // 删除敌方飞机函数
                function delenemy() {
                    for (var i = 0; i < enemise.length; i++) {
                        // console.log(enemise[i].candel)
                        if (enemise[i].y > height || enemise[i].candel) {
                            enemise.splice(i, 1)
                        }
                    }
                };
                // 碰撞以后的函数
                function hitEnemise() {
                    for (var i = 0; i < enemise.length; i++) {
                        // 如果我放飞机撞到了敌方飞机以后
                        if (enemise[i].checkHit(hero)) {
                            // 敌方飞机碰撞后,碰撞状态改变
                            enemise[i].bang();
                            // 我方飞机碰撞后,碰撞状态改变
                            hero.bang();
                        };
                        // 子弹碰到敌方飞机
                        for (var j = 0; j < bullets.length; j++) {
                            if (enemise[i].checkHit(bullets[j])) {
                                enemise[i].bang();
                                // 子弹的碰撞后,碰撞状态改变
                                bullets[j].bang();
                            }
                        }
                    }
                };
    
  • 最后的收尾阶段

  •  // 绘制分数和生命值
                function scoreText() {
                    ctx.font = "30px bold"
                    ctx.fillText("score:" + score, 10, 30);
                    ctx.fillText("life:" + life, 300, 30);
                };
                // 游戏暂停的阶段
                canvas.onmouseout = function() {
                    if (state === running) {
                        state = pause;
                    }
                };
                // 调用画布的鼠标移入事件
                canvas.onmouseover = function() {
                    if (state === pause) {
                        state = running;
                    }
                };
                // 暂停图片
                var pause = new Image()
                pause.src = "img/game_pause_nor.png";
                // 游戏结束
                function gameoverfn() {
                    ctx.font = "50px bold"
                    ctx.fillText("GAME OVER !!!", 80, 300);
                    ctx.fillText("ONCE MORE !!!", 80, 400);
                };
                // 画布点击事件
                canvas.addEventListener("click", function(e) {
                    p = getEventPosition(e);
                    // 点击画布时,判断游戏是否开始
                    if (state === start) {
                        state = starting;
                    }
                    console.log(123);
                    // 重新开始游戏有问题???
                    if (state === gameover) {
                        if (p.y >= 350 && p.y < 450) {
                            console.log('你点击了ONCE MORE !!!');
                            state = running;
                        }
                    }
                });
    
                function getEventPosition(e) {
                    var x, y;
                    if (e.layerX || ev.layerX === 0) {
                        x = e.layerX;
                        y = e.layerY;
                    } else if (e.offsetX || ev.offsetX === 0) {
                        x = e.offsetX;
                        y = e.offsetY;
                    }
                    return {
                        x: x,
                        y: y
                    };
                };
    
  • 后面就是基本的每个阶段的调用问题叻

  • setInterval(function() {
                    //背景图片无论在哪个状态都有背景图片以及它的动态效果
                    sky.paint(); // 绘制背景
                    sky.step(); // 背景动画
                    if (state === start) { // 第一阶段
                        ctx.drawImage(logo, 35, 0)
                    } else if (state === starting) { // 第二阶段
                        loading.paint(); // 绘制背景
                        loading.step(); // 背景动画
                    } else if (state === running) { // 第三状态
                        // 绘制我放飞机
                        hero.paint();
                        // 我方飞机的运动
                        hero.step();
                        // 我方飞机的射击方法
                        hero.shoot();
                        // 子弹的绘制
                        bulletdPaint();
                        // 子弹的运动
                        bulletdStep();
                        // 子弹的删除
                        bulletDel();
                        // 创建敌方飞机
                        enterEnemise();
                        // 绘制敌方飞机
                        enemyPaint();
                        // 绘制敌方飞机的运动
                        enemyStep();
                        // 删除敌方飞机
                        delenemy();
                        // 判断是否撞击
                        hitEnemise();
                        // 绘制分数和生命值
                        scoreText()
                    } else if (state === pause) { // 第四状态
                        sky.paint(); // 绘制背景
                        sky.step(); // 背景动画
                        // 绘制我放飞机
                        hero.paint();
                        // 子弹的绘制
                        bulletdPaint();
                        // 绘制敌方飞机
                        enemyPaint();
                        // 绘制分数和生命值
                        scoreText();
                        ctx.drawImage(pause, 220, 300)
                    } else if (state === gameover) { // 第五状态
                        sky.paint(); // 绘制背景
                        sky.step(); // 背景动画
                        hero.paint();
                        // 子弹的绘制
                        bulletdPaint();
                        // 绘制敌方飞机
                        enemyPaint();
                        // 绘制分数和生命值
                        scoreText();
                        // 游戏结束
                        gameoverfn();
                    }
                }, 10)
            })()
    
  • 这个也就是飞机大战的全部源码了,仅供参考。

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

    标签:js 飞机大战
    您可能感兴趣