手摸手带你实现 小游戏<别踩白块儿 -- 内有游戏链接>

栏目: 后端 · 发布时间: 6年前

内容简介:创建项目可以选择不同版本的引擎,创建成功之后还可以查看API,对发布进行设置。 目录结构如下)
手摸手带你实现 小游戏<别踩白块儿 -- 内有游戏链接>

游戏地址

准备工作

  • 了解白鹭引擎 并安装编写工具
  • 安装游戏引擎
手摸手带你实现 小游戏<别踩白块儿 -- 内有游戏链接>
  • 安装Egret Wing3
手摸手带你实现 小游戏<别踩白块儿 -- 内有游戏链接>
  • 创建项目

创建项目可以选择不同版本的引擎,创建成功之后还可以查看API,对发布进行设置。 目录结构如下

手摸手带你实现 小游戏<别踩白块儿 -- 内有游戏链接>
代码主要存放在src文件下(白鹭引擎支持代码为 typescript

代码编写

先说一下整体的思路: 就是将整个游戏细分一下,一个小格子为一个模块,然后每一列为一个大的模块,游戏整体作为一个大的模块,定时器作为一个模块,开始游戏和结束游戏分别作为一个模块。如图:

手摸手带你实现 小游戏<别踩白块儿 -- 内有游戏链接>
  • 废话少说 开撸开撸

  • egret提供server服务 egret startserver -a -a 表示对文件进行监控自动更新

BoxGraphics

// 负责初始化小格子
  private init() {
      this.touchEnabled = true;
      this.width = GameData.getBoxWidth();
      this.height = GameData.getBoxHeight();
      this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.click, this);
  }
  /**
   * drawBox
   * 绘制内容
   */
  public drawBox(canTouch:boolean=false) {
      this._canTouch = canTouch;
      this.graphics.clear();
      if(canTouch) {
          this.graphics.beginFill(0);
      } else {
          this.graphics.beginFill(0xffffff);
      }
      this.graphics.lineStyle(1, 0);
      this.graphics.drawRect(0,0,GameData.getBoxWidth(),GameData.getBoxHeight());
      this.graphics.endFill();
  }
  /**
   * click
   * 当前方块被点击后的响应事件
   */
  private click(evt:egret.TouchEvent):void {
      this.graphics.clear();
      if(this._canTouch) {
          this.graphics.beginFill(0xcccccc);
      } else {
          this.graphics.beginFill(0xff0000);
      }
      this.graphics.lineStyle(1, 0);
      this.graphics.drawRect(0,0,GameData.getBoxWidth(),GameData.getBoxHeight());
      this.graphics.endFill();

      var event:GameEvent;

      //不能点击,抛出错误事件
      if(!this._canTouch) {
          event = new GameEvent(GameEvent.GAME_OVER);
      } else {
          event = new GameEvent(GameEvent.GAME_HIT);
      }
      this.dispatchEvent(event);
  }

复制代码

GroupRect

  • 一行格子
private init():void {
      this._boxs = [];
      // 生成一行中的每一个格子 并给每个格子添加对应事件
      for(var i:number=0;i<GameData.column;i++) {
          var box:BoxGraphics = new BoxGraphics();
          this._boxs.push(box);
          box.addEventListener(GameEvent.GAME_HIT, this.clickRight, this);
          box.addEventListener(GameEvent.GAME_OVER, this.boxGameOver, this);
          this.addChild(box);
          box.x = GameData.getBoxWidth()*i;
      }
  }
复制代码

GameView

  • 游戏主界面
private init():void {
      this._boxGroups = [];
      var len:number = GameData.row+1;

      // 循环生成每一列格子
      for(var i:number=0;i<len;i++) {
          var boxg:GroupRect = new GroupRect();
          this._boxGroups.push(boxg);
          this.addChild(boxg);
          boxg.addEventListener(GameEvent.GAME_OVER, this.gameOver, this);
          boxg.addEventListener(GameEvent.GAME_HIT, this.clickRight, this);
      }
      /*
      this.scoreText = new egret.TextField();
      this.scoreText.textColor = 0xff0000;
      this.scoreText.bold = true;
      this.scoreText.size = 100;
      */

      // 设置 分数
      this.scoreText = new egret.BitmapText();

      this.scoreText.x = 180;
      this.scoreText.y = 50;
      this.scoreText.text = String(0);
      this.addChild(this.scoreText);
  }
复制代码
  • 点击游戏移动函数
public move() {
        var len:number = GameData.row+1;
        for(var i:number=0;i<len;i++) {

            // 游戏加速
            this._boxGroups[i].y += GameData.speed;

            //移动到舞台外侧了
            if(this._boxGroups[i].y>=GameData.getStageHeight()){
                // 如果格子没有被点击 游戏结束
                if(!this._boxGroups[i].isHit) {
                    this.gameOver();
                    return;
                }

                // 设置对应格子的位置
                if(i==0) {
                    this._boxGroups[i].y = this._boxGroups[4].y - GameData.getBoxHeight();
                } else {
                    this._boxGroups[i].y = this._boxGroups[i-1].y - GameData.getBoxHeight();
                }
                this._boxGroups[i].create();
            }
        }
    }
复制代码

Main

  • 入口文件
/**
     * 初始化游戏函数
     * 初始化gameview
     * 初始化定时器
     * 初始化开始|结束 画布
     * 添加事件监听
     */
    private init():void {
        this.gameview = new GameView();
        this.addChild(this.gameview);
        this.gameview.addEventListener(GameEvent.GAME_OVER, this.gameover,this);
        this.timer = new egret.Timer(20,0);
        this.timer.addEventListener(egret.TimerEvent.TIMER, this.timers, this);

        this.gameoverPanel = new GameOverPanel();
        this.gameoverPanel.addEventListener(GameEvent.GAME_START,this.startgame,this);

        this.startgamePanel = new StartGamePanel();
        this.startgamePanel.addEventListener(GameEvent.GAME_START, this.startgame, this);
        this.addChild(this.startgamePanel);
    }

    //定义事件
    /**
     * 游戏结束
     */
    private gameover(evt:GameEvent):void {
        this.timer.stop();
        this.gameoverPanel.update();
        this.addChild(this.gameoverPanel);
    }

    /**
     * 开始游戏
     * 重新设置游戏速度 分数
     * 去除游戏开始|结束画布
     */
    private startgame(evt:GameEvent):void {
        GameData.speed = 10;
        GameData.setScore(0);
        this.gameview.startgame();
        if(this.startgamePanel.parent) {
            this.removeChild(this.startgamePanel);
        }
        if(this.gameoverPanel.parent) {
            this.removeChild(this.gameoverPanel);
        }
        this.timer.start();
    }

复制代码

发布

egret publish

官方文档


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

构建之法(第三版)

构建之法(第三版)

邹欣 / 人民邮电出版社 / 2017-6 / 69.00元

软件工程牵涉的范围很广, 同时也是一般院校的同学反映比较空洞乏味的课程。 但是,软件工程 的技术对于投身 IT 产业的学生来说是非常重要的。作者有在世界一流软件企业 20 年的一线软件开 发经验,他在数所高校进行了多年的软件工程教学实践,总结出了在 16 周的时间内让同学们通过 “做 中学 (Learning By Doing)” 掌握实用的软件工程技术的教学计划,并得到高校师生的积极反馈。在此 ......一起来看看 《构建之法(第三版)》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具