Board Game Experiment, with JS Prototypes and Canvas

Launching the game

Then we’ll need a start button to launch the game and a loader animation to display during the loading of the scripts.

<p>
  <button id="start" class="btn btn-primary btn-large">Start</button>
  <img id="loader" src="/img/loader.gif" alt="Loading ..." />
</p>

And… fire !

jQuery(document).ready(function () {
  'use strict';
  // When the user clicks on start
  jQuery('#start').click(function () {
    // We create a new Game
    game = new Quoridor();
    // We set its size
    game.setSize();
    // We hide the start button
    jQuery('#start').fadeOut('fast');
    // We show the canvas
    jQuery('figure').slideDown('slow');
    // Start the game !
    game.turn();
    // On resize, we reset the size
    jQuery(window).resize(function () {
      game.setSize();
    });
    // We catch any username change
    jQuery('#name').change(function () {
      game.user.setName();
      game.user.displayName();
    });
  });
  // Hide the loader, show the start button
  jQuery('#loader').hide();
  jQuery('#start').fadeIn('slow');
});

We’re done !

Conclusion

As I told you before, this is my first game ever, so I hope I haven’t made any big mistakes. If so, or if you’re willing to improve this experiment, feel free to contribute to the GitHub Project.

If you enjoyed this post, please share it on your favorite social networks.

Anyway, thanks for reading, I hope that everything worked out well for you, and that I’ll see you around again.