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

数行のコードをコピペするだけで、テトリスを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を配置します。

[html]

[/html]

Step 2: 外部ファイル

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

[html]

...
コンテンツ
...




[/html]

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

[javascript]
{
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){}
}
[/javascript]