One Simple Game

Interested in game programming? Not sure? Let's make one simple game and find out.

Press the Next button on the bottom right of the screen to begin.

We are going to learn the absolute basics of making a video game.

When you are playing a game it repeatedly goes through a game loop, which involves handling updates to game values and drawing the current game screen.

First we need something to draw on. This is our game canvas.

Let's decide how big we want our game to be. Enter a width and height (in pixels). Let's make each at least 200 pixels so we can see.

width: px

height: px

Now do the same thing to draw a rectangle inside our canvas. Try entering a few numbers for the width and height here.

width: px

height: px

Okay, now that you've decided how wide and tall our rectangle is, let's toy with its position on the screen. A game object's x value is its position (in pixels) from the left side of the game canvas.

The y value is a little trickier. It describes the vertical position, but measures from the top of the game canvas rather than the bottom! Try some x and y values to see what I mean.

x: px

y: px

width: px

height: px

Great! You made a rectangle that we can draw and move.

But we want the game itself to do all that work of moving the rectangle around.

Let's store the the rectangle's position as variables, which can be different values. You can use the standard names of x and y (or left and top) or really, anything you want. Just avoid spaces or weird symbols (except an underscore _ if it makes it easier to read).

I'm going to make the rectangle a variable itself, called myRect.

Now, make up a name for its horizontal position:

Make up a different name for its vertical position:

Now we can change the position by changing these variables. (You can try changing them below if you want.)

myRect.x =

myRect.y =

Now, let's use the game's update() function to automatically move the rectangle. This function is used to handle any changes between game animation frames. Let's see how the "next frame" of the game changes things.

*Note: you can use a positive number to move one way, and a negative number to move the other way. Using zero means you won't move in either direction.

current frame

// The update() function might look something like this
function update()
{
    myRect.x = myRect.x +

    myRect.y = myRect.y +
}


next frame (preview)

Okay, let's back up a little. Once a game is started, the game loop basically looks like this:

update()
draw()

// Then repeat...

Well... that handles the animation. A real game will also need to deal with player input (from a controller, keyboard, etc.), which we will discuss later, and will look like this:

handle_input()
update()
draw()

// Then repeat...

Let's see our game loop in action. Enter how much you want the values to change on each update(). Then press Restart to see the resulting animation. (Hint: start with something small.)


// Be sure to also try NEGATIVE numbers!

function update()
{
    myRect.x = myRect.x +

    myRect.y = myRect.y +
}

Restart

Ok, but we don't always want to move the same way. Hm... let's use variables again! This will give us a new way to change the update() function.

Name a variable describing how much we'll move horizontally (along the "x" axis):

... and a variable describing how much we'll move vertically (along the "y" axis):

Now we can change these anywhere in our code, and our update() function will look like:

function update()
{
    myRect.x = myRect.x + myRect.x_speed

    myRect.y = myRect.y + myRect.y_speed
}

Let's see what that update function does now, when we set these variable values somewhere else in the code. Change the two new variables below to see how it affects movement in the game loop.

Press Restart to begin animating (or to reset your position).

// Now we can change these from anywhere, not just inside update()
myRect.x_speed =

myRect.y_speed =

Restart

Hooray! You have learned to use variables for animations. And since we can set movement now from anywhere, we can do it inside that handle_input() function I mentioned, letting the player control the movement.

I'll handle the code setup (below), you just decide what happens when the user presses up, down, left, or right.

// Positive and NEGATIVE numbers will determine movement
function handle_input( direction )
{
    // Btw, the == checks if two things are equal
    if( direction == "right" )
        myRect.x_speed =
    
    if( direction == "left" )
        myRect.x_speed =
    
    if( direction == "up" )
        myRect.y_speed =
    
    if( direction == "down" )
        myRect.y_speed =
}


Looking good... let's put it together and see if it works. See what pressing (or swiping) up, down, left, and right do. You can alway go back with the Previous button if this doesn't look right.

You can use the Restart button if you get lost offscreen.

Restart

Nice! Almost done. Now we need a goal for our player (to make it a game).

To keep it simple, let's just have the player try to grab something. We'll call it a "trophy" and we can just use a gold rectangle for it.

As you did with the player, decide how big your trophy is.

width:

height:


(preview)

We use "collision detection" to determine when two game objects overlap, like checking if the player has reached the trophy.

I'll spare you the extra code involved. Let's just say we have a colliding_with_trophy() function that will always give us true or false.

We'll add this into our udpate() function, so we can check for collision within each game loop.

But what happens if colliding_with_trophy() gives us true (so the rectangle and trophy are overlapping)? Well, then the game is won. Let's use a variable called gameOver to represent that.

function update()
{
    myRect.x = myRect.x + myRect.x_speed

    myRect.y = myRect.y + myRect.y_speed

    // The "if" here means: only look at the next line if colliding_with_trophy() gives us 'true'
    if( colliding_with_trophy() == true )
        gameOver = true

}

When the game is over, we want to let the player know they have won. One way to do this is change the draw() function.

Fill in the boxes below to decide what you'll say, and what x and y values the writing will start at.

function draw()
{
    // Btw, other drawing code would be up here...

    if( gameOver == true )
    {
        drawText(, , )
    }

}

(preview)

Congratulations!

You've learned the main concepts of creating one simple game.

Admittedly simple, but that was the point. Hopefully this helped you determine if you would find game programming interesting. (If so, go online and look for more in-depth tutorials!)

Now, press Next to play your simple masterpiece. NOTE: you can always go back through these pages to change the basics of your game. Have fun!

Restart

Review

Test yourself!

Wow, you made it all the way here!

If you want to keep learning, click the button below to download the code for the game you just made.

Download My Game

It will be a file called mygame.html. You can double-click/open it in your browser to play it.
Open it in a text editor (like Notepad, TextEdit, or Notepad++) to edit the code.
Have fun learning!