手摸手帶你實現 小遊戲<別踩白塊兒 -- 內有遊戲鏈接>

別踩白塊兒

使用（白鷺引擎）Egret編寫的遊戲

遊戲地址

準備工作

• 瞭解白鷺引擎 並安裝編寫工具
• 安裝遊戲引擎

• 安裝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

官方文檔

over

git地址

到這裏，關於遊戲的相關介紹就基本上已經結束了，如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啓發，歡迎 star，對作者也是一種鼓勵。