Talking about Space is Key game, Game development, HTML5, Javascript and Phaser.
Last month I showed you a quick but fully customizable Flash prototype of the addicting game Space is Key by Christopher Jeffrey, you can see it in the post “Create a Flash game like Space is Key with a lot of room for customization“.
Now it’s time to see how to achieve the same result with HTML5, using Phaser framework.
This is what you are about to create:
Click on the stage to jump.
And this is the source code of the page. I tried to keep the same order and the same comments I used in the AS3 version
<!doctype html>
<html>
<head>
<script src="phaser.min.js"></script>
<style>
body{margin:0}
</style>
<script type="text/javascript">
window.onload = function() {
// here we define a new 640x480 game, with three core functions:
// onPreload to be executed when the game preloads
// onCreate to be executed once the game is firstly created
// onUpdate to be called every time the game us updated
var game = new Phaser.Game(640,480,Phaser.CANVAS,"",{preload:onPreload, create:onCreate, update:onUpdate});
// the square!! the hero of the game
var theSquare;
// square's horizontal speed in pixels/frame
var xSpeed=4;
// square's jump height, in pixels
var jumpHeight=40;
// square's jump width, in pixels. xSpeed must divide jumpWidth
var jumpWidth=120;
// rotation performed at every jump, in degrees
var jumpRotation=180;
// time passed since the player started jumping, in frames
var jumpTime=0;
// is the player jumping?
var isJumping=false;
// simple degrees to radians conversion
var degToRad=0.0174532925;
// array containing all various floor y positions, in pixels
var floorY=Array(92,184,276,368,460);
// floor I am currently moving on
var currentFloor=0;
// floor height, in pixels
var floorHeight=20;
// x position where the level starts, in pixels
var levelStart=0;
// x position where the level ends, in pixels
var levelEnd=640;
// THE GAME IS PRELOADING
function onPreload() {
game.load.image("square", "square.png");
}
// THE GAME HAS BEEN CREATED
function onCreate() {
// simply drawing all floors, as lines from levelStart to levelEnd, tickness floorHeight
var floor = game.add.graphics(0,0);
floor.lineStyle(floorHeight, 0x440044, 1);
for(i=0;i<floorY.length;i++){
floor.moveTo(levelStart,floorY[i]+floorHeight/2);
floor.lineTo(levelEnd,floorY[i]+floorHeight/2);
}
// adding the hero
theSquare=game.add.sprite(levelStart,floorY[currentFloor]-game.cache.getImage("square").height/2,"square");
theSquare.anchor.setTo(0.5,0.5);
// event listener for mouse down
game.input.onDown.add(jump, this);
}
function jump(){
// if we aren't jumping... then JUMP!!
if (! isJumping) {
jumpTime=0;
isJumping=true;
}
}
// THE GAME IS GOING TO BE UPDATED
function onUpdate() {
// temp variable to let us know if we are on an odd or even floor
var mod=currentFloor%2;
// updating square x position
theSquare.x+=xSpeed*(1-2*mod);
// if the square reached the end of the floor...
if (theSquare.x>levelEnd&&mod==0||theSquare.x<levelStart&&mod==1) {
// move onto next floor
currentFloor++;
// if we just finished the lowest floor...
if (currentFloor>floorY.length-1) {
// start the game again
currentFloor=0;
}
// even or odd?
mod=currentFloor%2
// we start on the ground
isJumping=false;
theSquare.rotation=0;
theSquare.x=levelEnd*mod+levelStart*(1-mod);
theSquare.y=floorY[currentFloor]-game.cache.getImage("square").height/2;
}
// if we are jumping...
if (isJumping) {
// calculating the number of frames we will be jumping
var jumpFrames=jumpWidth/xSpeed;
// calculating how many degrees should the square rotate at each frame
var degreesPerFrame=jumpRotation/jumpFrames*(1-2*mod);
// calculating how may radians we have to apply to sine trigonometry function to simulate player jump
var radiansPerFrame=(180/jumpFrames)*degToRad
// anohter frame jumping...
jumpTime++;
// updating rotation
theSquare.angle+=degreesPerFrame;
// updating y position
theSquare.y=floorY[currentFloor]-game.cache.getImage("square").height/2-jumpHeight*Math.sin(radiansPerFrame*jumpTime);
// if we jumped enough...
if (jumpTime==jumpFrames) {
// ... just stop jumping
isJumping=false;
theSquare.y=floorY[currentFloor]-game.cache.getImage("square").height/2;
}
}
}
function onRender(){
}
};
</script>
</head>
<body>
</body>
</html>
As you can see, it’s very easy to port your AS3 works in HTML5 using Phaser.
Download the source code with all needed libraries.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.