相位器检查精灵是否在另一个不工作的精灵内

Phaser check if sprite is inside another sprite not working?

本文关键字：精灵 工作 另一个 是否 检查      更新时间：2023-09-26

我正在使用此JS检查一个精灵是否在另一个精灵中。

    if (ball.x > cup.x &&
        ball.x + ball.width < cup.x + cup.width &&
        ball.y > cup.y &&
        ball.y + ball.height < cup.y + cup.height) {
        game.paused = true;
    }

所以我正在检查我的"球"精灵是否在"杯子"的边界矩形内。

然而，有时比赛并没有暂停，尽管从视觉上我可以看到"球"在"杯子"里。我的条件语句是正确的，对吧？有时它按预期工作，有时却没有，这非常令人沮丧，因为它不会生成可跟踪的错误消息。。。

index.html

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
<body>
<script src="js/phaser.min.js"></script>
<script src="js/game.js"></script>
</body>
</html>

game.js

window.onload = function() {
    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
    function preload() {
        game.load.image('table', 'assets/img/table.png');
        game.load.image('cup', 'assets/img/cup.png');
        game.load.image('ball', 'assets/img/ball.png');
    }
    var table;
    var cups;
    var p1cups;
    var p2cups;
    var ball;
    var bounces = 0;
    var ballAscending = true;
    var ballThrown = false;
    var checkCollisions = true;
    var goalScored = false;
    var cupW;
    var cupH;
    var gameOver = false;
    var clickTime;
    function create() {
        game.physics.startSystem(Phaser.Physics.ARCADE);
        table = game.add.sprite(game.world.centerX, game.world.centerY, 'table');
        table.anchor.setTo(0.5,0.5);
        cupW = game.cache.getImage('cup').width;
        cupH = game.cache.getImage('cup').height;
        p1cups = game.add.group();
        p1cups.create(game.world.centerX, cupH / 2, 'cup');
        p1cups.create(game.world.centerX - cupW, cupH / 2, 'cup');
        p1cups.create(game.world.centerX + cupW, cupH / 2, 'cup');
        p1cups.create(game.world.centerX - cupW / 2, cupH + (cupH / 2), 'cup');
        p1cups.create(game.world.centerX + cupW / 2, cupH + (cupH / 2), 'cup');
        p1cups.create(game.world.centerX, (cupH * 2) + (cupH / 2), 'cup');
        p2cups = game.add.group();
        p2cups.create(game.world.centerX, game.world.height - (cupH / 2), 'cup');
        p2cups.create(game.world.centerX - cupW, game.world.height - (cupH / 2), 'cup');
        p2cups.create(game.world.centerX + cupW, game.world.height - (cupH / 2), 'cup');
        p2cups.create(game.world.centerX - cupW / 2, game.world.height - (cupH / 2) - cupH, 'cup');
        p2cups.create(game.world.centerX + cupW / 2, game.world.height - (cupH / 2) - cupH, 'cup');
        p2cups.create(game.world.centerX, game.world.height - (cupH / 2) - (cupH * 2), 'cup');
        ball = game.add.sprite(game.world.centerX, game.world.centerY + (cupH*4),'ball');
        ball.anchor.setTo(0.5,0.5);
        ball.z = 0;
        ball.checkWorldBounds = true;
        ball.events.onOutOfBounds.add(restart,this);
        game.physics.enable([ball, p1cups,p2cups],Phaser.Physics.ARCADE);
        p1cups.forEach(function(item) {
            item.anchor.setTo(0.5);
            item.body.immovable = true;
        },this);
        p2cups.forEach(function(item) {
            item.anchor.setTo(0.5);
            item.body.immovable = true;
        },this);
        ball.body.bounce.set(0.50);
        ball.body.drag.set(20);
        ball.body.allowRotation = false;
        game.stage.backgroundColor = "#d3d3d3";
        game.input.onDown.add(onDown,this);
        game.input.onUp.add(throwBall,this);
        console.log(ball.scale);
    }
    function onDown() {
        clickTime = game.time.time;
    }
    function throwBall() {
        if (ballThrown == false) {
            var delta = game.time.time - clickTime;
            game.physics.arcade.velocityFromAngle(ball.angle, delta, ball.body.velocity);
            ballThrown = true;  
        }   
    }
    function update() {
        ball.rotation = game.physics.arcade.angleToPointer(ball);
        if (ballThrown) {
            game.physics.arcade.collide(ball,p1cups,collisionHandler,collisionProcess,this);    
            game.physics.arcade.collide(ball,p2cups,collisionHandler,collisionProcess,this);
            if (ballAscending) {
                ball.z = ball.z + 2;
                if (ball.z > 100 - bounces * 20) {
                    ballAscending = false;
                }
            } else {
                ball.z = ball.z - 2;
                if (ball.z < 1) {
                    bounces = bounces + 1;
                    ballAscending = true;
                }
            }
            ball.scale.set((ball.z + 100) / 100);
            if (Math.abs(ball.body.velocity.x) < 1 && Math.abs(ball.body.velocity.y) < 1 && ball.scale.x == 1) {
                restart();
            }
        }
    }
    function restart() {
        ball.body.velocity.set(0);
        ball.inputEnabled = true;
        ball.z = 0;
        bounces = 0;
        ball.position.x = game.world.centerX;
        ball.position.y = game.world.centerY + (cupH*4);
        ball.scale.set(1);
        ballThrown = false;
        checkCollisions = true;
        goalScored = false;
    }
    function collisionHandler(ball,cup) {
        return true;
    }
    function collisionProcess(ball,cup) {
        if (ball.x > cup.x &&
            ball.x + ball.width < cup.x + cup.width &&
            ball.y > cup.y &&
            ball.y + ball.height < cup.y + cup.height) {
            game.paused = true;
        }
        return false;
    }
}

如果要检查相位器矩形是否包含在另一个矩形中，可以使用Phaser.Rectangle.containsRect函数。

由于精灵是一个相位器矩形，你可以这样做：

var a = game.add.sprite(100,100, 'a');
var b = game.add.sprite(120,120, 'b');
game.physics.arcade.enable(a);
game.physics.arcade.enable(b);
// this will print whether or not a is contained inside b
console.log(Phaser.Rectangle.containsRect(a.body, b.body));

哦，顺便说一句，你正在使用街机物理系统。。。如果你正在寻找复杂的几何动作，你可能应该使用P2系统；）

相关文章：