آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش افزونه block rain در JQuery

دوره های مرتبط با این مقاله

آموزش افزونه block rain در JQuery


آموزش Block Rain در Javascript

با استفاده از این افزونه ، شما میتوانید هر عنصری از HTML را برای اعمال این افزونه روی آن ، مورد استفاده قرار دهید . این عنصر حتما باید خصیصه های wdth وheight داشته باشد

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

فایلهای jquery و blockrain را در پروژه خود قرار دهید . این افزونه دارای یک فایل CSS نیز می باشد که آن را نیز باید در پروژه قرار داد.

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

< !-- jQuery and Blockrain.js -- >
< script src="jquery.js" >< /script >
< script src="blockrain.js" >< /script >
< script >
    $ ('.game').blockrain();
< /script >

میتوانید با استفاده از option های زیر اجرای بازی را به صورت autoplay در آورد.

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

آموزش قالب های Rain Block در JQuery

میتوان قالب دلخواه خود را با استفاده از دستورات زیر روی عنصر مدنظر خود اعمال کرد. قالب های خاصی برای این افزونه درنظر گرفته شده که برای استفاده از آنها باید blockrsin.themes.js را در پروژه قرار داد. این قالب ها شامل موارد زیر است.

  • candy
  • modern
  • retro
  • vim
  • monochrome
  • gameboy
  • aerolab

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

آموزش قالب custom در Rain Block در JQuery

'custom': {
  background: '#040304',
  backgroundGrid: '#000',
  complexBlocks: {
    line:     ['assets/blocks/custom/line.png', 'assets/blocks/custom/line.png'],
    square:   'assets/blocks/custom/square.png',
    arrow:    'assets/blocks/custom/arrow.png',
    rightHook:'assets/blocks/custom/rightHook.png',
    leftHook: 'assets/blocks/custom/leftHook.png',
    rightZag: 'assets/blocks/custom/rightZag.png',
    leftZag:  'assets/blocks/custom/leftZag.png'
  }
}

آموزش آپشن های Rain Block در JQuery

این افزونه دارای گزینه هایی جهت سفارشی کردن بازی در سایت ما دارد. مانند اجرای خودکار، متنهای نمایش داده شده ، سرعت حرکت و ...

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

آموزش متدها در Rain Block در JQuery

میتوان از متدهای زیر نیز استفاده کرد. این متدهای روی عنصری که قصد اعمال افزونه روی آن را داریم ، اجرا کنید . در واقع به جای $ 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');
  • 92
  •    82
  • تاریخ ارسال :   1398/09/21

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش افزونه block rain در JQuery
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .