Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers

Creating the game scenes

In this task, we kick-start the project with game scenes such as the menu, game, and game-over condition, defined in a game-flow logic. We will also get these scenes linked together.

Prepare for lift off

We need to create a new directory for our new game project. Inside the project folder, we have the following:

  • An index.html file for the view

  • A game.css file for the styling

  • A directory named js for all the logic files

  • A directory named images for all the game graphics

  • Lastly, we need the following four images placed in the images folder:

Engage thrusters

First of all, we start at where the web browser begins loading our game, that is, the index.html file, and perform the steps given as follows:

  1. Put the following HTML code in the index.html file. Most of the tags and layout codes are similar to the ones we saw in Project 1, Building a CSS Quest Game:

    <!DOCTYPE html>
    <html lang='en'>
      <meta charset='utf-8'>
      <title>Card Battle</title...