無限疊的瓷磚（物體/精靈）在將相位器中的第一個拖動到最頂端之後

Question

我正在製作一個使用相位器的遊戲，並且我想使無限制的瓷磚可以像堆疊瓷磚一樣思考。當用戶拖動最上面的圖塊並將其放置在放置區域時，它下面的同一個圖塊應該顯示並且應該可拖動。

我的本次代碼： - `

var greenTile = this.add.sprite(250,500,'greenTile');  
        greenTile.inputEnabled=true; 
        greenTile.input.enableDrag(); 
        greenTile.events.onDragStart.add(onDragStart, this); 
        greenTile.events.onDragStop.add(onDragStop, this);` 

總代碼是我的比賽狀態是： - `

var patternsRatio = patternsRatio || {}; 
var x = 50; 
var y = 100; 
var canvas; 
var canvasBG; 
var canvasGrid; 
var canvasSprite; 
var canvasZoom = 32; 
var spriteWidth = 8; 
var spriteHeight = 8; 
patternsRatio.game1 = function() {}; 
patternsRatio.game1.prototype = {   
    preload: function() { 
    this.load.image('greenTile','assets/images/greentile.png') 
    this.load.image('redTile','assets/images/redtile.png') 
    }, 
    create: function() { 
     this.game.stage.setBackgroundColor(0x2d2d2d); 
     var question_l1 = "Puzzle 1: Enlarge this pattern by a factor of 2." 
     var style_l1 = {font: "25px Comic Sans MS Bold", fill: "#fff", align:"center"}; 
     var quet_l1=this.game.add.text(this.game.world.centerX,this.game.height-600, question_l1, style_l1) 
     quet_l1.anchor.setTo(0.5) 
     this.placetiles() 

     var greenTile = this.add.sprite(250,500,'greenTile');  
     greenTile.inputEnabled=true; 
     greenTile.input.enableDrag(); 
     greenTile.events.onDragStart.add(onDragStart, this); 
     greenTile.events.onDragStop.add(onDragStop, this); 

     var redTile = this.add.sprite(100,500,'redTile'); 
     redTile.inputEnabled=true; 
     redTile.input.enableDrag(); 
     redTile.events.onDragStart.add(onDragStart, this); 
     redTile.events.onDragStop.add(onDragStop, this); 


}, 
    update: function() { 

}, 
    placetiles: function() { 
     this.game.create.grid('drawingGrid', 16 * canvasZoom, 16 * canvasZoom, canvasZoom, canvasZoom, 'rgba(0,191,243,0.8)'); 
     canvas = this.game.make.bitmapData(spriteWidth * canvasZoom, spriteHeight * canvasZoom); 
     canvasBG = this.game.make.bitmapData(canvas.width + 2, canvas.height + 2); 

     canvasBG.rect(0, 0, canvasBG.width, canvasBG.height, '#fff'); 
     canvasBG.rect(1, 1, canvasBG.width - 2, canvasBG.height - 2, '#3f5c67'); 

     var x = 80; 
     var y = 64; 

     canvasBG.addToWorld(x, y); 
     canvasSprite = canvas.addToWorld(x + 1, y + 1); canvasZoom,canvasZoom 
     canvasGrid = this.game.add.sprite(x + 1, y + 1, 'drawingGrid'); 
     canvasGrid.crop(new Phaser.Rectangle(0, 0, spriteWidth * canvasZoom, spriteHeight * canvasZoom)); 

     } 

}; 

` 

，我也面臨着問題，當我增加了input.enable代碼在「greenTile」變量下面，然後redTile消失，任何可以告訴爲什麼會發生這種情況。 In the image below as we can see both red and green tile are appearing.

In this image as we can i had added input enable and the red Tile stopped appearing, Secondly as have dragged the green tile to the grid, i want on the original place their should be again the greenTile should come.(this is in reference to the stack able unlimited tile question)

Answer 1

我可以只需添加一個函數和調用它的拖拽開始事件，如下圖了這一點： -

，我添加的功能： -

addGreenTiles: function(){ 

    this.greenTile1 = this.add.sprite(250,500,'greenTile'); 
    this.greenTile1.inputEnabled=true; 
    this.greenTile1.input.enableSnap(canvasZoom, canvasZoom, false, true); 
    this.greenTile1.input.enableDrag(); 
    this.greenTile1.originalPosition = this.greenTile1.position.clone(); 
    this.greenTile1.events.onDragStart.add(this.addGreenTiles, this); 
    this.greenTile1.events.onDragStop.add(function(currentSprite){ 
      this.stopDrag(currentSprite, this.greenTile1); 
}, this); 

然後我把這個功能叫做：

this.greenTile1.events.onDragStart.add(this.addGreenTiles, this);