index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />

  <title>Blockrain.js - A Tetris game in HTML5 + Javascript (with autoplay!)</title>

  <meta name="description" content="Blockrain.js lets you embed the classic Tetris game on your website" />
  <meta name="keywords" content="js, jquery, game, plugin, html5, tetris" />
  <meta name="robots" content="INDEX, FOLLOW" />
  <meta name="author" content="Aerolab" />

  <!-- Facebook Stuff -->
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Blockrain.js" />
  <meta property="og:title" content="Blockrain.js - a Tetris game in HTML5 + Javascript" />
  <meta property="og:description" content="Blockrain.js lets you embed the classic Tetris game on your website" />
  <meta property="og:image" content="http://aerolab.github.io/blockrain.js/assets/images/social-card.png" />
  <meta property="og:url" content="http://aerolab.github.io/blockrain.js" />
  <meta property="fb:app_id" content="344819049029949" />
  
  <!-- Twitter Stuff -->
  <meta property="twitter:card" content="summary" />
  <meta property="twitter:site" content="@aerolab" />
  <meta property="twitter:title" content="Blockrain.js - a Tetris game in HTML5 + Javascript" />
  <meta property="twitter:description" content="Blockrain.js lets you embed the classic Tetris game on your website" />
  <meta property="twitter:image" content="http://aerolab.github.io/blockrain.js/assets/images/social-card.png" />
  <meta property="twitter:url" content="http://aerolab.github.io/blockrain.js" />

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
  <link rel="shortcut icon" href="assets/images/favicon.png">

  <link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="src/blockrain.css">

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-21195039-3', 'aerolab.github.io');
    ga('require', 'displayfeatures');
    ga('require', 'linkid', 'linkid.js');
    ga('send', 'pageview');
  </script>

</head>
<body>

<section id="hero" style="min-height:600px; height:auto;">

  <div class="welcome">
    <h1><img src="assets/images/logo.svg" width="560" alt=""></h1>
    <p>Embed &amp; play the classic game on your site. Simple as that.</p>

    <div class="buttons">
      <a href="dist/blockrain.zip" download class="btn btn-download">Download</a>
      <a href="https://github.com/Aerolab/blockrain.js" class="btn btn-github" target="_blank">Fork on Github</a>
    </div>
  </div>

  <div class="game" id="cover-tetris"></div>

</section>

<section id="features">
  <header>
    <h1>More than just a game</h1>
    <p>Apart from being able to play it, you can customize it!</p>
  </header>
  <article>
    <figure class="feature">
      <img src="assets/images/feature-plug.png" alt="">
      <figcaption>
        <h2>Plug 'n' Play</h2>
        <p>Just copy and paste a bit of code and you'll be good to go</p>
      </figcaption>
    </figure>

    <figure class="feature">
      <img src="assets/images/feature-responsive.png" alt="">
      <figcaption>
        <h2>Responsive</h2>
        <p>No matter how wide or narrow your display is, you'll always be able to play.</p>
      </figcaption>
    </figure>

    <figure class="feature">
      <img src="assets/images/feature-design.png" alt="">
      <figcaption>
        <h2>Design</h2>
        <p>Customize it as you want. Change the colors to fit your site.</p>
      </figcaption>
    </figure>

    <figure class="feature">
      <img src="assets/images/feature-speed.png" alt="">
      <figcaption>
        <h2>Speed</h2>
        <p>Adjust how fast the blocks are falling to make it more difficult.</p>
      </figcaption>
    </figure>

    <figure class="feature">
      <img src="assets/images/feature-score.png" alt="">
      <figcaption>
        <h2>Score</h2>
        <p>Add the scoreboard or not. That's your decision.</p>
      </figcaption>
    </figure>

    <figure class="feature">
      <img src="assets/images/feature-autoplay.png" alt="">
      <figcaption>
        <h2>Autoplay</h2>
        <p>Let the bots battle against each other. Just for the lulz.</p>
      </figcaption>
    </figure>
  </article>
</section>


<section id="versus">
  <header>
    <h1>Let the bots play against each other</h1>
  </header>

  <article id="versus-arena">
    <div class="game-holder" id="tetris-versus-1">
      <div class="score">0</div>
      <div class="game"></div>
    </div>

    <div class="game-holder" id="tetris-versus-2">
      <div class="score">0</div>
      <div class="game"></div>
    </div>
  </article>

</section>


<section id="examples">
  <header>
    <h1>Try it yourself!</h1>
  </header>
  <article id="example-slider">
    <div class="example">
      <div class="theme">theme: <strong>"vim"</strong></div>
      <div class="instructions">
        Use only arrows
        <div class="keyboard">
          <div class="key key-up"></div>
          <div class="key key-left"></div>
          <div class="key key-down"></div>
          <div class="key key-right"></div>
        </div>
      </div>
      <div class="game" id="tetris-demo"></div>
    </div>
    <div class="buttons">
      <a href="" class="btn btn-prev">Previous</a>
      <a href="" class="btn btn-next">Next</a>
    </div>
  </article>

</section>


<!--section class="play">

  <h1>Play</h1>

  <div class="game" id="tetris-play">

  </div>

</section-->


<footer id="footer">
  <p>If you like it, don't forget to fork/star it on Github.</p>
  <div class="buttons">
    <a href="blockrain.min.js" download class="btn btn-download">Download</a>
    <a href="https://github.com/Aerolab/blockrain.js" class="btn btn-github">Fork on Github</a>
  </div>
  <p>Made with love by <a href="http://aerolab.co">aerolab</a>, based on code by <a href="http://mrcoles.com/tetris/">Peter Coles</a>.</p>
  <p>We actually have it live on our site. <a href="http://aerolab.co/culture">Check it out!</a></p>
  <p><a href="http://aerolab.co"><img src="assets/images/kite.png" width="39" alt="Aerolab"></a></p>
</footer>


<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="src/blockrain.jquery.libs.js"></script>
<script src="src/blockrain.jquery.src.js"></script>
<script src="src/blockrain.jquery.themes.js"></script>

<script>
  var $cover = $('#cover-tetris').blockrain({
    autoplay: true,
    autoplayRestart: true,
    speed: 100,
    autoBlockWidth: true,
    autoBlockSize: 25,
    theme: 'candy'
  });
  

  var versusSpeed = 100;

  var $versus1 = $('#tetris-versus-1 .game').blockrain({
    autoplay: true,
    autoplayRestart: true,
    speed: versusSpeed,
    onGameOver: function() {
      $versus1.blockrain('restart');
      $versus2.blockrain('restart');
      var $score = $versus2.parent().find('.score');
      $score.text( parseInt($score.text()) + 1 );
    }
  });
  var $versus2 = $('#tetris-versus-2 .game').blockrain({
    autoplay: true,
    autoplayRestart: true,
    speed: versusSpeed,
    onGameOver: function() {
      $versus1.blockrain('restart');
      $versus2.blockrain('restart');
      var $score = $versus1.parent().find('.score');
      $score.text( parseInt($score.text()) + 1 );
    }
  });


  var $demo = $('#tetris-demo').blockrain({
    speed: 20,
    theme: 'vim',
    onStart: function() {
      ga( 'send', 'event', 'tetris', 'started');
    },
    onLine: function() {
      ga( 'send', 'event', 'tetris', 'line');
    },
    onGameOver: function(score){
      ga( 'send', 'event', 'tetris', 'over', score);
    }
  });

  $('#example-slider').find('.btn-next').click(function(event){
    event.preventDefault();
    switchDemoTheme(true);
  });
  $('#example-slider').find('.btn-prev').click(function(event){
    event.preventDefault();
    switchDemoTheme(false);
  });

  function switchDemoTheme(next) {

    var themes = Object.keys(BlockrainThemes);

    var currentTheme = $demo.blockrain('theme');
    var currentIx = themes.indexOf(currentTheme);

    if( next ) { currentIx++; }
    else { currentIx--; }

    if( currentIx >= themes.length ){ currentIx = 0; }
    if( currentIx < 0 ){ currentIx = themes.length-1; }

    $demo.blockrain('theme', themes[currentIx]);
    $('#example-slider .theme strong').text( '"'+themes[currentIx]+'"' );
  }
</script>

</body>
</html>