Talking about Down The Mountain game, Game development, HTML5, Javascript and Phaser.
Welcome to another step in the Down the Mountain series. After a brief intro about the hexagonal concept behind the game and some basic player movement now it’s time to show you how to actually go down the mountain, with the mountain scrolling like in the original game. I made a lot of optimization to the code, and while there’s still space for even more optimization, now the player can go down the mountain with LEFT and RIGHT arrow keys, watching the mountain scrolling and having the endless runner feeling. Have a look at it: Run down the mountain with LEFT and RIGHT arrow keys, see how the mountain scrolls and how higher mountain blocks are removed from the game. Also, I don’t let the player move down the canvas too much, in this case I just increase scrolling speed. Last time I post uncommented code about this prototype, next update I will show you the final code with all comments.
window.onload = function() {
var game = new Phaser.Game(480, 480, Phaser.CANVAS, "", {preload: onPreload, create: onCreate, update: onUpdate});
var hexagonWidth = 70;
var hexagonHeight = 80;
var minRow = 0;
var gridSizeX = 5;
var gridSizeY = 9;
var marker;
var hexagonGroup;
var hexagonArray = [];
var cursors;
var playerCol = 2;
var playerRow = 0;
var playerMove = true;
function onPreload() {
game.load.image("hexagon", "hexagon.png");
game.load.image("marker", "marker.png");
}
function onCreate() {
hexagonGroup = game.add.group();
game.stage.backgroundColor = "#ffffff";
cursors = game.input.keyboard.createCursorKeys();
for(var i = 0; i < gridSizeY; i ++){
addHexagonRow(i);
}
hexagonGroup.x = (game.width - hexagonWidth * gridSizeX) / 2;
hexagonGroup.y = 20;
marker = game.add.sprite(hexagonGroup.width / 2, 20, "marker");
marker.anchor.setTo(0.5);
hexagonGroup.add(marker);
}
function onUpdate(){
if(playerMove){
if(cursors.left.isDown && cursors.right.isUp && (playerCol > 0 || (playerRow % 2 == 1))){
placeMarker(playerCol - (1 - playerRow % 2), playerRow + 1);
}
if(cursors.right.isDown && cursors.left.isUp && playerCol < gridSizeX - 1){
placeMarker(playerCol + (playerRow % 2), playerRow + 1);
}
if(gridSizeY - playerRow < 8){
addHexagonRow(gridSizeY);
gridSizeY ++;
}
}
if(marker.world.y > 60){
hexagonGroup.y -= 1;
}
if(marker.world.y > 240){
hexagonGroup.y -= (marker.world.y - 240);
}
var destroyedRow = false;
for(var i = minRow; i < gridSizeY; i ++){
for(var j = 0; j < gridSizeX; j ++){
if((i % 2 == 0 || j < gridSizeX - 1) && hexagonArray[i][j].world.y < 0){
hexagonArray[i][j].destroy();
destroyedRow = true;
}
}
}
if(destroyedRow){
minRow ++;
}
}
function placeMarker(posX, posY){
playerRow = posY;
playerCol = posX;
var nextX = hexagonWidth * (2 * posX + 1 + posY % 2) / 2;
var nextY = hexagonHeight * (3 * posY + 1) / 4;
playerMove = false;
var playerTween = game.add.tween(marker).to({
x: nextX,
y: nextY
}, 500, Phaser.Easing.Quadratic.InOut, true);
playerTween.onComplete.add(function(){
playerMove = true;
});
marker.bringToTop();
}
function addHexagonRow(i){
hexagonArray[i] = [];
for(var j = 0; j < gridSizeX - i % 2; j ++){
var hexagonX = hexagonWidth * j + (hexagonWidth / 2) * (i % 2);
var hexagonY = hexagonHeight * i / 4 * 3;
var hexagon = game.add.sprite(hexagonX, hexagonY, "hexagon");
var hexagonText = game.add.text(0 + hexagonWidth / 3 + 5, 0 + 15, i + "," + j);
hexagonText.font = "arial";
hexagonText.align = "center";
hexagonText.fontSize = 10;
hexagon.addChild(hexagonText);
hexagonGroup.add(hexagon);
hexagonArray[i][j] = hexagon;
}
}
}
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.