O'Reilly logo

PhoneGap By Example by Andrey Kovalenko

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

Prepare and create the game

When we executed the Cordova command to generate the application, it already created some HTML, CSS, and JavaScript for us. Let's organize it a little. I would like to see such a structure of the www folder:

.
├── assets
│    └── sprites
│      └── spheres.png
├── css
│    └── index.css
├── index.html
└── js
    ├── game.js
    ├── index.js
    └── phaser.js

In this structure, we should have the following elements:

  • spheres.png: This is our file with different bubble colors
  • index.html: This is the main HTML file where we should place the canvas
  • index.css: This is our main stylesheet file
  • phaser.js: This is the Phaser framework itself
  • game.js: This is the file with the game login and all Phaser-related code

Let's modify the index.html file so that ...

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