在移相器中将第一个拖到最上面的一个后，队列中无限堆叠的图块（object/sprite）

Question

我正在使用 Phaser 制作游戏，我想制作无限数量的瓷砖，就像堆叠的瓷砖一样。当用户拖动最上面的图块并将其放置在放置区域时，它下面的相同图块应该出现并且应该可以拖动。

我现在的代码：- `

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));

        }

};

`

当我在 "greenTile" 变量下方添加 input.enable 代码时，我也遇到了问题，然后 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);

在移相器中将第一个拖到最上面的一个后，队列中无限堆叠的图块（object/sprite）

unlimited stack of tile(object/sprite) in que after dragging the first to toppest one in phaser

javascript

phaser-framework