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

Decorating the game

Before moving to the core game logic, we decorate the game's layout with graphics.

Prepare for lift off

The required graphics assets are shown in the following screenshot. Let's put the image files into the images folder:

Prepare for lift off

Engage thrusters

In these steps, we add the graphics to beautify our DOM elements:

  1. First, we add the background and border image to the customer view:
    #customer-view {
      background: url(../images/stand-background.png) center center no-repeat;
      background-size: cover;
      border-style: solid;
      border-width: 26px 32px 42px 32px;
      border-image: url(../images/sushi-stand-border.png) 26 32 42 32 repeat;
    }
  2. The border's width affects ...

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