开发者资讯

在线演示         本地下载

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

安装说明

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

1. class="game" style="width:250px; height:500px;">

2. rel="stylesheet" src="blockrain.css">
3.  
5. src="jquery.js">
6. src="blockrain.js">

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

主题

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

1. {
2. background: '#000000', // The main background color.
3. backgroundGrid: '#101010', // You can draw a small background grid as well.
4. primary: null, // Color of the falling blocks. This overrides the standard block color.
5. secondary: null, // Color of the placed blocks. This overrides the standard block color.
6. stroke: null, // Border color for the blocks.
7. innerStroke: null, // A small border inside the blocks to give some texture.
8.  
9. // The following are the colors of each piece
10. blocks: {
11. line: '#fa1e1e',
12. square: '#f1fa1e',
13. arrow: '#d838cb',
14. rightHook:'#f5821f',
15. leftHook: '#42c6f0',
16. rightZag: '#4bd838',
17. leftZag: '#fa1e1e'
18. }
19. }

1. {
2. background: '#000000',
3. backgroundGrid: 'data:image/png;base64,iVBORw0KGgoAAA{AND SO ON}',
4. primary: '#C2FFAE',
5. secondary: '#C2FFAE',
6. stroke: '#000000',
7. strokeWidth: 3,
8. innerStroke: null
9. }

可用主题：

• 糖果
• 现代
• 复古
• VIM
• 单色
• 游戏

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

选项

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

1. {
2. autoplay: false, // Let a bot play the game
3. autoplayRestart: true, // Restart the game automatically once a bot loses
4. showFieldOnStart: true, // Show a bunch of random blocks on the start screen (it looks nice)
5. theme: null, // The theme name or a theme object
6. blockWidth: 10, // How many blocks wide the field is (The standard is 10 blocks)
7. autoBlockWidth: false, // The blockWidth is dinamically calculated based on the autoBlockSize. Disabled blockWidth. Useful for responsive backgrounds
8. autoBlockSize: 24, // The max size of a block for autowidth mode
9. difficulty: 'normal', // Difficulty (normal|nice|evil).
10. speed: 20, // The speed of the game. The higher, the faster the pieces go.
11.  
12. // Copy
13. playText: 'Let's play some Tetris',
14. playButtonText: 'Play',
15. gameOverText: 'Game Over',
16. restartButtonText: 'Play Again',
17. scoreText: 'Score',
18.  
19. // Basic Callbacks
20. onStart: function(){},
21. onRestart: function(){},
22. onGameOver: function(score){},
23.  
24. // When a line is made. Returns the number of lines, score assigned and total score
25. onLine: function(lines, scoreIncrement, score){}
26. }

方法：

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

1. // Start the game
2. $game.blockrain('start');
3.  
4. // Restart the game
5. $game.blockrain('restart');
6.  
7. // Trigger a game over
8. $game.blockrain('gameover');
9.  
10.  
11. // Pause
12. $game.blockrain('pause');
13.  
14. // Resume
15. $game.blockrain('resume');
16.  
17.  
18. // Enable or Disable Autoplay (true|false)
19. $game.blockrain('autoplay', true);
20.  
21.  
22. // Enable or Disable Controls (true|false)
23. $game.blockrain('controls', true);
24.  
25.  
26. // Change the theme.
27.  
28. // You can provide a theme name...
29. $game.blockrain('theme', 'vim');
30.  
31. // Or a theme object. **Check out src/blockrain.jquery.themes.js** for examples.
32. $game.blockrain('theme', {
33. background: '#ffffff',
34. primary: '#ff7b00',
35. secondary: '#000000'
36. });
37.  
38.  
39. // Return the current score
40. var score = $game.blockrain('score');