HTML5游戏

当前位置: HTML5技术网 > HTML5游戏 > 使用HTML5+JavaScript生成的一款儿时的经典游戏

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

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


在线演示

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


安装说明

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

  1. <div class="game" style="width:250px; height:500px;"></div>
复制代码

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


  1. <!-- The stylesheet should go in the <head>, or be included in your CSS -->
  2. <link rel="stylesheet" src="blockrain.css">

  3. <!-- jQuery and Blockrain.js -->
  4. <script src="jquery.js"></script>
  5. <script src="blockrain.js"></script>
  6. <script>
  7.     $('.game').blockrain();
  8. </script>
复制代码

另外,你还可以启动连续播放:


  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.   // The following are the colors of each piece
  9.   blocks: {
  10.     line:     '#fa1e1e',
  11.     square:   '#f1fa1e',
  12.     arrow:    '#d838cb',
  13.     rightHook:'#f5821f',
  14.     leftHook: '#42c6f0',
  15.     rightZag: '#4bd838',
  16.     leftZag:  '#fa1e1e'
  17.   }
  18. }
复制代码

这有一个自定义复古主题(vim)的例子:


  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.   // Copy
  12.   playText: 'Let's play some Tetris',
  13.   playButtonText: 'Play',
  14.   gameOverText: 'Game Over',
  15.   restartButtonText: 'Play Again',
  16.   scoreText: 'Score',

  17.   // Basic Callbacks
  18.   onStart: function(){},
  19.   onRestart: function(){},
  20.   onGameOver: function(score){},

  21.   // When a line is made. Returns the number of lines, score assigned and total score
  22.   onLine: function(lines, scoreIncrement, score){}
  23. }
复制代码

方法:


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



  1. // Start the game
  2. $game.blockrain('start');

  3. // Restart the game
  4. $game.blockrain('restart');

  5. // Trigger a game over
  6. $game.blockrain('gameover');


  7. // Pause
  8. $game.blockrain('pause');

  9. // Resume
  10. $game.blockrain('resume');


  11. // Enable or Disable Autoplay (true|false)
  12. $game.blockrain('autoplay', true);


  13. // Enable or Disable Controls (true|false)
  14. $game.blockrain('controls', true);


  15. // Change the theme.

  16. // You can provide a theme name...
  17. $game.blockrain('theme', 'vim');

  18. // Or a theme object. **Check out src/blockrain.jquery.themes.js** for examples.
  19. $game.blockrain('theme', {
  20.   background: '#ffffff',
  21.   primary: '#ff7b00',
  22.   secondary: '#000000'
  23. });


  24. // Return the current score
  25. var score = $game.blockrain('score');
复制代码

aerolab.co


来源:http://www.gbtags.com/gb/share/4517.htm

【使用HTML5+JavaScript生成的一款儿时的经典游戏】相关文章

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

2. 服务器端生成的 JavaScript 响应

3. 塞尔达传说网页版?HTML5技术重温经典游戏时刻

4. 微软携手Atari发布8款HTML5版经典游戏

5. Web 开发人员必备的经典 HTML5 教程

6. 使用CSS3的step()生成的动画效果

7. 很赞的一款Javascript压缩/混淆器

8. Bootstrap3,JQuery倒计时插件和Animate.css生成的倒计时效果

9. 用绳子原理制作的一款简单的html5小游戏

10. 经典 HTML5 & Javascript 俄罗斯方块游戏

本文来源:https://www.51html5.com/a505.html

点击展开全部

﹝使用HTML5+JavaScript生成的一款儿时的经典游戏﹞相关内容

「使用HTML5+JavaScript生成的一款儿时的经典游戏」相关专题

其它栏目

也许您还喜欢