CxD Archive
Code: Video Game
Code: Video Game
  • Code Introduction
  • What is Phaser?
  • TUTORIALS
    • A. Hello Phaser
      • 1 Create New Files
      • 2 Add HTML for Game
      • 3 Add CSS for Game
      • 4 Add JS for Game
      • 5 Add Image to Game
      • 6 Add Input to Game
    • B. Matching Game
    • C. Top-Down Game
    • D. Side-Scrolling Game
  • REFERENCES
    • TEMP - Links to Old References
    • Phaser CE Game Template
    • Creating Game Assets
      • Images
      • Animated Sprites
      • Sound Effects
    • Phaser CE Code References
      • Game Stage (Canvas)
      • Game World
      • Game Camera
      • Images
      • Sprites
      • Sprite Animations
      • Sprite Health
      • Sprite Groups
      • Physics - Properties
      • Physics - Collisions
      • Physics - Other Methods
      • Weapon and Bullets
      • Enemy AI Behaviors
      • Audio
      • Text
      • Input - Keys
      • Input - Mouse/Pointer
      • Particle Effects
      • Tween Animations
      • Tilesprite Background
      • Timers
      • Random Numbers
      • Game Controls
  • LINKS
    • Project Guidebook
    • Phaser CE API Code Reference
    • Phaser CE Code Examples
    • W3Schools JavaScript Tutorial
    • Piskel Animated Sprite Editor
    • Leshy Sound FX Maker
Powered by GitBook
On this page
  • Create New Files for Game
  • Create New Folder for Assets
Export as PDF
  1. TUTORIALS
  2. A. Hello Phaser

1 Create New Files

PreviousA. Hello PhaserNext2 Add HTML for Game

Last updated 5 years ago

Phaser games are JavaScript-powered web apps that run in a browser.

Your Phaser game will consist of an HTML file, a CSS file, and a JS file. The JavaScript file will contain your game code. You'll also have a folder containing the asset files (images, animated sprites, sound effects, etc.) for your game.

Your game will also need to load the Phaser CE game framework, which is a JavaScript file named phaser.min.js that defines classes for JS objects you'll use in your game code. You can either load this Phaser CE file from a local copy (placed in the same location as your HTML, CSS, and JS files) or by linking to a URL from a CDN (Content Delivery Network).

Create New Files for Game

Using a code editor (such as ), create a new project (or folder) named hello-phaser containing three new files:

  • HTML file namedindex.html

  • CSS file named style.css

  • JS file named script.js

Depending on the code editor you're using, these new files might be completely blank — or they might have starter code that was automatically inserted by the code editor. Either way is fine. In the next few steps of this tutorial, you'll add new code to each of these files.

JS FILENAME: This code guidebook will refer to script.js as the name of the JS file containing your Phaser game code. However, you can choose a different name for this file (such as code.js or game.js). You'll just need to be sure the <script> tag in your HTML lists the correct filename for your JS game code.

Create New Folder for Assets

In your code editor, create a new folder named assets in the same location as your HTML, CSS, and JS files. This folder will contain asset files used in your game, such as images, animated sprites, sound effects, etc.

Right now, this folder is empty, but in a later step, you'll upload an image file to this folder, so the image can be used in your Hello Phaser game.

repl.it