The one thing that my children like to do above all else is to play video games. They can sit for hours in front of their iPad or computer and play. When they don’t play themselves they like to watch other people playing on Youtube.

The other day I asked the children if they wanted me to teach them how to create their own game. That really got them started and they wanted to get going straight away! I must admit that I didn’t expect that enthusiasm, so I hadn’t really prepared anything for them. But now I have!

This is part one of Tomas Heed’s game school of programming games for kids. Join in, and you will also soon be able to create games with HTML5 and JavaScript.

HTML5 and JavaScript

HTML is kind of a programming language used to write homepages. The abbreviation stands for Hypertext Markup Language and that language contains different building blocks to build a web page. Each building block consists of a start tag, like <h1>, and an end tag, like </h1>. If you put other building blocks inside of those blocks, the corresponding item will end up inside the other on the web page. (This can by changed by using style sheets, but we will come to that later)

JavaScript is a code language that is used to make stuff happen on a home page. When you push a button and something happens, JavaScript is often that magic stuff behind it. HTML and JavaScript is a bit like Gin and Tonic. They work well together.

At times people talk about HTML5. HTML is an evolving language, and the latest version from October 2014 is version 5. This version contains a lot of nice features that we will use in this series.

Animations using Sprites

Today we will make an image move. The human eye and the brain want’s to make things look like humans. It’s really easy to find faces and figures on a mountain side or a house. An ordinary human eye has the ability to grasp around 24 images per second. If you show different images at a high speed you can trick the eye that there is movement in the pictures. This is how an animated movie is created, or anything you see on TV, really.

programming games for kids - face in tree

We will use that same trick to animate a man. To do this we need four different images where the man has taken different positions. Then we will show those images over and over again to make the man look like he’s moving. We will put the four images side by side in the same image so that we can draw them all from the same file. This image of images is called a sprite.

Feel free to use this template that I have prepared for my kids. Draw a figure over it and that scan the image into the computer and we will animate it for you.

programming games for kids - sprite template

Canvas

To be able to paint our man we need a canvas. There is actually a HTML5 block that is called Canvas. Here is a simple HTML page with a canvas:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="500" height="500" 
style="border:1px solid #000000;">
</canvas>
</body>
</html>

Here we have created an HTML document, which we tell the web browser by entering DOCTYPE. A HTML document needs a html tag and a body tag. That’s just the way it is. It’s like a book needs a cover and a backside. I have also added a head tag where we will put our JavaScript later. The head tag contains a lot of information that is not really part of the web page.

Inside the body tag, which is inside the html tag, we have our canvas tag. We will give it and Id, in this case “canvas”, that we can use to tell JavaScript where to draw our man. We also give the canvas a width and a height and lastly a border. The border is one pixel wide and has the color black.

Script

The next part is to add a JavaScript to the file. Usually, the JavaScript is placed in it’s own file, but we will save that for another day. This time we push it straight into the HTML. There are a lot of tools that makes life easier for a JavaScript developer. One of them is jQuery that is used to manipulate HTML elements in a smooth way.

You can download jQuery and put it on your web site if you want to, but it’s easier to get it from Google from your site. You do this by adding the following section to your head tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Now we just need a bit of space for our program. You do this by adding another script tag. Add the following section under the jQuery section above:

<script>
$(function(){
alert("hello world");
});
</script>

$(function) is a way to make jQuery to execute a command when the web page is loaded. The $ sign is an abbreviation for jQuery and is used for all jQuery commands. alert will show a message box with the text you have supplied.

Come on! You try it! Create an empty textfile on your computer. Copy and paste the text below and save the file. Then rename it to test.html. Double click the file to open it in your browser. Note that if you are using Internet Explorer it won’t let you run local html files the way you want to. Take this opportunity to switch to a better web browser, like Google Chrome.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$(function(){
alert('hello world!!');
});
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500" 
style="border:1px solid #000000;">
</canvas>
</body> 
</html>

The image

The next thing to do is to get the scanned image onto the canvas. Add your sprite as an image to the page. Then we can use the following code to add it to the canvas.

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var image=document.getElementById("sprite");
context.drawImage(image,10,10);

The first row points out our canvas and saves a reference to it to a variable. From that canvas variable we get a context that we can use to paint to the canvas. It might sound strange that you need to take this extra step, but a lot of stuff is strange when you are programming. You have to follow some rules. Canvas has a context, which you need to use to paint on the canvas.

In the third row we take a copy of the image so that we can paint it and in the fourth row we draw the Image on the given coordinates, 10, 10.

When you draw something on the computer you use x, y coordinates. The first number (x) is the horizontal plane, where 0 is to the left of the screen and 1920 (based on screen resolution) is to the right.The other number (y) is the vertical plane. 0 is the top, and 1080 is the bottom. By using the x, y coordinates you can target any pixel on the screen.

There are more parameters available for context.drawImage. By using them you can select just a part of the image to paint, and also scale the image before painting it. This is exactly what we want to do with our sprite. This is how to do it:

drawImage(image, x-on-image, y-on-image, width-to-draw, height-to-draw, 
x-on-screen, y-on-screen, width-on-canvas, height-on-canvas);

We draw a part of the image using the following code:

context.drawImage(img1, window.image * 150, 0, 150 , 330,  25, 30 , 150, 330);

Timer

The last thing we need to do to get the animation going is to use a timer. A timer is used to regularly and repeatedly run a code section. We want to draw our image like four times per second, i.e. each 250 millisecond. We can use the following code:

window.setInterval(function, milliseconds);

That is:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
window.setInterval(animate, 250);
});
function animate(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var image=document.getElementById("sprite");
context.drawImage(image, 0, 0, 300, 500, 10, 10, 300, 500);
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500" 
style="border:1px solid #000000;"></canvas>
<image id="sprite" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Sprite_20oz_v2.png"></image>
</body>
</html>

The animation

In that code, we draw the same image over and over again. We want our sprite to change. Then we need to use a variable that keeps track on which image to use. There are many ways to do this. One of the ways that is wrong but very simple is to put a variable under window.

If you put a variable under window, that variable is accessible by all functions. While this may sound like a good thing, all functions are allowed to overwrite your variable. If you use window variables, you can never be sure that the value of the variable is what you expect it to be. In this simple sample we don’t care about that, though.

We start by setting a value to our counter.

window.image = 0;

Then we change the value of that variable each time our timer function is executed.

window.image = window.image + 1;

Since we only have 4 images, we never want the value to be above 3. (We name our four images, image 0, image 1, image 2 and image 3)

if(window.image > 3) window.image = 0;

Programming games for kids

Then we select which section of the image to draw by adding a small calculation with the image id into the code. We also clear the image every time the function runs to make room for the new image.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
window.setInterval(animate, 150);
window.image = 0;
});
function animate(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
var image=document.getElementById("sprite");
context.drawImage(image, 0 + (window.image * 150), 0, 150, 290, 
10, 10, 150, 290);
window.image = window.image + 1;
if(window.image > 3) window.image = 0;
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500" 
style="border:1px solid #000000;"></canvas>
<image id="sprite" 
src="http://tomasheed.se/wp-content/uploads/2017/04/sprite2.jpg">
</image>
</body>
</html>

There we are! An animated man!


Sprites

Those are the sprites that me and my kids drew on the template. Feel free to use them anywhere…

 

Programming games for kids sprite 1 Programming games for kids sprite 2 Programming games for kids sprite 3