A tetris game in HTML5 + Javascript (with autoplay!)
Create any element (a div, article, figure, whatever you want) and make sure it has a width and a height set via CSS . You can use any class, but we are using .game for this example.
<div class="game" style="width:250px; height:500px;"></div>Then you just include jquery and blockrain and setup the game with $('.game').blockrain(). Adding the CSS file is strongly recommended, as it provides some important styles for the UI (but you can customize them as needed).
<!-- The stylesheet should go in the <head>, or be included in your CSS -->
<link rel="stylesheet" src="blockrain.css">
<!-- jQuery and Blockrain.js -->
<script src="jquery.js"></script>
<script src="blockrain.js"></script>
<script>
$('.game').blockrain();
</script>For extra fun, you can enable continuous autoplay, so the game plays itself continuously:
$('.game').blockrain({ autoplay: true, autoplayRestart: true });Blockrain comes with many themes out-of-the-box, but you can create custom ones by adding them to BlockrainThemes. You have multiple settings and can even use custom textures (base64-encoded).
{
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'
}
}Here's an example of a retro theme (vim) with a custom texture:
{
background: '#000000',
backgroundGrid: 'data:image/png;base64,iVBORw0KGgoAAA{AND SO ON}',
primary: '#C2FFAE',
secondary: '#C2FFAE',
stroke: '#000000',
strokeWidth: 3,
innerStroke: null
}- candy
- modern
- retro
- vim
- monochrome
- gameboy
- aerolab
Remember you can create custom themes or modify these to better suit your design needs.
Blockrain comes with many options to help customize the game:
{
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){}
}There are a few utility methods available to control the game. $game represents your game selector (like $('.game'), for example).
// 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');This will generate the full minified source under /build . It's basically License + libs + themes + src, concatenated and minified.
gulp build
Blockrain.js is based on the work by @mrcoles, which is one of the best HTML5 tetris versions out there. The code was then modified and refactored to build a jQuery Plugin and added quite a few methods to easily add themes to it and make it simpler to implement.