# 1 Create New Files

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 [repl.it](https://repl.it/)), create a new project (or folder) named `hello-phaser` containing three new files:

* HTML file named`index.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.

{% hint style="info" %}
**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.
{% endhint %}

## 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.idew.org/code-video-game/tutorials/hello-phaser/a-1-create-blank-files.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.