2015/02/03

Webページでテトリス風ゲームが出来る!!『Blockrain.js』の紹介

Webページでテトリス風ゲームが出来る!!『Blockrain.js』の紹介

Webページ上でテトリス風の落ち物ゲームがプレイできるようになるプラグイン『Blockrain.js』の使い方を紹介します.

目次

入手方法

https://github.com/Aerolab/blockrain.jsにアクセスし,右側のDownload ZIPをクリックしてファイルをダウンロードします.

ダウンロードしたファイルを解凍し,以下のようにCSSファイルとプラグインのJavaSctiptファイルをjQuery本体とともに読み込みます.

//CSSとscriptファイルの読み込み
<link rel="stylesheet" src="blockrain.css">
<script src="jquery.js"></script>
<script src="blockrain.js"></script>
<script>
    $('.game').blockrain();
</script>

設置方法

ファイルの読み込みが出来たら,表示に使用する要素をサイズを指定して配置します.

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

次に,JavaScriptで実行します.

$('.game').blockrain();

実行にあたって,以下の例のように様々なオプションを指定することが出来ます

//テーマの指定
{
  background: '#000000', // 背景色
  backgroundGrid: '#101010', // 背景グリッドの色
  primary: null, // 落ちてくるブロック色
  secondary: null, // 落下後のブロック色
  stroke: null, // ブロックの境界色
  innerStroke: null, // A small border inside the blocks to give some texture.

  // ブロック形状別の色
  blocks: {
    line:     '#fa1e1e',
    square:   '#f1fa1e',
    arrow:    '#d838cb',
    rightHook:'#f5821f',
    leftHook: '#42c6f0',
    rightZag: '#4bd838',
    leftZag:  '#fa1e1e'
  }
}

//オプション
{
  autoplay: false, // オートスタート
  autoplayRestart: true, // ゲームのリスタート
  showFieldOnStart: true, // スタート時にランダムのブロックを表示
  theme: null, // カラーテーマの選択
  blockWidth: 10, // フィールドの横幅がブロック何個分か
  autoBlockWidth: false, // レスポンシブ時に自動的に横幅を設定
  autoBlockSize: 24, // 自動設定の場合の横幅の最大値
  difficulty: 'normal', // 難易度 (normal|nice|evil).
  speed: 20, // ゲームスピード

  // ゲーム内に表示するテキスト
  playText: 'Let\'s play some Tetris',
  playButtonText: 'Play',
  gameOverText: 'Game Over',
  restartButtonText: 'Play Again',
  scoreText: 'Score',

  // コールバック関数
  onStart: function(){},
  onRestart: function(){},
  onGameOver: function(score){},

  onLine: function(lines, scoreIncrement, score){}
}

また,各種メソッドも用意されています.

// ゲームスタート
$game.blockrain('start');

// ゲームリスタート
$game.blockrain('restart');

// ゲームオーバー
$game.blockrain('gameover');         

// 一時停止
$game.blockrain('pause');

// 履歴
$game.blockrain('resume');

// オートプレイ
$game.blockrain('autoplay', true);              

// コントロール (true|false)
$game.blockrain('controls', true);             

// テーマの指定
$game.blockrain('theme', 'vim');

// テーマの詳細な設定
$game.blockrain('theme', {
  background: '#ffffff',
  primary: '#ff7b00',
  secondary: '#000000'
});          

// 現在のスコア
var score = $game.blockrain('score');

サンプル

http://aerolab.github.io/blockrain.js/内中盤あたりに,プレイ可能なサンプルが設置してあります.

まとめ

真面目なページでは使用する機会が無いと思いますが,遊びに特化したページや,ちょっとした暇つぶしにもなりますので,是非設置して遊んでみてください.