使用HTML5+JavaScript生成的一款儿时的经典游戏

HTML5游戏手机阅读

这是一款使用HTML5+JavaScript生成的俄罗斯方块游戏（带自动播放！）。这款游戏大家绝对不应该陌生，我可是从小不离手混天黑地的玩啊！如果你也是个游戏霸主，那你一定要跟我学习如何开发这款小游戏。
这款HTML5俄罗斯方块是迄今为止最好的一个版本，该套代码修改后并重新创立了一个jQuery插件，增加了一些方法，让它更加容易实现。

在线演示

使用HTML5+JavaScript生成的一款儿时的经典游戏.zip

安装说明

创建任何一款元素（div、物品、人物或者任何你想要的），然后你要通过CSS来设定它的宽度和高度。这款俄罗斯方块就是非常好的一个例子。

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

复制代码

然后使用$('.game').blockrain()来对游戏进行设置，添加CSS文件，如果你有一些特别倾向的风格，可以使用UI来变化，当然了我说的是随意啊。

<link rel="stylesheet" src="blockrain.css">
<script src="jquery.js"></script>
<script src="blockrain.js"></script>
<script>
$('.game').blockrain();
</script>

复制代码

另外，你还可以启动连续播放：

$('.game').blockrain({ autoplay: true, autoplayRestart: true });

复制代码

主题

Blockrain附带了很多即装即用的主题，但是你也可以添加它们到Blockrain主题来创建一个新的自定义。你可以有多钟设置甚至是使用自定义文理来帮助你创建(Base64编码)

{
background: '#000000', // The main background color.
backgroundGrid: '#101010', // You can draw a small background grid as well.
primary: null, // Color of the falling blocks. This overrides the standard block color.
secondary: null, // Color of the placed blocks. This overrides the standard block color.
stroke: null, // Border color for the blocks.
innerStroke: null, // A small border inside the blocks to give some texture.
// The following are the colors of each piece
blocks: {
line: '#fa1e1e',
square: '#f1fa1e',
arrow: '#d838cb',
rightHook:'#f5821f',
leftHook: '#42c6f0',
rightZag: '#4bd838',
leftZag: '#fa1e1e'
}
}

复制代码

这有一个自定义复古主题（vim）的例子：

{
background: '#000000',
backgroundGrid: 'data:image/png;base64,iVBORw0KGgoAAA{AND SO ON}',
primary: '#C2FFAE',
secondary: '#C2FFAE',
stroke: '#000000',
strokeWidth: 3,
innerStroke: null
}

复制代码

可用主题：

糖果
现代
复古
VIM
单色
游戏

记住，你可以创建自定义主题或修改它们并让它们更满足你设计的需求。

选项

Blackrain带来了很多款选择，它们可以帮助你来自定义这套游戏：

{
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){}
}

复制代码

方法：

这有一些可控制游戏的使用办法，$game表示你有戏的选择(像$('.game'))

// Start the game
$game.blockrain('start');
// Restart the game
$game.blockrain('restart');
// Trigger a game over
$game.blockrain('gameover');
// Pause
$game.blockrain('pause');
// Resume
$game.blockrain('resume');
// Enable or Disable Autoplay (true|false)
$game.blockrain('autoplay', true);
// Enable or Disable Controls (true|false)
$game.blockrain('controls', true);
// Change the theme.
// You can provide a theme name...
$game.blockrain('theme', 'vim');
// Or a theme object. **Check out src/blockrain.jquery.themes.js** for examples.
$game.blockrain('theme', {
background: '#ffffff',
primary: '#ff7b00',
secondary: '#000000'
});
// Return the current score
var score = $game.blockrain('score');