飞机大战 分析思路

最新推荐文章于 2023-03-06 13:14:45 发布
最新推荐文章于 2023-03-06 13:14:45 发布
阅读量393 收藏 1
点赞数
文章标签： r语言 c/c++
原文链接：http://www.cnblogs.com/conlover/p/11121433.html
版权

效果图

1.欢迎界面  背景图一直在动

2.游戏阶段

3.结束

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        canvas{
           display: block;
           margin: 0 auto;
           /* border: 1px solid #000; */
        } 
    </style>
</head>
<body>
    <canvas id="canvas" width="480" height="650"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        //初始化阶段
        //将游戏分几个阶段
        const START = 0; //第一阶段 游戏欢迎阶段
        const STARTING = 1; //第二阶段 游戏加载阶段
        const RUNNING = 2; //第三阶段 游戏运行阶段
        const PAUSE = 3; //第四阶段 游戏暂停阶段
        const GAMEOVER = 4; //第五阶段 游戏结束阶段
        //定义一个自己的状态和上面的状态作比较
        var state = START;
        //定义画布的宽和高
        var WIDTH = 480;
        var HEIGHT = 650;
        //定义游戏的分数
        var score = 0;
        //定义我方飞机的生命值
        var life = 3;
        //初始化阶段结束

        //第一阶段 游戏欢迎阶段
        //加载背景图片
        var bg = new Image();
        bg.src = "images/background.png";
        //初始化背景图片的数据
        var BG = {
            imgs : bg,
            width : 480,
            height : 852
        }
        //定义构造函数 
        function Bg(config){
            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(){
                context.drawImage(this.imgs,this.x1,this.y1)
                context.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 abc = new Bg(BG);
        //加载LOGO
        var logo = new Image();
        logo.src = "images/start.png";


        //第二阶段
        //创建图片的构造
        var loadings = [];
        loadings[0] = new Image();
        loadings[0].src = "images/game_loading1.png"
        loadings[1] = new Image();
        loadings[1].src = "images/game_loading2.png"
        loadings[2] = new Image();
        loadings[2].src = "images/game_loading3.png"
        loadings[3] = new Image();
        loadings[3].src = "images/game_loading4.png"
        //初始化图片数据
        var LOADING = {
            imgs:loadings,
            length:loadings.length,
            width:186,
            height:38
        }
        //写构造函数
        function Loadings(config){
            this.imgs = config.imgs;
            this.length = config.length;
            this.width = config.width;
            this.height = config.height;        
            //定义索引
            this.startIndex = 0;
            //定义绘制方法
            this.paint = function(){
                context.drawImage(this.imgs[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 Loadings(LOADING); 
        //鼠标点击事件
        canvas.onclick = function(){
            if(state == START){
                state = STARTING;
            }
        }

        //第三阶段
        //加载我方飞机图片
        var heros = [];
        heros[0] = new Image();
        heros[0].src = "images/hero1.png";
        heros[1] = new Image();
        heros[1].src = "images/hero2.png";
        heros[2] = new Image();
        heros[2].src = "images/hero_blowup_n1.png";
        heros[3] = new Image();
        heros[3].src = "images/hero_blowup_n2.png";
        heros[4] = new Image();
        heros[4].src = "images/hero_blowup_n3.png";
        heros[5] = new Image();
        heros[5].src = "images/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 - 150;
            //定义飞机撞击状态
            this.down = false;
            //定义飞机爆炸状态
            this.candel = false;
            //绘制方法
            this.paint = function(){
                context.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){//判断图片是最后一张的时候
                        life -- ;//我方飞机爆炸完后，生命值减一
                         //判断生命值为0时，游戏结束
                        if(life == 0){
                            state = GAMEOVER;
                             //虽然游戏结束了但是还停留在最后一张图的状态
                            this.startIndex = this.length - 1;
                            //想要开始新的生命时，直接给出创建的新的对象
                        }else{
                            hero = new Hero(HEROS);
                        }
                    }
                }
            }
            //定义射击速度初始值为0
            this.time = 0;
            //射击方法
            this.shoot = function(){
                this.time ++;
                if(this.time % 3 == 0){
                    bullets.push(new Bullet(BULLET));
                }    
            }
            // 定义我方飞机碰撞的方法
            this.bang = function(){
                this.down = true;
            }

        }
        //创建我方飞机
        var hero = new Hero(HEROS);
        //  飞机跟随鼠标移动
        canvas.onmousemove = function(event){
            if(state == RUNNING){//判断当前游戏状态
                var x = event.offsetX;
                var y = event.offsetY;
                // 直接赋值给飞机的x和y坐标
                hero.x = x - hero.width/2;
                hero.y = y - hero.height/2;
            }
        }

        //绘制子弹
        //加载子弹的图片
        var bullet = new Image();
        bullet.src = "images/bullet1.png";
        //初始化子弹数据
        var BULLET = {
            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(){
                context.drawImage(this.imgs,this.x,this.y);
            }
            // 定义运动方法
            this.step = function(){
                this.y -= 10;
            }
            // 加上一个标识，标识子弹是否发生碰撞
            this.candel = false;
            // 撞击的方法，用于修改子弹是否碰撞的属性
            this.bang = function(){
                this.candel = true;
            }
        }
        //增加一个数组用来存储子弹
        var bullets = []
        //绘制数组里所有的子弹
        function bulletsPaint(){
            for(var i = 0;i < bullets.length;i++){
                //调用数组对象中的方法paint（）
                bullets[i].paint()
            }
        }
        //通过遍历调用子弹的运动;
        function bulletsStep(){
            for(var i = 0;i < bullets.length;i++){
                bullets[i].step()
            }
        }
        //当子弹移除画布的时候和发生碰撞以后，要把子弹从数组中删除
        function bulletsDel(){
            for(var i = 0;i < bullets.length;i++){
                if(bullets[i].y < -bullets[i].height || bullets[i].candel){
                    bullets.splice(i,1);
                }
            }
        }
        //绘制我方飞机
        //加载图片
        //小飞机
        var enemy1 = [];
        enemy1[0] = new Image();
        enemy1[0].src = "images/enemy1.png";
        enemy1[1] = new Image();
        enemy1[1].src = "images/enemy1_down1.png";
        enemy1[2] = new Image();
        enemy1[2].src = "images/enemy1_down2.png";
        enemy1[3] = new Image();
        enemy1[3].src = "images/enemy1_down3.png";
        enemy1[4] = new Image();
        enemy1[4].src = "images/enemy1_down4.png";
        // 中飞机
        var enemy2 = [];
        enemy2[0] = new Image();
        enemy2[0].src = "images/enemy2.png";
        enemy2[1] = new Image();
        enemy2[1].src = "images/enemy2_down1.png";
        enemy2[2] = new Image();
        enemy2[2].src = "images/enemy2_down2.png";
        enemy2[3] = new Image();
        enemy2[3].src = "images/enemy2_down3.png";
        enemy2[4] = new Image();
        enemy2[4].src = "images/enemy2_down4.png";
        // 大飞机
        var enemy3 = [];
        enemy3[0] = new Image();
        enemy3[0].src = "images/enemy3_n1.png";
        enemy3[1] = new Image();
        enemy3[1].src = "images/enemy3_n2.png";
        enemy3[2] = new Image();
        enemy3[2].src = "images/enemy3_down1.png";
        enemy3[3] = new Image();
        enemy3[3].src = "images/enemy3_down2.png";
        enemy3[4] = new Image();
        enemy3[4].src = "images/enemy3_down3.png";
        enemy3[5] = new Image();
        enemy3[5].src = "images/enemy3_down4.png";
        enemy3[6] = new Image();
        enemy3[6].src = "images/enemy3_down5.png";
        enemy3[7] = new Image();
        enemy3[7].src = "images/enemy3_down6.png";
        //初始化敌方飞机的数据
        var ENEMY1 = {
            imgs : enemy1,
            length : enemy1.length,
            width : 57,
            height : 51,
            type : 1,    //增加一个类型，判断是哪一种飞机
            frame : 1,
            life : 1,
            score : 1
        }
        var ENEMY2 = {
            imgs : enemy2,
            length : enemy2.length,
            width : 69,
            height : 95,
            type : 2,    //增加一个类型，判断是哪一种飞机
            frame : 1,
            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;
            //定义一个标识
            //没有碰撞为false
            this.down = false;
            //定义是否爆炸完成的属性
            this.candel = false;
            //定义绘制方法
            this.paint = function(){
                context.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 ++;
                }else{
                    this.startIndex++;
                    if(this.startIndex == this.length){
                        this.candel = true;
                        this.startIndex = this.length - 1;
                    }
                }
            }
            //是否被碰撞的方法
            this.checkHit = function(zd){   
                return zd.y + zd.height > this.y
                && zd.x + zd.width > this.x
                && zd.y < this.y + this.height
                && zd.x < this.x + this.width
            }
            //敌方飞机碰撞以后的方法
            this.bang = function(){
                this.life -- ;
                if(this.life == 0){
                    this.down = true;
                    score += this.score;
                }
            }
        }
        // 创建数组，用于存储敌方飞机
        var enemies = [];
        //  数组中去添加飞机
        function pushEnemies(){
            //定义一个变量存放随机数
            var numRand = Math.floor(Math.random() * 100);
            if(numRand < 10){
                 //添加小飞机
                enemies.push(new Enemy(ENEMY1))
            }else if(numRand > 98){
                 //添加中飞机
                enemies.push(new Enemy(ENEMY2))
            }else if(numRand == 50){
                  //添加大飞机
                enemies.push(new Enemy(ENEMY3))
            }
        }
        // 敌方飞机的绘制函数
        function paintEnemies(){
            for(var i = 0;i < enemies.length;i++){
                enemies[i].paint()
            }
        }
        //  敌方飞机的运动函数
        function stepEnemies(){
            for(var i = 0;i < enemies.length;i++){
                enemies[i].step()
            }
        }
        //  敌方飞机的删除函数
        function delEnemies(){
            for(var i = 0;i < enemies.length;i++){
                // 两种情况
                if(enemies[i].y > HEIGHT || enemies[i].candel){
                    enemies.splice(i,1);
                }
            }
        }
        // 检测是否撞击
        function hitEnemies(){
            for(var i = 0;i < enemies.length;i++){
                //   如果我方飞机撞到了敌方飞机以后
                if(enemies[i].checkHit(hero)){
                    // 处理敌方飞机碰撞以后的逻辑
                    enemies[i].bang();
                    // 处理我方飞机碰撞以后的逻辑
                    hero.bang();
                }
                // 子弹如果碰到敌方飞机以后
                for(var j = 0;j < bullets.length;j++){
                    if(enemies[i].checkHit(bullets[j])){
                        enemies[i].bang();
                        bullets[j].bang();
                    }
                }
            }
        } 
        // 文本函数 绘制分数和生命值
        function paintText(){
            context.font = "bold 30px 微软雅黑";
            context.fillText("SCORE:" + score,10,30);
            context.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 = "images/game_pause_nor.png";
        // 第五阶段 游戏GG
        function paintOver(){
            context.font = "bold 50px 微软雅黑";
            context.fillText("GAME OVER!!!",50,250);
        }



        setInterval(function(){
            abc.paint()
            abc.step()
            switch(state){
                case START:
                    context.drawImage(logo,40,0);
                    break;
                case STARTING:
                    loading.paint();
                    loading.step();
                    break;
                case RUNNING:
                    hero.paint();
                    hero.step();
                    hero.shoot();

                    bulletsPaint();
                    bulletsStep();
                    bulletsDel();

                    pushEnemies();
                    paintEnemies();
                    stepEnemies();
                    delEnemies();

                    hitEnemies();

                    paintText();
                    break;

                case PAUSE:
                    hero.paint();

                    bulletsPaint();

                    paintEnemies();

                    paintText();

                    context.drawImage(pause,150,350);
                    break;

                case GAMEOVER:
                    hero.paint();

                    bulletsPaint();

                    paintEnemies();

                    paintText();

                    paintOver()
                    break;

            }
        },10)
    </script>
</body>
</html>

 

转载于:https://www.cnblogs.com/conlover/p/11121433.html

weixin_34127717
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
飞机大战（雷电）思路分析-跟着源码走
weixin_44046895的博客
11-20 311
飞机大战（雷电）思路分析-跟着源码走 飞机大战-雷电 基础版，详细注释，带有学习过程 添加链接描述 - 为了进一步改进飞机大战（雷电），我觉得先分析好原来的做法思路，再进行下一步 不多说，以下： 一、主程序plane_main.py 1、 if __name__ == "__main__": # 创建游戏对象 game = PlaneGame() # 开始游戏 g...
飞机大战的思路
wakaka_cy的博客
06-07 3078
首先要用function createUser()构造函数创建一个飞机的类，然后用new操作符去实例化用户飞机对象，在函数createUser中添加用户飞机运动的方法。用实例化后的飞机对象去调用这个方法。在用户飞机运动到敌机坐标位置范围内时，俩飞机相撞，清除所有计时器，游戏结束。  function User(){ this.height=70; this.widt...
第一节，整理飞机大战的思路
weixin_43074354的博客
04-09 119
第一节，整理飞机大战的思路 创建一个游戏的窗口 导入背景图片 将背景图片显示在窗口中 显示窗口的内容 代码如下： import pygame """ 1. 创建一个游戏的窗口 2. 导入背景图片 3. 将背景图片显示在窗口中 4. 显示窗口的内容 5. 打开窗口，一直显示在屏幕上 """ # 打开窗口，一直显示在屏幕上 while True: # 创建一个窗口，480*700，是窗口的大小 screen = pygame.display.set_mode((480, 700))
Java实现飞机大战(详细思路与过程,含源代码)
热门推荐
guochaoHNU的博客
08-07 2万+
目录演示构思 演示 飞机大战 构思 首先，要把整体的游戏框架和内容构思出来(根据预先构思游戏里存在的组件内容的游戏功能抽象出指定类)。以我的小游戏为例： 1.主界面框架类：GameFrame(extends JFrame)            显示开始界面 2.弹出界面类：Dialog (extends JDialog) &n
飞机大战基本逻辑
weixin_44740534的博客
04-15 702
一、游戏循环外，初始化相关对象 创建屏幕对象 创建背景图片对象 创建游戏角色图片对象 创建时钟对象 二 、游戏循环内，游戏的主逻辑 先修改图片对象的坐标 把当前的图片对象的坐标 保存在一个矩形对象中 通过矩形对象.x可以得到x坐标数据 通过矩形对象.x = n 就可以修改数据 绘制图象 屏幕对象.blit(图片对象， (对应的矩形对象.x， 对应矩形对象.y ))) 屏幕对象.blit(图片对象2...
python 飞机大战等游戏类编程思路
hulongkang的博客
03-06 1011
python入门编程飞机大战游戏
微信经典飞机大战
12-02
《微信经典飞机大战》是一款基于JavaScript（JS）开发的在线游戏，它仿照了微信内置的热门游戏“飞机大战”。这款游戏充分利用了Web技术，为玩家提供了在浏览器上体验射击战斗的乐趣。下面将详细介绍《微信经典飞机...
Matlab源码 飞机大战.zip
04-04
【Matlab源码 飞机大战.zip】这个压缩包文件包含了使用Matlab编程语言编写的飞机大战游戏的完整源代码。Matlab是一款强大的多用途计算环境，通常用于数值分析、算法开发、数据可视化和模型构建。在这个项目中，...
Python学习日记-第二十三天-飞机大战（游戏背景设计思路）
arizia的博客
10-22 1431
这一章节是讲述的飞机大战游戏背景的设计思路细节。
飞机大战python实现思路和源代码
浪子SJ
03-01 2896
链接：飞机大战脑图 源码实现：https://pan.baidu.com/s/1hPv0c02-CB7lP-nqVGvkBQ
JS实现飞机大战
06-28
html+css基本框架得搭建，定时器，方法，对象，基本循环语句实现简单的飞机大战
基于Java的飞机大战的设计与实现
01-30
基于Java的课程设计，飞机大战内有.exe，可以直接拿来用，作为课设。 内有完整的文档和源码，喜欢的小伙伴可以放心下载，记得下载后点个赞哦！！
html5简单的飞机大战源码.zip
04-04
炒鸡好玩的游戏，飞机大战啊，有简单，一般，困难和开挂啊。每个程度飞机的速度就不同，飞机出现的次数也不同。
飞机游戏需求分析
09-17
对飞机游戏的需求分析与实现，主要包含对飞机的控制，发出子弹，实现碰撞等等。
html5飞机大战源码
12-14
html5飞机大战源码
一篇博文：带你用Typescript实现飞机大战，附（详细思路注释），建议收藏！
贪吃ღ大魔王
06-25 826
站点结构：???? 图片素材： 地图：经典原图 飞机图片： 由于图片太多，这里用的是精灵图。为了方便，精灵图的数据存在json中。 json文件： arts.json: 开发思路： 创建地图 发送请求将所有图片信息请求回来 创建自己飞机 发送子弹 创建敌机 处理击中和被击中 环境配置： 这里用的AMD 引入require.js 源码附注释见末尾 ???? 创建地图： ???? background.ts 背景div盒子 让背景图动起来，设置中间放两个图的div 单例的实例对象，地图
飞机大战（下篇：逻辑）
尹忠政的博客
02-20 987
上一篇中，我们已经成功的绘制了背景，用户飞机，敌机，子弹，那么这篇我们将检查碰撞，回收资源1.碰撞 //检查子弹和敌船是否相撞 List<ZiDan> ziDanCop = new ArrayList<>(); for (int i = 0; i <mZiDanList.size() ; i++) { ziDanCop.add(mZiDanL
飞机大战详解
fan1191776538的博客
06-01 1413
整体实现思路 整体实现思路 1.实现循环背景滚动 2.添加玩家飞机 3.玩家飞机发射子弹 4.添加Boss飞机 5.Boss飞机发射子弹 6.飞机被击中血量减少及无敌状态 7.玩家飞机和子弹碰撞，Boss和玩家飞机碰撞 8.子弹击中飞机爆炸效果 9.添加音效 10.添加游戏开始和结束界面...
案例（1）——飞机大战思路和代码实现（Java笔记）
qq_64552181的博客
11-07 1741
关键词：飞机大战、代码实现、思路解释、Java实现 包含内容：代码、思路、详解
python飞机大战的设计思路
最新发布
01-08
Python飞机大战的设计思路如下： 1. 创建飞机类：首先，我们需要创建一个飞机类，可以命名为`HeroPlane`。这个类需要继承`pygame.sprite.Sprite`类，并且在类中定义一个`bullets`属性，用于存储所有的飞机子弹。 2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值