O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Placing the patterns on the deck

In this task, we are going to list the pattern in the deck. Later, we will let the player select patterns from this deck.

Prepare for lift off

We are going to need a new module to handle the display of the composition. Let's create a new empty JavaScript file named composition-view.js.

We need to import the file into the index.html file, as follows:

<script src='js/composition-view.js'></script>

Engage thrusters

Let's work on the pattern with the following steps:

  1. In the game scene of the index.html file, we add two DOM elements, namely, #your-composition and #deck:
    <div id="game-scene" class="scene out">
      ...
      <div id="your-composition"></div>
      <div id="deck" class="deck"></div>
    </div>
  2. In the template element, we add the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required