如何使用Sprite Sheet和JavaScript制作字符生成器

Question

http://www.famitsu.com/freegame/tool/chibi/index1.html

我想構建一個與此完全相同的字符生成器。 有人建議我使用畫布庫，然后進行底層JavaScript編程會很容易。 有人說我不需要畫布，可以使用JavaScript輕松完成。 由於到目前為止我只學習了核心JavaScript，因此我對這個場景真的一無所知。 那么，您能建議我在哪里以及如何開始我的這個項目嗎？ 在進入該項目之前，我應該首先獲得哪些語言要求？

Answer 1

交互式圖形應用程序的組件：

• 畫畫的東西（ 畫布 ）
• 畫些東西（ 圖形 ）
• 循環繪制邏輯（ 動畫循環以及如何限制它 ）
• 游戲/應用程序的功能（ 游戲循環 ）
• 交互性（可以對按鍵 ， 單擊等做出反應的事件偵聽器 ）
• 音效和音樂

這些都是任何交互式圖形應用程序的基本構建塊。

JavaScript是一門優秀的語言（甚至起步時），因為相同的概念在這里和其他地方一樣適用，但是您可以保存代碼，然后在自己喜歡的瀏覽器中運行它！

這是我最近使用JavaScript編寫的一個Tetris示例 ，它在HTML5畫布上繪制了木板。 看起來似乎有些復雜且令人難以理解，但是我已經討論了所有內容（聲音= /除外）。

僅供參考， tick功能是我的主要動畫循環。 它的運行速度與窗口返回動畫幀的速度一樣快，通常這比必要的快。 一旦tick函數被調用一次，它將繼續運行直到明確停止為止。

Tet.prototype.tick = function()
{
  var _self = this; // needed for next step
  // This line is what will make this function run repeatedly
  this.requestId = requestAnimationFrame(function(){_self.tick()});

  // Get some time information
  this.tickNow = Date.now();
  this.tickDelta = this.tickNow - this.tickThen;

  // If it's been long enough, and it's time to draw a frame...
  if (this.tickDelta > this.tickInterval)
  {
    this.tickThen = this.tickNow - (this.tickDelta % this.tickInterval);

    // Run the game loop
    this.doGameLoop();

    // Draw the updated board
    this.renderer.drawBoard(this.data, this.curPiece, this.curPieceGuide);
  }
}

首先，游戲制作會令人生畏，因為在完成腦海中所看到的東西之前，似乎需要理解很多東西，但是如果您一次一次采用這些概念並從小做起，您將很快制作出瘋狂的東西！