HTML5最新经典俄罗斯方块游戏插件-Html5-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝29
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:201回复:0

  HTML5最新经典俄罗斯方块游戏插件

楼主#
更多 发布于:2016-06-05 22:35


 扼要教程 这是一款最新的经典 html5
俄罗斯方块游戏插件。该插件运用html5和Blockrain.js来制造,它具有运用简略、响应式、可定制、速度快、有积分记录和主动游戏的特色。


检查演示 下载插件
基本运用办法
能够运用任何一个元素来作为游戏窗口(一个div、article 或 figure
等等都能够),并确保经过CSS设置了该元素的宽度和高度。能够为元素设置任何的class,demo中设置为.game。


仿制代码
然后在页面中引进
jQuery和blockrain.jquery.js文件。接下能够经过$('.game').blockrain()办法调用俄罗斯方块插件。主张添加blockrain.css到页面中,它供给了一些俄罗斯方块界面的款式,当然你也能够自定义界面款式。






仿制代码



 $('.game').blockrain();  ">
仿制代码
你还能够使俄罗斯方块游戏接连主动游戏。
$('.game').blockrain({ autoplay: true,
autoplayRestart: true });
仿制代码
游戏主题
Blockrain
有许多“即插即用”的主题。你也能够在BlockrainThemes中添加自定义的主题。你能够对主题进行多项设置,乃至能够定制纹路(根据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'
}
}
仿制代码
下面是一个自定义纹路的retro主题(vim)的比如:
{
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
你能够经过修改这些主题来制造非常好的作用。
可用参数
Blockrain有许多参数能够协助定制俄罗斯方块游戏:
{
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){}
}
仿制代码
办法
Blockrain有许多有用的操控游戏的办法。$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');
仿制代码







优质IT资源分享社区为你提供此文。
本站有大量优质html5 css
js等web前端开发教程视频,资料等资源,包含html5 css js
前端开发框架等基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

WEB前端开发教程视频
优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客