Membuat "Find A Way : Lets Connect Dots" dengan HTML5 Phaser

Diposting2016-11-24Diperbarui2022-01-27
html5 | phaser | tutorial

Setelah sebulan yang lalu saya menyelesaikan tutorial membuat duck shooter dengan unity, saya banyak mencoba beberapa game di google play, dan salah satunya adalah game puzzle dari Zero Logic Game yang berjudul Find A Way :Lets Connect

Game ini cukup menarik perhatian saya, karena gameplay yang simple serta banyak sekali level didalamnya, dan kali ini saya mencoba untuk membuat prototipe dari game tersebut dengan Phaser Framework

let's-connect

Inti dari game ini adalah membuat kalian diharuskan menghubungkan seluruh titik yang ada pada game tersebut. Simple memang tetapi karena ada level yang banyak sehingga game ini terlihat mengasikan.

Dan ini adalah contoh dari prototype yang saya kerjakan.

Cobalah untuk menyelesaikan game tersebut dengan menyatukan seluruh titik yang ada.

Ini adalah source code dari game tersebut : 

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
window.onload = function () {
    game = new Phaser.Game(480, 480, Phaser.AUTO);
    game.state.add("GameArea", Gamearea);
    game.state.start("GameArea");
}

var Gamearea = function (game) {};

Gamearea.prototype = {
    firstClick: true,
    nodeCheck: [],
    init: function () {
        this.scale.pageAlignHorizontally = true;
        this.scale.pageAlignVertically = true;
    },
    preload: function () {
        this.load.path = "assets/";
        game.stage.backgroundColor = "#3F7CB6";
        this.load.spritesheet('shape', 'simple-img.png', 50, 50);
    },

    create: function () {
        this.simpleShape = this.add.group();
        var firstCheck = false;
        for (var i = 0; i < 8; i++) {
            for (var j = 0; j < 8; j++) {
                var sShape = this.simpleShape.create(5 + 60 * i, 5 + 60 * j, 'shape');
                sShape.inputEnabled = true;
                sShape.arX = i;
                sShape.arY = j;
                sShape.isCheck = false;
                sShape.indexNumberArray = -1;
                if (!firstCheck) {
                    firstCheck = true;
                    sShape.indexNumberArray = 0;
                    sShape.isCheck = true;
                    sShape.tint = 0xFFF000;
                    this.nodeCheck.push(sShape);
                }
            }
        }
    },
    update: function () {
        if (this.input.activePointer.isDown) {
            this.simpleShape.forEach(this.clickShape, this);
            if (this.firstClick) this.firstClick = false;
        } else {
            if (!this.firstClick) this.firstClick = true;
        }
    },
    clickShape: function (whatNode) {
        if (whatNode.input.pointerOver()) {
            this.checkingLastNode(whatNode);
        }
    },
    checkingLastNode: function (newNode) {
        if (!newNode.isCheck) {
            var lastIntNode = this.nodeCheck.length - 1;
            var lastNode = this.nodeCheck[lastIntNode];
            if (lastNode.arX == newNode.arX) {
                if (lastNode.arY + 1 == newNode.arY || lastNode.arY - 1 == newNode.arY) {
                    var lastNode = this.nodeCheck[this.nodeCheck.length - 1];
                    lastNode.tint = 0xFFFFFF;
                    lastNode.isCheck = false;
                    lastNode.indexNumberArray = -1;
                    this.nodeCheck.pop();
                }
            } else { //is_cliciking
                var lastIntNode = this.nodeCheck.length - 2;
                var lastNode = this.nodeCheck[lastIntNode];
                if (newNode == lastNode) {
                    var removeNode = this.nodeCheck[this.nodeCheck.length - 1];
                    removeNode.tint = 0xFFFFFF;
                    removeNode.isCheck = false;
                    removeNode.indexNumberArray = -1;
                    this.nodeCheck.pop();
                    //console.log("aav");
                }
            }
        }
    },
    render: function () {
        //game.debug.pointer( game.input.activePointer );
    }
}

game ini memang masih belum sempurna, karena jika di mainkan lewat mobile, masih terdapat bug yang sampe saat ini saya belum mengerti kenapa 😣

Kalian juga bisa mengclone atau mendownload pada github saya 🙂

Cheers