相位器检查子画面是否在另一个子画面内不起作用？
[英]Phaser check if sprite is inside another sprite not working?
问题描述
I am checking if one sprite is inside another sprite using this JS. 
我正在使用此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;
}
So I am checking if my 'ball' sprite is inside the bounding rectangle of 'cup'. 因此，我正在检查我的“球”子画面是否在“杯子”的边界矩形内。
However, sometimes the game is not being paused, even though visually I can see that 'ball' is inside 'cup'. 但是，有时游戏不会暂停，即使从视觉上我可以看到“球”位于“杯”中。 My conditional statement is correct, right? 我的条件陈述是正确的，对吗？ Sometimes it works as intended, sometimes it doesn't, which is extremely frustrating as it generates no tracable error messages... 有时它会按预期运行，有时却无法按预期运行，这非常令人沮丧，因为它不会产生可跟踪的错误消息...
index.html 的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 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;
}
}
1 个解决方案
解决方案1
1 2015-09-13 06:53:14
If you want to check whether or not a phaser rectangle is contained into another rectangle, you can use the Phaser.Rectangle.containsRect function. 如果要检查另一个矩形是否包含相位器矩形，可以使用Phaser.Rectangle.containsRect函数。
Since a sprite is a phaser rectangle, you can do this: 由于精灵是相位器矩形，因此您可以执行以下操作：
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));
ohbtw, you are using the arcade physics system... if you are looking for complex geometric maneuvers, you should probably use the P2 system ;) 噢，您正在使用街机物理系统...如果您正在寻找复杂的几何动作，则可能应该使用P2系统;）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.