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

栏目: 后端 · 发布时间: 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

官方文档


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

查看所有标签

猜你喜欢:

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

浪潮之巅

浪潮之巅

吴军 / 电子工业出版社 / 2011-8 / 55.00元

近一百多年来,总有一些公司很幸运地、有意识或无意识地站在技术革命的浪尖之上。在这十几年间,它们代表着科技的浪潮,直到下一波浪潮的来临。 从一百年前算起,AT&T 公司、IBM 公司、苹果公司、英特尔公司、微软公司、思科公司、雅虎公司和Google公司都先后被幸运地推到了浪尖。虽然,它们来自不同的领域,中间有些已经衰落或正在衰落,但是它们都极度辉煌过。本书系统地介绍了这些公司成功的本质原因及科......一起来看看 《浪潮之巅》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具