Membuat “Find A Way : Lets Connect Dots” dengan HTML5 Phaser

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 :

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){           //console.log("down or up from last node");           newNode.tint = 0xFFF000;           newNode.isCheck = true;           newNode.indexNumberArray = this.nodeCheck.length;           this.nodeCheck.push(newNode);         }       }       else if(lastNode.arY == newNode.arY){         if(lastNode.arX+1 == newNode.arX || lastNode.arX-1 == newNode.arX){           //console.log("left or right from last node");           newNode.tint = 0xFFF000;           newNode.isCheck = true;           newNode.indexNumberArray = this.nodeCheck.length;           this.nodeCheck.push(newNode);         }       }     }     else{       if(this.firstClick){         var removeNodeUntil = newNode.indexNumberArray+1;         while(this.nodeCheck.length > removeNodeUntil){
          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

Leave a Reply

Your email address will not be published. Required fields are marked *