Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Down The Mountain game, Game development, HTML5, Javascript and Phaser.

Last week I showed you the hexagonal concept behind iOS blockbuster Down The Mountain based on my tutorial how to find adjacent tiles in hexagonal maps – ALL and EVERY case explained, now it’s time to make the player actually go down the mountain. You will play with left and right arrow keys, to go down respectively on the left or on the right of the current block/hexagon. If you reach the bottom of the mountain or fall from the left or right edges, you will restart. Have a look at what we are going to do:
Move the player with left and right arrow keys. The code is not optimised at all so it’s still uncommented, but I am adding comments – and features – next week, meanwhile have a look at the code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
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 gridSizeX = 9;
    var gridSizeY = 7;
    var columns = [Math.ceil(gridSizeX / 2),Math.floor(gridSizeX / 2)];
    var moveIndex;
    var sectorWidth = hexagonWidth;
    var sectorHeight = hexagonHeight / 4 * 3;
    var gradient = (hexagonHeight / 4) / (hexagonWidth / 2);
    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 / 2; i ++){
            hexagonArray[i] = [];
            for(var j = 0; j < gridSizeX; j ++){
                if(gridSizeY % 2 == 0 || i + 1 < gridSizeY / 2 || j % 2 == 0){
                    var hexagonX = hexagonWidth * j / 2;
                    var hexagonY = hexagonHeight * i * 1.5 + (hexagonHeight / 4 * 3) * (j % 2);
                    var hexagon = game.add.sprite(hexagonX, hexagonY, "hexagon");
                    hexagonGroup.add(hexagon);
                    hexagonArray[i][j] = hexagon;
                    var hexagonText = game.add.text(hexagonX + hexagonWidth / 3 + 5, hexagonY + 15, (i * 2 + j % 2) + "," + Math.floor(j / 2));
                    hexagonText.font = "arial";
                    hexagonText.fontSize = 12;
                    hexagonGroup.add(hexagonText);
                }
            }
        }
        hexagonGroup.x = (game.width - hexagonWidth * Math.ceil(gridSizeX / 2)) / 2;
        if(gridSizeX % 2 == 0){
            hexagonGroup.x -= hexagonWidth / 4;
        }
        hexagonGroup.y = (game.height - Math.ceil(gridSizeY / 2) * hexagonHeight - Math.floor(gridSizeY / 2) * hexagonHeight / 2) / 2;
        if(gridSizeY % 2 == 0){
            hexagonGroup.y -= hexagonHeight / 8;
        }
        marker = game.add.sprite(0, 0, "marker");
        marker.anchor.setTo(0.5);
        marker.visible=false;
        hexagonGroup.add(marker);
        placeMarker(playerCol, playerRow);         
    }
     
    function onUpdate(){
        if(playerMove){
            if(cursors.left.isDown && cursors.right.isUp){
                playerCol -= (1 - playerRow % 2);
                playerRow ++;  
                placeMarker(playerCol, playerRow);
                playerMove = false;
            }
            if(cursors.right.isDown  && cursors.left.isUp){            
                playerCol += (playerRow % 2);
                playerRow ++;  
                placeMarker(playerCol, playerRow);
                playerMove = false;
            }
        }
        else{
            if(cursors.right.isUp  && cursors.left.isUp){
                playerMove = true;
            }
        }
    }    
      
    function placeMarker(posX,posY){
        if(posY > 6 || posX < 0 || posX > Math.floor(gridSizeX / 2) - posY % 2){
            posX = 2;
            posY = 0;
            playerCol = 2;
            playerRow = 0;
        }
        for(var i = 0; i < gridSizeY / 2; i ++){
            for(var j = 0; j < gridSizeX; j ++){
                if(gridSizeY % 2 == 0 || i + 1 < gridSizeY / 2 || j % 2 == 0){
                    hexagonArray[i][j].tint = 0xffffff;
                }
            }
        }
        if(posX < 0 || posY < 0 || posY >= gridSizeY || posX > columns[posY % 2] - 1){
            marker.visible = false;
        }
        else{
            marker.visible = true;
            marker.x = hexagonWidth * posX;
            marker.y = hexagonHeight / 4 * 3 * posY + hexagonHeight / 2;
            if(posY % 2 == 0){
                marker.x += hexagonWidth / 2;
            }
            else{
                marker.x += hexagonWidth;
            }
            var markerX = posX * 2 + posY % 2;
            var markerY = Math.floor(posY / 2);
            hexagonArray[markerY][markerX].tint = 0x00ff00;
            if(markerY + markerX % 2 < gridSizeY / 2 && (gridSizeY % 2 == 0 || markerY < Math.floor(gridSizeY / 2))){
                // left
                if(markerX - 1 >= 0){
                    hexagonArray[markerY + markerX % 2][markerX - 1].tint = 0xff0000;
                }
                // right
                if(markerX + 1 < gridSizeX){
                    hexagonArray[markerY + markerX % 2][markerX + 1].tint = 0xff0000;
                }
            }
        }
    }  
}
Next time I am going to add deadly tiles and scrolling, to turn this prototype into a full endless runner game, meanwhile you can 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.