It has been a while, but I’m back with a new set of tutorials. I have ventured off and started to learn TypeScript, so I decided I should write up what I have done. For the first part of this adventure, I’m going to take you thru the adventure of creating a Breakout clone using a canvas. Let’s begin this adventure!

You can see the final outcome of the Breakout clone here. As well as see all the code in my GitHub repo.

Index.html – The Starting Point

First off, let’s start by creating a new html file to house the canvas. All we need is a canvas with an id of “gameCanvas”. To make the game line up correctly inside the canvas, make sure it is has a width of 480 pixels and a height of 320 pixels. Below is how I laid my html page.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>breakout</title>
    <style>
    	* { padding: 0; margin: 0; }
        body { background: #000; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
        #dvCanvas { padding-top: 10px; }
    </style>
</head>
<body>
    <div id="dvCanvas">
        <canvas id="gameCanvas" width="480" height="320"></canvas>
    </div>
</body>
</html>

Pretty simple little file. If you load it up, you should have a nice little grey rectangle on the page.

Game.ts – The Guts of The Game

Now we have the basic html page to hold our canvas, lets create the TypeScript file that will house the guts of the game. I chose to name it game.ts, but you can name it whatever you want. The first thing we want to do is create a couple of variables that house the canvas and the rendering context.

 

var canvas: HTMLCanvasElement;
var ctx: CanvasRenderingContext2D;

Since this is TypeScript, we are giving both of the variables a definite type. Now we need to actually grab the canvas from the html. To do this, we will grab it using the window.onload event.

 

window.onload = () => {
    // grab our canvas, and get a 2d context
    canvas = <HTMLCanvasElement>document.getElementById('gameCanvas');
    ctx = canvas.getContext("2d");
}

Now we are getting somewhere. To finish this off, let’s get the main game loop running up. We will want to create a new function, and have it request to get called before the screen gets repainted.

function gameLoop()
{
    // lets keep the game loop going!
    requestAnimationFrame(gameLoop);

    // fill to black!
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

The call to requestAnimationFrame(gameLoop) tells the browser that we want to call the function gameLoop right before you repaint the screen. The next 2 statements are just filling the whole canvas to black. To see this in action, we need to place the call to gameLoop at the bottom of the window.onload event we created earlier.

Now to compile the TypeScript and then add the newly created .js file to the HTML file we created at the very beginning. Once you get all that done, you can load up the HTML file, and the grey rectangle should now be black.

Here is what you should have so far.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>breakout - Fluffy Dollop</title>
    <style>
    	* { padding: 0; margin: 0; }
        body { background: #000; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
        #dvCanvas { padding-top: 10px; }
    </style>
    <script src="game.js"></script>
</head>
<body>
    <div id="dvCanvas">
        <canvas id="gameCanvas" width="480" height="320"></canvas>
    </div>
</body>
</html>

 

var canvas: HTMLCanvasElement;
var ctx: CanvasRenderingContext2D;

function gameLoop()
{
    // lets keep the game loop going!
    requestAnimationFrame(gameLoop);

    // fill to black!
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

window.onload = () => {
    // grab our canvas, and get a 2d context
    canvas = <HTMLCanvasElement>document.getElementById('gameCanvas');
    ctx = canvas.getContext("2d");
    
    // run the game!
    gameLoop();
}

In the next tutorial, I will go over on creating the ball for our game, and have it bounce all around.