球之间的碰撞检测javascript
Collision detection between balls javascript
嗨，当两个球对象在画布上碰撞时，我正试图得到一个响应。
我有一个球形物体ballm和一个叫做ball的球形物体。
这两个球在画布上蹦蹦跳跳。
如果球发生碰撞，画布上应该显示游戏结束。
这是迄今为止我有一个关于碰撞的代码
function collideWithBall() {
var dx = (ball.x + ball.radius) - (ballm.x + ballm.r);
var dy = (ball.y + ball.radius) - (ballm.y + ballm.r);
var distance = Math.sqrt((dx * dx) + (dy * dy));
if (distance < ball.radius + ballm.r) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.font = "18px Arial";
ctx.fillText("Game Over ", 300, 200);
shutdown();
}
}
我唯一的问题是当两个球碰撞时什么也没发生。任何想法都会很有帮助。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="tim's-game" width="800px" height="600px"></canvas>
<script type="text/javascript">
// up top. creates the canvas with given dimensions
// declares script type
// Gets a handle to the element with id canvasOne.
var canvas = document.getElementById("tim's-game");
// Get a 2D context for the canvas.
var ctx = canvas.getContext("2d");
// Creates object for the balls
var ball = {
// determines the position where the ball will apear math.random gives a random position on the x ace
position: {x: Math.floor((Math.random() * 780) + 20), y: 10}
// Will determine the size of the ball
, radius: 6
// Will determine the speed of the ball
, velocity: {x: 3, y: 0}
// Will determine if the ball will get faster or slower
, acceleration: {x: 0, y: 0.1}
// Function that draws the ball
,drawBall: function(){
// Collour of the object
ctx.fillStyle = "rgb(25, 100, 100)";
// begins path
ctx.beginPath();
// calls the object it will draw with positions and size
ctx.arc(ball.position.x, ball.position.y, ball.radius, 0, 2 * Math.PI);
// fills the colour
ctx.fill();
// Update the y location.
ball.velocity.y += ball.acceleration.y;
ball.position.x += ball.velocity.x;
ball.position.y += ball.velocity.y;
// Keep the animation going while the ball has not touched the canvas bottom.
// Note there's a bug here.
if ((ball.position.x >= canvas.width - ball.radius) || (ball.position.x <= ball.radius))
ball.velocity.x = -ball.velocity.x;
if ((ball.position.y >= canvas.height - ball.radius) || (ball.position.y <= ball.radius))
ball.velocity.y = -ball.velocity.y;
}
,
}
// Created a second ball object
var ball2 = {
// determines the position where the ball will apear math.random gives a random position on the x ace
position: {x: Math.floor((Math.random() * 780) + 20), y: 10}
// Will determine the size of the ball
, radius: 6
// Will determine the speed of the ball
, velocity: {x: 3, y: 0}
// Will determine if the ball will get faster or slower
, acceleration: {x: 0, y: 0.1}
// Function that draws the ball
,drawBall2: function(){
// Collour of the object
ctx.fillStyle = "rgb(25, 100, 100)";
// begins path
ctx.beginPath();
// calls the object it will draw with positions and size
ctx.arc(ball2.position.x, ball2.position.y, ball2.radius, 0, 2 * Math.PI);
// fills the colour
ctx.fill();
// Update the y location.
ball2.velocity.y += ball2.acceleration.y;
ball2.position.x += ball2.velocity.x;
ball2.position.y += ball2.velocity.y;
// Keep the animation going while the ball has not touched the canvas bottom.
// Note there's a bug here.
if ((ball2.position.x >= canvas.width - ball2.radius) || (ball2.position.x <= ball2.radius))
ball2.velocity.x = -ball2.velocity.x;
if ((ball2.position.y >= canvas.height - ball2.radius) || (ball2.position.y <= ball2.radius))
ball2.velocity.y = -ball2.velocity.y;
}
}
// Creates a new ball object
// This ball will be used for moving around the canvas
var ballm = {
// spawns the ball in the middle of the canvas
position:{ x: canvas.width / 2
, y: canvas.height / 2
}, r: 50
};
// Creates a draw circle function
function drawCircle() {
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.beginPath();
ctx.arc(ballm.position.x, ballm.position.y, ballm.r, 0, 2 * Math.PI);
ctx.fill();
collideWithBall();
}
function collideWithBall() {
var dx = (ball.position.x + ball.radius) - (ballm.position.x + ballm.r);
var dy = (ball.position.y + ball.radius) - (ballm.position.y + ballm.r);
var distance = Math.sqrt((dx * dx) + (dy * dy));
if (distance < ball.radius + ballm.r) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.font = "18px Arial";
ctx.fillText("Game Over ", 300, 200);
shutdown();
}
}
// A function to repeat every time the animation loops.
function repeatme() {
collideWithBall();
// clears the screan/canvas i.e. where the ball was previously does not show up.
ctx.clearRect(0, 0, canvas.width, canvas.height);
// calls the function in the ball object
ball.drawBall();
ball2.drawBall2();
//calls the draw circle function
drawCircle();
collideWithBall();
// gets the animation going
window.requestAnimationFrame(repeatme);
}
// Add an event listener to the keypress event.
window.addEventListener("keydown", function(event) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Right
if (event.keyCode == 39 && ballm.position.x < canvas.width - ballm.r)
ballm.position.x += Math.min(10, canvas.width - ballm.position.x - ballm.r);
// Left
else if (event.keyCode == 37 && ballm.position.x > ballm.r)
ballm.position.x -= 10;
// down
else if (event.keyCode == 40 && ballm.position.y < canvas.height - ballm.r)
ballm.position.y += 10;
// For up movement
else if (event.keyCode == 38 && ballm.position.y > ballm.r)
// updates location by int given
ballm.position.y -= 10;
drawCircle();
collideWithBall();
});
// Get the animation going.
window.requestAnimationFrame(repeatme);
</script>
</body>
</html>
编辑：删除了额外的collapseWithBall功能。
还添加了位置代码
编辑2：添加修复代码现在工作
我认为你的数学是错误的。您的支票
if (distance < ball.radius + ballm.r) {
是正确的，但意味着距离是从球的中心到中心测量的。因此，正确的距离公式为：
var dx = ball.position.x-ballm.x;
var dy = ball.position.y-ballm.y;
var distance = Math.sqrt((dx * dx) + (dy * dy));
如果测量的是if语句所暗示的中心到中心的距离，则球的半径不会进入计算。
我可以在你的代码中看到的另一个问题是
collideWithBall
函数定义了两次！请尝试删除两个看似等效的实现中的一个。
编辑：此外，您访问的球的位置错误。球的位置在position属性中。
因此，你需要使用它！请参阅上面编辑的代码了解如何操作。
然后工作：http://jsfiddle.net/gQ3hD/2/
第二版：在碰撞函数中，通过在两个baal上循环，预计小提琴也能正确处理第二个球。
相关文章：
- javascript中两个正方形之间的碰撞检测
- 使用canvas+javascript进行2D碰撞检测
- Javascript - 如何设置碰撞检测系统
- 如何将碰撞检测添加到我的 JavaScript 游戏中
- JavaScript:碰撞检测不起作用
- Javascript画布游戏-碰撞检测
- JavaScript画布:“;随机的“;碰撞检测错误
- Javascript:碰撞检测帮助(HTML5画布）
- 球之间的碰撞检测javascript
- Javascript游戏中基于瓦片的碰撞检测
- 用于简单碰撞检测的Javascript位图
- JavaScript碰撞检测bug
- Javascript画布碰撞检测
- JavaScript多边形碰撞检测
- Javascript碰撞检测之间的圆和多边形
- Javascript停止在画布中重复碰撞检测
- JavaScript中画布上的碰撞检测
- Javascript / Jquery中的简单碰撞检测
- Javascript碰撞检测
- JavaScript碰撞检测似乎不起作用
