代码之家 › 专栏 › 技术社区 › Vuxer

为什么我的乒乓球比赛中的球会这样?

collision-detection 2d javascript

Vuxer · 技术社区 · 7 年前

当球在一定角度下时,球会被困在桨中,直到球穿过。以下是冲突代码:

if(ball.x + ball.radius > player2.x && ball.y + ball.radius > player2.y && ball.y - ball.radius < player2.y + player2.height || ball.x - ball.radius < player1.x + 20 && ball.y + ball.radius > player1.y && ball.y - ball.radius < player1.y + player1.height) {
        ball.speedX = -ball.speedX;
    }

var ctx = document.getElementById("canvas").getContext('2d');

var player1 = {
	x:10,
	y:200,
	height:100,
	speed:10,
	leftPressed:false,
	rightPressed:false,
	upPressed:false,
	downPressed:false,
	points: 0
	},
	player2 = {
		x:770,
		y:355,
		height:100,
		speed:5,
		rightPressed:false,
		leftPressed:false,
		upPressed:false,
		downPressed:false,
		points: 0
	},
	ball = {
		x:400,
		y:250,
		radius: 10,
		speedX:8,
		speedY:2
	};

function drawPlayers() {
	ctx.fillRect(player1.x, player1.y, 20, player1.height);
	ctx.fillRect(player2.x, player2.y, 20, player2.height);	
}

function drawBall() {
	ctx.beginPath();
	ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
	ctx.fill();
}

function drawPoints() {
	ctx.font = "17px Arial";
	ctx.fillText("Points:" + player1.points, 10, 20);
	ctx.fillText("Points:" + player2.points, 730, 20);

}

function update() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	drawPlayers();
	drawBall();
	drawPoints();

	if(player1.leftPressed){
		player1.x -=player1.speed;
	}
	if(player1.rightPressed){
		player1.x +=player1.speed;
	}
	if(player1.upPressed){
		player1.y -=player1.speed;
	}
	if(player1.downPressed){
		player1.y +=player1.speed;
	}

	if(player2.leftPressed){
		player2.x -=player2.speed;
	}
	if(player2.rightPressed){
		player2.x +=player2.speed;
	}
	if(player2.upPressed){
		player2.y -=player2.speed;
	}
	if(player2.downPressed){
		player2.y +=player2.speed;
	}

	ball.x += ball.speedX;
	ball.y += ball.speedY;

	if(ball.x + ball.radius > canvas.width) {
		player1.points ++;
		ball.x = 400;
		ball.y = 250;
	}
	else if(ball.x - ball.radius < 0) {
		player2.points ++;
		ball.x = 400;
		ball.y = 250;

	}

	if(ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
		ball.speedY = -ball.speedY;
	}

	if(ball.x + ball.radius > player2.x && ball.y + ball.radius > player2.y && ball.y - ball.radius < player2.y + player2.height || ball.x - ball.radius < player1.x + 20 && ball.y + ball.radius > player1.y && ball.y - ball.radius < player1.y + player1.height) {
		ball.speedX = -ball.speedX;
	}	

	requestAnimationFrame(update);
}

update();

document.body.addEventListener("keydown", function(e) {
	//left
	if(e.keyCode === 65) {
		player1.leftPressed = true;
	}
	//right
	if(e.keyCode === 68) {
		player1.rightPressed = true;
	}
	//up
	if(e.keyCode === 87) {
		player1.upPressed = true;
	}
	//down
	if(e.keyCode === 83) {
		player1.downPressed = true;
	}

	if(e.keyCode === 37) {
		player2.leftPressed = true;
	}
	//right
	if(e.keyCode === 39) {
		player2.rightPressed = true;
	}
	//up
	if(e.keyCode === 38) {
		player2.upPressed = true;
	}
	//down
	if(e.keyCode === 40) {
		player2.downPressed = true;
	}
});
document.body.addEventListener("keyup", function(e) {
	//left
	if(e.keyCode === 65) {
		player1.leftPressed = false;
	}
	//right
	if(e.keyCode === 68) {
		player1.rightPressed = false;
	}
	//up
	if(e.keyCode === 87) {
		player1.upPressed = false;
	}
	//down
	if(e.keyCode === 83) {
		player1.downPressed = false;
	}

	if(e.keyCode === 37) {
		player2.leftPressed = false;
	}
	//right
	if(e.keyCode === 39) {
		player2.rightPressed = false;
	}
	//up
	if(e.keyCode === 38) {
		player2.upPressed = false;
	}
	//down
	if(e.keyCode === 40) {
		player2.downPressed = false;
	}
});

canvas {
	border:1px solid black;
}

<html>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
</body>
</html>

1 回复 | 直到 7 年前

Marco Luzzara 7 年前

实际上,有几种情况需要纠正,但所有情况下的问题都是一样的。当 ball 点击 player 侧着更具体地说,以下是您错过的条件:

if (ball.x > player2.x && ball.y + ball.radius > player2.y)
if (ball.x > player2.x && ball.y + ball.radius < player2.y + player2.height)

对于 player1 .