成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Chrome 小恐龍游戲源碼探究四 -- 隨機(jī)繪制云朵

svtter / 758人閱讀

摘要：文章首發(fā)于我的博客前言上一篇文章小恐龍游戲源碼探究三進(jìn)入街機(jī)模式實(shí)現(xiàn)了開(kāi)場(chǎng)動(dòng)畫(huà)和街機(jī)模式。

文章首發(fā)于我的 GitHub 博客
前言

上一篇文章：《Chrome 小恐龍游戲源碼探究三 -- 進(jìn)入街機(jī)模式》 實(shí)現(xiàn)了開(kāi)場(chǎng)動(dòng)畫(huà)和街機(jī)模式。這一篇文章中，將實(shí)現(xiàn)云朵的隨機(jī)繪制。

云朵類 Cloud

定義云朵類 Cloud：

/**
 * 云朵類
 * @param {HTMLCanvasElement} canvas 畫(huà)布
 * @param {Object} spritePos 圖片在雪碧圖中的位置信息
 * @param {Number} containerWidth 容器的寬度
 */
function Cloud(canvas, spritePos, containerWidth) {
  this.canvas = canvas;
  this.ctx = canvas.getContext("2d");
  this.spritePos = spritePos;
  this.containerWidth = containerWidth;

  // 坐標(biāo)
  this.xPos = containerWidth;
  this.yPos = 0;

  // 該云朵是否需要?jiǎng)h除
  this.remove = false;
  // 隨機(jī)云朵之間的間隙
  this.cloudGap = getRandomNum(Cloud.config.MIN_CLOUD_GAP,
    Cloud.config.MAX_CLOUD_GAP);

  this.init();
}

相關(guān)的配置參數(shù)：

Cloud.config = {
  WIDTH: 46,
  HEIGHT: 14,
  MIN_CLOUD_GAP: 100,   // 云之間的最小間隙
  MAX_CLOUD_GAP: 400,   // 云之間的最大間隙
  MIN_SKY_LEVEL: 71,    // 云的最小高度
  MAX_SKY_LEVEL: 30,    // 云的最大高度
  BG_CLOUD_SPEED: 0.2,  // 云的速度
  CLOUD_FREQUENCY: 0.5, // 云的頻率
  MAX_CLOUDS: 6         // 云的最大數(shù)量
};

補(bǔ)充本篇文章中會(huì)用到的數(shù)據(jù)：

Runner.spriteDefinition = {
  LDPI: {
    // ...

+   CLOUD: {x: 86, y: 2},
  },
};

繪制和更新云朵的方法定義如下：

Cloud.prototype = {
  // 初始化云朵
  init: function () {
    this.yPos = getRandomNum(Cloud.config.MAX_SKY_LEVEL,
      Cloud.config.MIN_SKY_LEVEL);
    this.draw();
  },
  // 繪制云朵
  draw: function () {
    this.ctx.save();

    var sourceWidth = Cloud.config.WIDTH;
    var sourceHeight = Cloud.config.HEIGHT;
    var outputWidth = sourceWidth;
    var outputHeight = sourceHeight;

    this.ctx.drawImage(
      Runner.imageSprite,
      this.spritePos.x, this.spritePos.y,
      sourceWidth, sourceHeight,
      this.xPos, this.yPos,
      outputWidth, outputHeight
    );
    
    this.ctx.restore();
  },
  // 更新云朵
  update: function (speed) {
    if (!this.remove) {
      this.xPos -= speed;
      this.draw();

      // 云朵移出 canvas，將其刪除
      if (!this.isVisible()) {
        this.remove = true;
      }
    }
  },
  // 云朵是否移出 canvas
  isVisible: function () {
    return this.xPos + Cloud.config.WIDTH > 0;
  },
};

/**
 * 獲取 [min, max] 之間的隨機(jī)數(shù)
 * @param {Number} min 最小值
 * @param {Number} max 最大值
 * @return {Number}
 */
function getRandomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

然后需要通過(guò) Horizon 類調(diào)用 Cloud 類。首先在 Horizon 類中添加與云朵相關(guān)的屬性：

- function Horizon(canvas, spritePos) {
+ function Horizon(canvas, spritePos, dimensions) {
    this.canvas = canvas;
    this.ctx = this.canvas.getContext("2d");
    this.spritePos = spritePos;

+   this.dimensions = dimensions;

+   // 云的頻率
+   this.cloudFrequency = Cloud.config.CLOUD_FREQUENCY;

+   // 云
+   this.clouds = [];
+   this.cloudSpeed = Cloud.config.BG_CLOUD_SPEED;
    
    // 地面
    this.horizonLine = null;

    this.init();
  }

修改在 Runner 中調(diào)用 Horizon 類時(shí)傳入的參數(shù)：

Runner.prototype = {
  init: function () {
    // ...

+   // 加載背景類 Horizon
-   this.horizon = new Horizon(this.canvas, this.spriteDef);
+   this.horizon = new Horizon(this.canvas, this.spriteDef,
+     this.dimensions);

    // ...
  },
};

添加生成云朵的方法，將生成的云朵存入數(shù)組 clouds：

Horizon.prototype = {
  // 添加新的云朵
  addCloud: function () {
    this.clouds.push(new Cloud(this.canvas, this.spritePos.CLOUD,
      this.dimensions.WIDTH));
  },
};

調(diào)用 addCloud 方法來(lái)初始化云朵：

Horizon.prototype = {
  init: function () {
+   this.addCloud();
    this.horizonLine = new HorizonLine(this.canvas, this.spritePos.HORIZON);
  },
};

添加更新云朵的方法：

Horizon.prototype = {
  // 更新 canvas 上的云朵
  updateCloud: function (deltaTime, speed) {
    var cloudSpeed = Math.ceil(deltaTime * this.cloudSpeed * speed / 1000);
    var numClouds = this.clouds.length;

    if (numClouds) {
      for (var i = numClouds - 1; i >= 0; i--) {
        this.clouds[i].update(cloudSpeed);
      }

      var lastCloud = this.clouds[numClouds - 1];

      // 檢查是否需要添加新的云朵
      // 添加云朵的條件：云朵數(shù)量少于最大數(shù)量、
      // 最后一個(gè)云朵后面的空間大于它的間隙、
      // 云朵出現(xiàn)頻率符合要求
      if (numClouds < Cloud.config.MAX_CLOUDS &&
        (this.dimensions.WIDTH - lastCloud.xPos) > lastCloud.cloudGap &&
        this.cloudFrequency > Math.random()) {
        this.addCloud();
      }

      // 刪除 remove 屬性為 true 的云朵
      this.clouds = this.clouds.filter(function (item) {
        return !item.remove;
      });
    } else {
      this.addCloud();
    }
  },
};

調(diào)用 updateCloud 方法，來(lái)實(shí)現(xiàn)對(duì)云朵的更新：

Horizon.prototype = {
  update: function (deltaTime, currentSpeed) {
    this.horizonLine.update(deltaTime, currentSpeed);
+   this.updateCloud(deltaTime, currentSpeed);
  },
};

運(yùn)行效果如下：

查看添加或修改的代碼：戳這里

Demo 體驗(yàn)地址：https://liuyib.github.io/blog/demo/game/google-dino/add-cloud/

上一篇 下一篇
Chrome 小恐龍游戲源碼探究三 -- 進(jìn)入街機(jī)模式 Chrome 小恐龍游戲源碼探究五 -- 隨機(jī)繪制障礙

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103882.html

相關(guān)文章

  • Chrome 小恐龍游戲源碼探究一 -- 繪制靜態(tài)地面

    摘要：首先是繪制靜態(tài)的地面。上一篇下一篇無(wú)小恐龍游戲源碼探究二讓地面動(dòng)起來(lái) 文章首發(fā)于我的 GitHub 博客 目錄 Chrome 小恐龍游戲源碼探究一 -- 繪制靜態(tài)地面 Chrome 小恐龍游戲源碼探究二 -- 讓地面動(dòng)起來(lái) Chrome 小恐龍游戲源碼探究三 -- 進(jìn)入街機(jī)模式 Chrome 小恐龍游戲源碼探究四 -- 隨機(jī)繪制云朵 Chrome 小恐龍游戲源碼探究五 -- 隨機(jī)繪...

    lixiang 評(píng)論0 收藏0

  • Chrome 小恐龍游戲源碼探究五 -- 隨機(jī)繪制障礙

    摘要：文章首發(fā)于我的博客前言上一篇文章小恐龍游戲源碼探究四隨機(jī)繪制云朵實(shí)現(xiàn)了云朵的隨機(jī)繪制，這一篇文章中將實(shí)現(xiàn)仙人掌翼龍障礙物的繪制游戲速度的改變障礙物的類型有兩種仙人掌和翼龍。 文章首發(fā)于我的 GitHub 博客 前言 上一篇文章：《Chrome 小恐龍游戲源碼探究四 -- 隨機(jī)繪制云朵》 實(shí)現(xiàn)了云朵的隨機(jī)繪制，這一篇文章中將實(shí)現(xiàn)：1、仙人掌、翼龍障礙物的繪制 2、游戲速度的改變 障礙物...

    tomorrowwu 評(píng)論0 收藏0

  • Chrome 小恐龍游戲源碼探究三 -- 進(jìn)入街機(jī)模式

    摘要：文章首發(fā)于我的博客前言上一篇文章小恐龍游戲源碼探究二讓地面動(dòng)起來(lái)實(shí)現(xiàn)了地面的移動(dòng)。街機(jī)模式的效果就是游戲開(kāi)始后，進(jìn)入全屏模式。例如可以看到，進(jìn)入街機(jī)模式之前，有一段開(kāi)場(chǎng)動(dòng)畫(huà)。 文章首發(fā)于我的 GitHub 博客 前言 上一篇文章：《Chrome 小恐龍游戲源碼探究二 -- 讓地面動(dòng)起來(lái)》 實(shí)現(xiàn)了地面的移動(dòng)。這一篇文章中，將實(shí)現(xiàn)效果：1、瀏覽器失焦時(shí)游戲暫停，聚焦游戲繼續(xù)。 2、開(kāi)場(chǎng)動(dòng)...

    yeooo 評(píng)論0 收藏0

  • Chrome 小恐龍游戲源碼探究六 -- 記錄游戲分?jǐn)?shù)

    摘要：文章首發(fā)于我的博客前言上一篇文章小恐龍游戲源碼探究五隨機(jī)繪制障礙實(shí)現(xiàn)了障礙物仙人掌和翼龍的繪制。在游戲中，小恐龍移動(dòng)的距離就是游戲的分?jǐn)?shù)。 文章首發(fā)于我的 GitHub 博客 前言 上一篇文章：《Chrome 小恐龍游戲源碼探究五 -- 隨機(jī)繪制障礙》 實(shí)現(xiàn)了障礙物仙人掌和翼龍的繪制。這一篇將實(shí)現(xiàn)當(dāng)前分?jǐn)?shù)、最高分?jǐn)?shù)的記錄和繪制。 在游戲中，小恐龍移動(dòng)的距離就是游戲的分?jǐn)?shù)。分?jǐn)?shù)每達(dá) 1...

    Jingbin_ 評(píng)論0 收藏0

  • Chrome 小恐龍游戲源碼探究八 -- 奔跑的小恐龍

    摘要：例如，將函數(shù)修改為小恐龍眨眼這樣小恐龍會(huì)不停的眨眼睛。小恐龍的開(kāi)場(chǎng)動(dòng)畫(huà)下面來(lái)實(shí)現(xiàn)小恐龍對(duì)鍵盤(pán)按鍵的響應(yīng)。接下來(lái)還需要更新動(dòng)畫(huà)幀才能實(shí)現(xiàn)小恐龍的奔跑動(dòng)畫(huà)。 文章首發(fā)于我的 GitHub 博客 前言 上一篇文章：《Chrome 小恐龍游戲源碼探究七 -- 晝夜模式交替》實(shí)現(xiàn)了游戲晝夜模式的交替，這一篇文章中，將實(shí)現(xiàn)：1、小恐龍的繪制 2、鍵盤(pán)對(duì)小恐龍的控制 3、頁(yè)面失焦后，重新聚焦會(huì)重置...

    paulquei 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<