Talking about String Avoider game, Game development, HTML5, Javascript and Phaser.
Last summer I showed you how to create an HTML5 String Avoider game made with Phaser, but at that time Phaser was 2.0.5 version while now we have 2.2 released with a lot of new features, and above all now it works on iOS browsers.
This is the game, move the mouse around the maze and don’t let the string touch the walls:
You can play directly on your mobile devices going to this link.
And this is the source code, already explained in the original post.
<!doctype html>
<html>
<head>
<script src="phaser.min.js"></script>
<style>
body{margin:0;background-color:black}
</style>
<script type="text/javascript">
window.onload = function() {
var game = new Phaser.Game(320,480,Phaser.CANVAS,"",{
preload:onPreload,
create:onCreate,
update:onUpdate
});
var tailLength=1;
var tailNodes=300;
var nodes = [];
var canvas;
var bitmap;
// THE GAME IS PRELOADING
function onPreload() {
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.setScreenSize(true);
game.load.image("maze", "maze.png");
for (i=0; i<tailNodes; i++) {
nodes[i]={
x:0,
y:0
};
};
}
// THE GAME HAS BEEN CREATED
function onCreate() {
bitmap = game.make.bitmapData(320,480);
bitmap.draw("maze");
bitmap.update();
game.add.sprite(0,0,bitmap);
canvas = game.add.graphics(0,0);
}
// THE GAME IS GOING TO BE UPDATED
function onUpdate() {
canvas.clear();
canvas.alpha=1;
canvas.lineStyle(2,0x00ff00,1);
var headX=game.input.x;
var headY=game.input.y;
canvas.moveTo(headX,headY);
nodes[0]={
x:headX,
y:headY
};
for(var i=1;i<tailNodes-1;i++){
var nodeAngle = Math.atan2(nodes[i].y-nodes[i-1].y,nodes[i].x-nodes[i-1].x);
nodes[i]={
x: nodes[i-1].x+tailLength*Math.cos(nodeAngle),
y: nodes[i-1].y+tailLength*Math.sin(nodeAngle)
}
var color = bitmap.getPixelRGB(Math.round(nodes[i].x),Math.round(nodes[i].y));
if(color.a!=0){
canvas.lineStyle(2,0xff0000,1)
}
canvas.lineTo(nodes[i].x,nodes[i].y);
}
}
};
</script>
</head>
<body>
</body>
</html>
Now that everything works next time I am showing you a cool game prototype, meanwhile download the source code of the entire project.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.