javascript - Phaser.io 中的 setSize

Question

我使用的是最新的 phaser.io 版本，但我收到一个可能与这些行有关的错误:

Phaser.Rectangle.contains(e.body, game.input.activePointer.x, game.input.activePointer.y);

和

shapesprite.body.setSize(30, 30, 0, 0);

我已经注释掉了上面的行，它有点起作用，但后来我得到了这个错误:

Game.js:195 Uncaught TypeError: Cannot read property 'setSize' of null

我想我的 sprite 有 18 个部分要通读。

Here is the sprite image. The left column is the unclicked state, and then right column is the clicked state

我的代码:

gameObj.Game = function (game) {
    //step 1
    var myTime;
    var gameSeconds; //total game seconds
    var timerSeconds = "0"; //current timer in seconds
    var secondsLeft; //total game seconds - current timer second
    var points;
    var pointsShow;
};
var tile_size = 69;

gameObj.Game.prototype = {
    create: function () {
        var border = this.add.sprite(this.world.centerX, this.world.centerY, 'border');
        border.anchor.setTo(0.5, 0.5);

    var stroke = this.add.sprite(this.world.centerX + 30, this.world.centerX - 450, 'stroke');
    points = 0;
    gameObj.finalScore = points;
    var currentTarg = this.add.sprite(this.world.centerX + 200, this.world.centerX - 125, 'currenttarget');

    this.shapes = this.add.group();
    this.shapes.createMultiple(36, 'shapesprite');

    this.shapes.setAll('inputEnabled', true);
    this.shapes.setAll('input.useHandCursor', true);

    var progressbackground = this.add.sprite(this.world.centerX + 90, this.world.centerX - 380, 'progressbg');

    var myPercentStyle = {
        font: "400 24px Architects Daughter",
        fill: "#000",
        align: "center"
    };
    pointsShow = this.add.text(this.world.centerX + 195, this.world.centerX - 300, points + '%', myPercentStyle);

    var myProgress = "Progress of \nShape Painting"
    var myProgressStyle = {
        font: "400 18px Architects Daughter",
        fill: "#000",
        align: "center"
    };
    var myProgressShow = this.add.text(this.world.centerX + 160, this.world.centerX - 360, myProgress, myProgressStyle);

    var currentTargText = "Mix colors and make a:"
    var currentTargStyle = {
        font: "400 18px Architects Daughter",
        fill: "#000",
        align: "center"
    };
    var currentTargShow = this.add.text(this.world.centerX + 135, this.world.centerX - 220, currentTargText, currentTargStyle);

    var targetBg = this.add.sprite(this.world.centerX + 140, this.world.centerX - 190, 'targetbg');




    var timerbackground = this.add.sprite(this.world.centerX + 90, this.world.centerY + 120, 'timerbg');


    var myTimeText = "Time until Art Show:";
    var myTimeTextStyle = {
        font: "400 24px Architects Daughter",
        fill: "#000",
        align: "center"
    };
    var myTimeShow = this.add.text(this.world.centerX + 110, this.world.centerX + 35, myTimeText, myTimeTextStyle);

    var myTime = "2:00"
    var myTimeStyle = {
        font: "400 35px Architects Daughter",
        fill: "#000",
        align: "center"
    };


    myTimerShow = this.add.text(this.world.centerX + 190, this.world.centerX + 70, myTime, myTimeStyle);

    tmpWinnerBtn = this.add.button(100, 200, 'btn_winner', this.winnerFun, this, 1, 0, 2);
    tmpWinnerBtn.anchor.setTo(0.5, 0.5);

    tmpLoserBtn = this.add.button(200, 200, 'btn_loser', this.loserFun, this, 1, 0, 2);
    tmpLoserBtn.anchor.setTo(0.5, 0.5);
    //timevars 
    tmpPointsBtn = this.add.button(300, 100, 'points_btn', this.pointsIncrease, this, 1, 0, 2);


    gameSeconds = 120;
    timerSeconds = 0;
    secondsLeft = 0;

    //create timer object
    timerObj = this.game.time.create(false);
    //set a timer event to occur every 1 second
    timerObj.loop(1000, this.updateTimer, this);
    //start the timer running
    timerObj.start();


    //        this.combo_s = this.game.add.audio('combo');

    this.clicked = false;
    this.count = 0;
    this.moves = 0;
    this.type = -1;
    this.deleted_shapes = [];
    this.pos_i = -1;
    this.pos_j = -1;
    this.offset_x = 120;
    this.offset_y = 150;
    this.next_time = 0;
    score = 0;
    //this.width=69;
    this.build_world();
},

update: function () {

    this.shapes.forEachAlive(function (e) {
        if (e.scale.x == 2) e.kill();
    }, this);

    if (game.input.activePointer.isDown && game.time.now > this.next_time) {
        this.clicked = true;
        this.try_select_a_shapesp();
    }


    if (game.input.activePointer.isUp && this.clicked) {
        if (this.count > 1) {
            this.remove_selected_shapes();
            this.move_shapes_down();
            this.add_missing_shapes();

        } else
            this.unselect_all_shapes();

        //this.next_time = game.time.now + 300;
        this.count = 0;
        this.clicked = false;
        this.type = -1;
        this.pos_i = -1;
        this.pos_j = -1;
    }
},
build_world: function () {
    for (var i = 0; i < 6; i++)
        for (var j = 0; j < 6; j++)
            this.add_shapesp(i, j, true);
},
add_shapesp: function (i, j, type) {
    var shapesprite = this.shapes.getFirstExists(false);

    var r = rand(3);
    if (r == 1) shapesprite.frame = 2;
    else if (r == 3) shapesprite.frame = 6;
    else if (r == 2) shapesprite.frame = 4;
    //        else if (r == 2) shapesprite.frame = 4;
    //        else if (r == 3) shapesprite.frame = 6;

    //        else if (r == 4) shapesprite.frame = 8;
    //        else if (r == 5) shapesprite.frame = 10;
    //        //        else if (r == 6) shapesprite.frame = 12;
    //        else if (r == 7) shapesprite.frame = 14;
    //        //        else if (r == 8) shapesprite.frame = 16;
    //        else if (r == 9) shapesprite.frame = 18;
    //        //        else if (r == 10) shapesprite.frame = 20;
    //        else if (r == 11) shapesprite.frame = 22;
    //        //        else if (r == 12) shapesprite.frame = 24;
    //        else if (r == 13) shapesprite.frame = 26;
    //        else if (r == 14) shapesprite.frame = 28;
    //        //        else if (r == 15) shapesprite.frame = 30;
    //        else if (r == 16) shapesprite.frame = 32;
    //        else if (r == 17) shapesprite.frame = 34;
    //        else if (r == 18) shapesprite.frame = 36;


    shapesprite.anchor.setTo(0.5, 0.5);
    shapesprite.selected = false;
    shapesprite.pos_i = i;
    shapesprite.pos_j = j;
    shapesprite.move_y = 0;
    shapesprite.move_x = 1;

    shapesprite.body.setSize(30, 30, 0, 0);
    shapesprite.alpha = 1;
    shapesprite.scale.setTo(5, 1);
    shapesprite.alive2 = true;
    shapesprite.reset(this.offset_x + j * tile_size, this.offset_y + i * tile_size);

    if (type)
        this.game.add.tween(shapesprite.scale).delay(j * 100 + 1).to({
            x: 1,
            y: 1
        }, 400).start();
    else
        this.game.add.tween(shapesprite.scale).delay(400).to({
            x: 1,
            y: 1
        }, 400).start();
},

try_select_a_shapesp: function (e) {
    this.shapes.forEachAlive(function (e) {
        var bool = Phaser.Rectangle.contains(e.body, game.input.activePointer.x, game.input.activePointer.y);

        if (e.selected || !bool) {
            //console.log('hi');
            return;
        }


        if (this.type == -1)
            this.type = e.frame;

        if (this.type == e.frame && this.in_range(e))
            this.select_a_shapesp(e);
        else
            this.unselect_all_shapes();
    }, this);
},

select_a_shapesp: function (e) {


    e.selected = true;
    e.frame += 1;
    this.count += 1;
    this.pos_j = e.pos_j;
    this.pos_i = e.pos_i;
    // this.increase_bar();
},

remove_selected_shapes: function (e) {
    this.shapes.forEachAlive(function (e) {
        if (!e.selected)
            return;

        this.game.add.tween(e.scale).to({
            x: 2,
            y: 2
        }, 300).start();
        this.game.add.tween(e).to({
            alpha: 0
        }, 300).start();
        this.deleted_shapes.push({
            i: e.pos_i,
            j: e.pos_j
        });
        e.alive2 = false;
    }, this);
},

unselect_all_shapes: function () {
    this.count = 0;
    this.shapes.forEachAlive(function (e) {
        if (e.selected) {
            e.selected = false;
            e.frame -= 1;
        }
    }, this);
    this.clear_bar();
},

move_shapes_down: function () {
    for (var i = 0; i < this.deleted_shapes.length; i++) {
        var tmp_i = this.deleted_shapes[i].i;
        var tmp_j = this.deleted_shapes[i].j;

        this.shapes.forEachAlive(function (e) {
            if (!e.selected && e.pos_j == tmp_j && e.pos_i < tmp_i)
                e.move_y += tile_size;
        }, this);
    }

    this.shapes.forEachAlive(function (e) {
        if (e.move_y == 0)
            return;

        var coef = e.move_y / tile_size;
        e.pos_i += coef;
        this.add.tween(e).delay(100).to({
            y: e.y + e.move_y
        }, 100 * coef).start();
        e.move_y = 0;
    }, this);

    this.deleted_shapes = [];
},

add_missing_shapes: function () {
    var min = [6, 6, 6, 6, 6, 6];

    this.shapes.forEachAlive(function (e) {
        if (e.pos_i < min[e.pos_j] && e.alive2)
            min[e.pos_j] = e.pos_i;
    }, this);

    for (var i = 0; i < 6; i++)
        for (var j = 0; j < min[i]; j++)
            this.add_shapesp(j, i, false);
},

update_score_and_labels: function () {


    this.clear_bar();
    this.game.state.start('End');
},


in_range: function (d) {
    if (this.pos_j == -1) return true;

    return (this.pos_j - 1 == d.pos_j && this.pos_i == d.pos_i) ||
        (this.pos_j + 1 == d.pos_j && this.pos_i == d.pos_i) ||
        (this.pos_j == d.pos_j && this.pos_i - 1 == d.pos_i) ||
        (this.pos_j == d.pos_j && this.pos_i + 1 == d.pos_i);
},
clear_bar: function () {
    this.game.add.tween(this.progress).to({

    }, 300).start();
},

add_tuto: function () {
    this.tuto = this.game.add.button(0, 0, 'tuto', this.remove_tuto, this);
},

updateTimer: function () {
    //console.log('hola');
    timerSeconds++;


    if (timerSeconds <= gameSeconds) {
        secondsLeft = gameSeconds - timerSeconds;
        //
        displayMin = Math.floor(secondsLeft / 60) % 60;
        displaySec = Math.floor(secondsLeft) % 60;
        //
        if (displayMin < 10) {
            displayMin = "" + displayMin;
        }
        if (displaySec < 10) {
            displaySec = "0" + displaySec;
        }
        myTimerShow.setText(displayMin + ":" + displaySec);
    } else {
        timerSeconds = 0;
        this.loserFun();
    }
},
pointsIncrease: function () {
    //console.log("increase");
    gameObj.finalScore += 10;
    points = gameObj.finalScore;
    pointsShow.setText(points + "%");

    if (points == 100) {
        this.game.state.start('Winner');
    }
},
winnerFun: function () {
    gameObj.finalTime = timerSeconds;
    this.state.start('Winner');
},
loserFun: function () {
    gameObj.finalTime = timerSeconds;
    this.state.start('Loser');
}
};

Answer 1

在您的代码中，您没有在shapesprite 上启用物理。在您首先执行此操作之前，他们不会有您可以访问的机构:

这是一种方法:http://phaser.io/examples/v2/arcade-physics/group-vs-self