previous

page 1

next

I never thought it would be possible for me to create an Adventure game for playing in a browser, let alone write a beginner's tutorial on how to do it. But here it is!

Here is the end result.

Now type these lines into Atom and save them as index.html in a new folder, project_6:

index.html
<html>
<head>
<title>Rainbow</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<div id='game'>
<img src='images/scenes/3.jpg' id='scene'>
</div>
</body>
</html>
images.zip

Download this file into your new directory and unzip it.
You should end up with an images directory which contains 4 subdirectories: arrows, rainbow, scenes and shapes.

You can now try your index.html. Notice that if you resize your browser, the image stays the same size. Obviously we need the game to be fully visible irrespective of the browser window.

Before we do that, I need to tell you something about the image. I created the original way back in the days when 4:3 was the common display ratio (think old TVs). So we need to force the game container to use that ratio and to remain in the browser window. Here's how:

previous
next