Talking about Platform game game, Game development, HTML5 and Javascript.
Nowadays if you want to create a platform game, there are tons of frameworks and physics engines which will allow you to create in your preferred language, from AS3 to HTML5.
Some years ago, things were a bit different, and usually you had to code platform games from scratch.
It wasn’t that difficult and, above all, it was fun and allowed you to master the language you was using.
That was Tony Pa‘s tile game based tutorials, and some time later I also published my platform game tutorial without using any framework.
Time to bring back some old school stuff, and I am showing you how to create an HTML5 platform game from scratch.
Attention please: I am not saying you shouldn’t use framework or tools to create your own game, I am just saying you must be able to create at least basic games from scratch if you want to get seriously into game development. The more you know, the better it is.
DRAWING A SIMPLE LEVEL
Every game starts with level design, so in this first step we are going to physically draw the level. It’s a tile based game so level data will be stored into a 2 dimensional array.
First things first, the HTML document which will contain the game, easy and simple:
<html>
<head>
<title></title>
<style>
body{
background-color: #000000;
margin:0px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script01.js"></script>
</body>
</html>
The HTML page calls a javascript file called script01.js, which only contains level data and a loop to draw the level on canvas:
(function(){
var canvas = document.getElementById("canvas"); // the canvas where game will be drawn
var context = canvas.getContext("2d"); // canvas context
var levelCols=11; // level width, in tiles
var levelRows=9; // level height, in tiles
var tileSize=32; // tile size, in pixels
var playerCol=5; // player starting column
var playerRow=4; // player starting row
var level = [ // the 11x9 level - 1=wall, 0=empty space
[1,1,1,1,1,1,1,1,1,1,1],
[1,1,0,0,0,0,0,0,0,1,1],
[1,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,1,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,1,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,1,1],
[1,1,1,1,1,1,1,1,1,1,1]
];
var playerYPos=playerRow*tileSize; // converting Y player position from tiles to pixels
var playerXPos=playerCol*=tileSize; // converting X player position from tiles to pixels
canvas.width=tileSize*levelCols; // canvas width. Won't work without it even if you style it from CSS
canvas.height=tileSize*levelRows; // canvas height. Same as before
renderLevel();
// function to display the level
function renderLevel(){
// clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// walls = red boxes
context.fillStyle = "#ff0000";
for(i=0;i<levelRows;i++){
for(j=0;j<levelCols;j++){
if(level[i][j]==1){
context.fillRect(j*tileSize,i*tileSize,tileSize,tileSize);
}
}
}
// player = green box
context.fillStyle = "#00ff00";
context.fillRect(playerXPos,playerYPos,tileSize,tileSize);
}
})();
and here is the result: our level is beautifully drawn but no interaction is possible.
Now, let’s try to move that green square we call “player”
MOVING THE PLAYER
To move the player we actually have to do some stuff: first, we need listeners to know which keys the player is pressing, then we need some variables to store player speed, and last but not least we need a routine to update the stage.
While listeners and variables are quite easy to understand, updating the stage is not that easy, and I am warning you I did it in one of the worst possible ways: redrawing everything each frame.
Although this may look really bad (and actually it is), don’t worry about it because in next steps I am showing you how to use a render engine to optimize this task.
You may say: “hey, you told you are making a game from scratch with no 3rd party engines”. And you are right, I am MAKING the game, but I will DELEGATE the rendering process to tools which deal with Canvas or WebGL.
And before you think I am cheating, I am not! When you make a Flash game, you don’t bother about the way Flash Player will render your stuff, you just say “move this Display Object here”.
Unfortunately HTML5 does not have a proper “player” so I am skipping this boring part.
Anyway, the core of the “rendering engine” I am using is explained really deeply at this page, but will all those beatiful rendering engines around, I won’t bother about it too much.
Here is the script:
(function(){
var canvas = document.getElementById("canvas"); // the canvas where game will be drawn
var context = canvas.getContext("2d"); // canvas context
var levelCols=11; // level width, in tiles
var levelRows=9; // level height, in tiles
var tileSize=32; // tile size, in pixels
var playerCol=5; // player starting column
var playerRow=4; // player starting row
var leftPressed=false; // are we pressing LEFT arrow key?
var rightPressed=false; // are we pressing RIGHT arrow key?
var upPressed=false; // are we pressing UP arrow key?
var downPressed=false; // are we pressing DOWN arrow key?
var movementSpeed=3; // the speed we are going to move, in pixels per frame
var playerXSpeed=0; // player horizontal speed, in pixels per frame
var playerYSpeed=0; // player vertical speed, in pixels per frame
var level = [ // the 11x9 level - 1=wall, 0=empty space
[1,1,1,1,1,1,1,1,1,1,1],
[1,1,0,0,0,0,0,0,0,1,1],
[1,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,1,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,1,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,1,1],
[1,1,1,1,1,1,1,1,1,1,1]
];
var playerYPos=playerRow*tileSize; // converting Y player position from tiles to pixels
var playerXPos=playerCol*=tileSize; // converting X player position from tiles to pixels
canvas.width=tileSize*levelCols; // canvas width. Won't work without it even if you style it from CSS
canvas.height=tileSize*levelRows; // canvas height. Same as before
// simple WASD listeners
document.addEventListener("keydown", function(e){
console.log(e.keyCode);
switch(e.keyCode){
case 65:
leftPressed=true;
break;
case 87:
upPressed=true;
break;
case 68:
rightPressed=true;
break;
case 83:
downPressed=true;
break;
}
}, false);
document.addEventListener("keyup", function(e){
switch(e.keyCode){
case 65:
leftPressed=false;
break;
case 87:
upPressed=false;
break;
case 68:
rightPressed=false;
break;
case 83:
downPressed=false;
break;
}
}, false);
// function to display the level
function renderLevel(){
// clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// walls = red boxes
context.fillStyle = "#ff0000";
for(i=0;i<levelRows;i++){
for(j=0;j<levelCols;j++){
if(level[i][j]==1){
context.fillRect(j*tileSize,i*tileSize,tileSize,tileSize);
}
}
}
// player = green box
context.fillStyle = "#00ff00";
context.fillRect(playerXPos,playerYPos,tileSize,tileSize);
}
// this function will do its best to make stuff work at 60FPS - please notice I said "will do its best"
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
})();
// function to handle the game itself
function updateGame() {
// no friction or inertia at the moment, so at every frame initial speed is set to zero
playerXSpeed=0;
playerYSpeed=0;
// updating speed according to key pressed
if(rightPressed){
playerXSpeed=movementSpeed
}
else{
if(leftPressed){
playerXSpeed=-movementSpeed;
}
else{
if(upPressed){
playerYSpeed=-movementSpeed;
}
else{
if(downPressed){
playerYSpeed=movementSpeed;
}
}
}
}
// updating player position
playerXPos+=playerXSpeed;
playerYPos+=playerYSpeed;
// rendering level
renderLevel();
// update the game in about 1/60 seconds
requestAnimFrame(function() {
updateGame();
});
}
updateGame();
})();
And you can play the result here:
Use WASD keys to move around the level. Too bad walls do not stop you
WALL COLLISIONS
In a tile based engine filled only with square tiles, checking for collisions is very easy: unless the player is greater than a tile, you just have to check the four tiles the player can occupy in the worst case – when the body of the player touches the intersection of the tiles.
To prevent the player to break through tiles, simply stop it and bring it back to empty spaces before you render the level:
(function(){
var canvas = document.getElementById("canvas"); // the canvas where game will be drawn
var context = canvas.getContext("2d"); // canvas context
var levelCols=11; // level width, in tiles
var levelRows=9; // level height, in tiles
var tileSize=32; // tile size, in pixels
var playerCol=5; // player starting column
var playerRow=4; // player starting row
var leftPressed=false; // are we pressing LEFT arrow key?
var rightPressed=false; // are we pressing RIGHT arrow key?
var upPressed=false; // are we pressing UP arrow key?
var downPressed=false; // are we pressing DOWN arrow key?
var movementSpeed=3; // the speed we are going to move, in pixels per frame
var playerXSpeed=0; // player horizontal speed, in pixels per frame
var playerYSpeed=0; // player vertical speed, in pixels per frame
var level = [ // the 11x9 level - 1=wall, 0=empty space
[1,1,1,1,1,1,1,1,1,1,1],
[1,1,0,0,0,0,0,0,0,1,1],
[1,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,1,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,1,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,1,1],
[1,1,1,1,1,1,1,1,1,1,1]
];
var playerYPos=playerRow*tileSize; // converting Y player position from tiles to pixels
var playerXPos=playerCol*=tileSize; // converting X player position from tiles to pixels
canvas.width=tileSize*levelCols; // canvas width. Won't work without it even if you style it from CSS
canvas.height=tileSize*levelRows; // canvas height. Same as before
// simple WASD listeners
document.addEventListener("keydown", function(e){
console.log(e.keyCode);
switch(e.keyCode){
case 65:
leftPressed=true;
break;
case 87:
upPressed=true;
break;
case 68:
rightPressed=true;
break;
case 83:
downPressed=true;
break;
}
}, false);
document.addEventListener("keyup", function(e){
switch(e.keyCode){
case 65:
leftPressed=false;
break;
case 87:
upPressed=false;
break;
case 68:
rightPressed=false;
break;
case 83:
downPressed=false;
break;
}
}, false);
// function to display the level
function renderLevel(){
// clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// walls = red boxes
context.fillStyle = "#ff0000";
for(i=0;i<levelRows;i++){
for(j=0;j<levelCols;j++){
if(level[i][j]==1){
context.fillRect(j*tileSize,i*tileSize,tileSize,tileSize);
}
}
}
// player = green box
context.fillStyle = "#00ff00";
context.fillRect(playerXPos,playerYPos,tileSize,tileSize);
}
// this function will do its best to make stuff work at 60FPS - please notice I said "will do its best"
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
})();
// function to handle the game itself
function updateGame() {
// no friction or inertia at the moment, so at every frame initial speed is set to zero
playerXSpeed=0;
playerYSpeed=0;
// updating speed according to key pressed
if(rightPressed){
playerXSpeed=movementSpeed
}
else{
if(leftPressed){
playerXSpeed=-movementSpeed;
}
else{
if(upPressed){
playerYSpeed=-movementSpeed;
}
else{
if(downPressed){
playerYSpeed=movementSpeed;
}
}
}
}
// updating player position
playerXPos+=playerXSpeed;
playerYPos+=playerYSpeed;
// check for horizontal collisions
var baseCol = Math.floor(playerXPos/tileSize);
var baseRow = Math.floor(playerYPos/tileSize);
var colOverlap = playerXPos%tileSize;
var rowOverlap = playerYPos%tileSize;
if(playerXSpeed>0){
if((level[baseRow][baseCol+1] && !level[baseRow][baseCol]) || (level[baseRow+1][baseCol+1] && !level[baseRow+1][baseCol] && rowOverlap)){
playerXPos=baseCol*tileSize;
}
}
if(playerXSpeed<0){
if((!level[baseRow][baseCol+1] && level[baseRow][baseCol]) || (!level[baseRow+1][baseCol+1] && level[baseRow+1][baseCol] && rowOverlap)){
playerXPos=(baseCol+1)*tileSize;
}
}
// check for vertical collisions
baseCol = Math.floor(playerXPos/tileSize);
baseRow = Math.floor(playerYPos/tileSize);
colOverlap = playerXPos%tileSize;
rowOverlap = playerYPos%tileSize;
if(playerYSpeed>0){
if((level[baseRow+1][baseCol] && !level[baseRow][baseCol]) || (level[baseRow+1][baseCol+1] && !level[baseRow][baseCol+1] && colOverlap)){
playerYPos = baseRow*tileSize;
}
}
if(playerYSpeed<0){
if((!level[baseRow+1][baseCol] && level[baseRow][baseCol]) || (!level[baseRow+1][baseCol+1] && level[baseRow][baseCol+1] && colOverlap)){
playerYPos = (baseRow+1)*tileSize;
}
}
// rendering level
renderLevel();
// update the game in about 1/60 seconds
requestAnimFrame(function() {
updateGame();
});
}
updateGame();
})();
And this is the result:
Move the player with WASD keys and watch how collisions are managed.
Now, another problem pops out: try to exit from the “corridor” going up, then try to enter from left or right. You probably won’t be able to do it because you have the same size as a tile, so you will need a pixel-perfect movement to fit into such a tiny space.
That is why in these kind of games the player should be a little smaller than a tile. Also, this isn’t properly a platform game, since there’s no gravity and no way to jump.
But we’ll see it next time, meanwhile download the source code of all the examples.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.