Making A Game With HTML

If you prefer to watch videos rather then read, I made a class on SkillShare

Introduction

In this tutorial, we will make a game with HTML (link to the finished game). Including score, keyboard input and collision detection. So first of all, what is HTML? HTML is a type of text that the browser reads and displays content accordingly. The page that you are looking at right now is the result of your browser interpreting the HTML that it received from this site. To create HTML you don't need anything but a computer.

Setting Up The Working Environment

First of all, there is a thing in windows, you don't see the full names of the files. It's important that you do know the exact names of your files. To change that, open up some folder, click the "View" tab, then "File name extensions". Now you can see the true names of your files. Files have extensions like ".exe" and ".docx".

Now we will create a folder where we will put all the files of the game. To create a new folder: press the right mouse button on your desktop or some folder, hover over "New" and click "Folder". Give the folder the name you would like for your game.

You can create all the files using notepad, which exist on the computer by default. However, this is not very comfortable. I prefer to use a different text editor called Visual Studio Code (download link). Whatever text editor you choose, open the game folder with it.

HTML File Creation

Create a file in the game folder and name it "index.html". We want this exact name, not "index.html.txt".

Now click index.html file. An empty page will open in the browser. Great game right? OK, let's start doing something. Change the title from "Document" to "Game" for example. Let's also add a text to the page using an H1 element.

Refresh the page to see the changes.

We will add an image. Create a new folder inside the game folder and name it "images". Put some image file in the folder. To create an image element in the page write . Instead of "yourImage.png" type the name of the image file you put in the images folder (the exact name with the extension).

In order to manipulate the elements we created here we will add an id for each.

JavaScript File Creation

Create a new folder in the game folder and name it "scripts". In the new folder create a new file and name it "main.js". In this file we will write javascript code to manipulate the elements in the page. First, create references to the text and the image using the id we gave each of them.

Let's use this script to change the text of the textElement.

Refresh the page and... Nothing happens. index.html is not going to guess you mean to use this javascript file. To use it in index.html add this.

        <script src = "scripts/main.js"></script>

The line <script src = "scripts/main.js"></script> will activate the code. Refresh the page now and see the change. Now we will move the image. Write in main.js:

The image moves 100 pixels below the top of the page and 100px to the right of the left side. You can change the numbers like charImg.style.top = "56px" to see the effect. We will now add variables x and y to control the position of the images.

Responding To Keyboard Input

Now that the position is controlled by variables, we can create a function to move the image:

A function is a piece of code that runs every time we call it. We did not call this function anywhere so it would not run. Lets make it so it is called Whenever we press a key:

onkeydown is called every time a key is held down. By setting it to moveChar we made it so moveChar is called. Refresh the page and start pressing keys. The image moves 20 pixels to the right on any key press. Usually in games though, different keys do different things. Each key has a unique number assigned to it, and we can use it to respond differently to different keys.

68 is the keyCode of D and 65 is the keyCode of A. The switch statement executes different blocks of code in each case. Now A moves the image to the left and D moves it to the right (Refresh). Let's add up and down too:

Multiple Keyboard Inputs

The image can now move up, down, left or right, not at the same time though. The reason is that each time the switch goes to one of the cases, only responding to one key. To fix this, create a function that sets variables to indecate whether a key is held down:

if statement executes the code if the condition is true. For example: if (s) {y = y + 10} would run if s is true. Refresh the page and.. The image doesn't move. We are not actually calling moveChar now. To call it reputedly we are going to use setInterval:

moveChar is called every 5 milliseconds. Now we can move up and left at the same time. Two things though: 1. The image is moving really fast. So let's use a variable to control the speed rather then hard code it like we did before. 2. The image does not stop after the key is released. We will solve that with onkeyup:

Adjust the speed variable to get the speed you want.

Score And Goal Creation

To handle the score in the game create a new javascript file in the scripts folder and name it score.js. Don't forget to add it to index.html like so: <script src = "scripts/score.js"></script> . First, make a variable for the socre and a function to change it:

score += change is just like score = score + change , just shorter. Now we will create the goal. Put some image for the goal in the images folder. You can create the goal by writing <img src = "images/goal.png"> but i want to take this opportunity to show you how to create it with javascript:

document.createElememt('img') creates an image element (you can do this for any other element). After creating we need to allso append the element to the body of the page, that's why document.body.appendChild(goalImg). goalH and goalW are the height and the width of the goal respectively. Those are needed to detect the collision between the player and the goal since it's not likely they will land at exactly the same position. Going back to main.js. We need to define charH and charW:

You can adjust those variables ofcorce. Now we will change the score when the player and the goal collide. That means that the left side of the player is not more right then the right side of the goal, the right side of the player is not more left then the left side of the goal, and the same for up and down. We will do this checking in moveChar:

The score now goes up when the player touches the goal. Now let's move the goal after giving the score so it wont just be as easy as standing on the goal. In score.js, create a function to move the goal:

Math.random() is a built in function that returns a random number between 0 and 1. So, Math.random() * 600 gives you a number between 0 and 600. In main.js, at the if statement from before, call this moveGoal function:

Uploading Your Game

To upload the game you first need to compress the game folder to a zip file. You do this by: right click on the folder -> Send to -> Compressed (zipped) folder. The zip file is what you upload to any site that hosts games. you can upload your game to itch.io for example. In the upload page: First, give a title to your project in the input field. Change kind of project from downloadable to HTML. There is a button for "Upload Files". Click that and choose your zip file. Check the checkbox for "This file will be played in the browser". Change the width and height under "Viewport dimensions" to fit the game. Click the button at the bottom "Save & view page". If you want to make your game public click "Edit game" on the top and then change the visibility from draft to public and save.