[JS]懐かしい！あのテトリスがWebページに簡単に設置できるスクリプト -Blockrain.js

サイト構築 -JavaScript

Post on:2015年1月20日

sponsorsr

数行のコードをコピペするだけで、テトリスをWebページに簡単に設置できるjQueryのプラグインを紹介します。

テトリスは実際にプレイすることが可能で、スコア機能もついています。しかもレスポンシブ対応！

Blockrain.js
Blockrain.js -GitHub

Blockrain.jsのデモ
Blockrain.jsの使い方

Blockrain.jsのデモ

テトリスは、オートプレイモードとプレイモードの2種類があります。

デモ：AutoPlay

プレイモードは、テトリスを実際にプレイできます。

デモ：Try

操作は、キーボードのz, xで回転、矢印キーで移動です。
左右の矢印をクリックすると、テーマが変わります。
テーマはVim風、ゲームボーイ風、レトロ風など、いろいろ揃っています。

Blockrain.jsの使い方

Step 1: HTML

テトリス用の空divを配置します。

<div class="game" style="width:250px; height:500px;"></div>

Step 2: 外部ファイル

当スクリプトとjquery.jsを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="jquery.js"></script>
  <script src="blockrain.js"></script>
  <script>
    $('.game').blockrain();
  </script>
</head>

スクリプトのオプションでは、オートプレイ、テーマ、ゲームの設定、メッセージなどを変更できます。

{
  autoplay: false, // Let a bot play the game
  autoplayRestart: true, // Restart the game automatically once a bot loses
  showFieldOnStart: true, // Show a bunch of random blocks on the start screen (it looks nice)
  theme: null, // The theme name or a theme object
  blockWidth: 10, // How many blocks wide the field is (The standard is 10 blocks)
  autoBlockWidth: false, // The blockWidth is dinamically calculated based on the autoBlockSize. Disabled blockWidth. Useful for responsive backgrounds
  autoBlockSize: 24, // The max size of a block for autowidth mode
  difficulty: 'normal', // Difficulty (normal|nice|evil).
  speed: 20, // The speed of the game. The higher, the faster the pieces go.

  // Copy
  playText: 'Let\'s play some Tetris',
  playButtonText: 'Play',
  gameOverText: 'Game Over',
  restartButtonText: 'Play Again',
  scoreText: 'Score',

  // Basic Callbacks
  onStart: function(){},
  onRestart: function(){},
  onGameOver: function(score){},

  // When a line is made. Returns the number of lines, score assigned and total score
  onLine: function(lines, scoreIncrement, score){}
}