Collision detection of a ball with the canvas edges
Question
I was following the Mozilla game dev tutorial, and making a simple Breakout game in the HTML5 Canvas and JS.
However, I wanted to enlarge the canvas because it was a bit small so I tried a 800x600 canvas. Then, I noticed the ball was a bit too slow for this new canvas size.
Originaly in the mozilla tutorial, the ball speed was 2. I tried to use 3 instead. And thus comes the problem ...
As I use requestAnimationFrame, which refreshes about 60x per second, we can say that my ball will move about 3 x 60 = 180px per second.
To detect the collision with the right edge of the canvas I use the condition:
if (ball.x + ball.radius >= canvas.width) {
ball.speed = -ball.speed;
// I reverse the speed, which goes from 3 to -3, so the ball bounces.
}
THE PROBLEM IS : If I put the ball in the starting position x = 2 and, my canvas is 600 pixels wide. As the ball moves 3px by 3px and a radius of 10px, the ball will arrive at 589 ... and only at 592 it will bounce. While it should bounce at 590.
I tried a lot of things but nothing seems to correct this problem.
The goal is the ball to bounce on the position 590 (well the canvas.width - ball.radius), regardless of the speed, or the starting position.
The problem maybe lies within my gameloop. I'm using a simple gameloop like this :
function update {
requestAnimationFrame(update)
Drawball();
Moveball()
Collision();
}
requestAnimationFrame(update);
Is it wrong to do collision like this ??
Thanks for the help i'm stuck with this problem since 2 weeks ! I will provide my code
<style>
* {
padding: 0;
margin: 0;
}
body {
position: relative;
background-color: black;
background-image: radial-gradient(rgba(0, 150, 0, 0.3), black 120%);
height: 100vh;
}
canvas {
background: #000;
display: block;
position: absolute;
top: 20px;
right: 20px;
border: solid #00FA61 1px;
}
#debug {
position: absolute;
padding: 10px;
top: 20px;
left: 20px;
border: solid #00FA61 1px;
color: #00FA61;
font-family: 'Courier', monospace;
font-size: 18px;
text-align: center;
}
#debug span {
font-size: 2em;
font-weight: bold;
}
</style>
</head>
<body>
<div id="debug">
<h3>Debug mode</h3>
<p id="posX"></p>
<p id="posY"></p>
<p id="collision"></p>
</div>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var hauteur_canvas = canvas.height;
var largeur_canvas = canvas.width;
var infoPosX = document.getElementById("posX");
var infoPosY = document.getElementById("posY");
var infoCollide = document.getElementById("collision");
/* BALL POS X/Y */
var x = canvas.width / 2;
var y = canvas.height - 40;
/* BALL SPEED */
var direction_x = 8;
var direction_y = -direction_x;
/* RAYON DE LA BOULE */
var rayon_balle = 10;
var timer = 0;
var id_frame;
var currentSeconde = 0,
frameCount = 0,
frameLastSecond = 0;
var colorBall = "#00FA61";
/* HAUTEUR ET LARGEUR DU PADDLE */
var paddleHeight = 10;
var paddleWidth = 75;
/* POSITION X ET Y DU COIN GAUCHE HAUT */
var paddleX = (largeur_canvas - paddleWidth) / 2;
var paddleY = hauteur_canvas - paddleHeight;
/* DISTANCES ENTRE BOULES ET PADDLE */
var dist_center_X;
var dist_center_Y;
/* DETECTION DES INPUTS */
var rightPressed = false;
var leftPressed = false;
/* GESTION DES BRIQUES */
var brickRowCount = 3;
var brickColumnCount = 5;
var brick = {
hauteur: 50,
largeur: 132,
padding: 20,
offsettop: 30,
offsetleft: 30
};
var bricks = [];
for (var c = 0; c < brickColumnCount; c++) {
bricks[c] = [];
for (var r = 0; r < brickRowCount; r++) {
bricks[c][r] = {
x: 0,
y: 0
};
}
}
/* ------------------- */
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, rayon_balle, 0, Math.PI * 2);
ctx.fillStyle = colorBall;
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
ctx.fillStyle = "#00FA61";
ctx.fill();
ctx.closePath();
}
function drawBricks() {
for (var c = 0; c < brickColumnCount; c++) {
for (var r = 0; r < brickRowCount; r++) {
var brickX = (c * (brick.largeur + brick.padding)) + brick.offsetleft;
var brickY = (r * (brick.hauteur + brick.padding)) + brick.offsettop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brick.largeur, brick.hauteur);
ctx.fillStyle = "#1aa829";
ctx.fill();
ctx.closePath();
}
}
}
function distance_boule_paddle() {
/* CALCUL DES DISTANCES ENTRE BOULES ET PADDLE */
dist_center_X = Math.abs(x - paddleX - paddleWidth / 2);
dist_center_Y = Math.abs(y - paddleY - paddleHeight / 2);
}
function fps_count() {
var sec = Math.floor(Date.now() / 1000);
if (sec != currentSeconde) {
currentSeconde = sec;
frameLastSecond = frameCount;
frameCount = 1;
} else {
frameCount++;
}
ctx.fillText("FPS : " + frameLastSecond, 10, 20);
}
function clear() {ctx.clearRect(0, 0, largeur_canvas, hauteur_canvas);}
function collide_paddle() {
if (dist_center_X > (paddleWidth / 2 + rayon_balle)) {
return false;}
if (dist_center_Y > (paddleHeight / 2 + rayon_balle)) {
return false;}
if (dist_center_X <= (paddleWidth / 2)) {
return true;}
if (dist_center_Y <= (paddleHeight / 2)) {
return true;}
var dx = dist_center_X - paddleWidth / 2;
var dy = dist_center_Y - paddleHeight / 2;
return (dx * dx + dy * dy <= (rayon_balle * rayon_balle));
}
function collision() {
/* COLLIDE AVEC LE HAUT DU CANVAS */
if (y - rayon_balle <= 0) {
direction_y = -direction_y;
collideInfo();
} else {
if (y + rayon_balle >= hauteur_canvas - paddleHeight) {
if (collide_paddle()) {
direction_y = -direction_y;
} else {
if (y - rayon_balle > hauteur_canvas) {
// so if the ball is 100% off screen of the down edge its gameover
collideInfo();
alert("GAME OVER");
document.location.reload();
}
}
}
}
/* COLLIDE WITH LEFT AND RIGHT EDGES */
if (x + rayon_balle >= largeur_canvas) {
direction_x = -direction_x;
collideInfo();
} else {
if (x - rayon_balle <= 0) {
direction_x = -direction_x;
collideInfo();
}
}
}
function move_ball() {
x += direction_x;
y += direction_y;
}
function move_paddle() {
if (rightPressed && paddleX < canvas.width - paddleWidth) {
paddleX += 7;
} else if (leftPressed && paddleX > 0) {
paddleX -= 7;
}
}
/* EVENTS LISTENERS */
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if (e.keyCode == 39) {
rightPressed = true;
} else if (e.keyCode == 37) {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.keyCode == 39) {
rightPressed = false;
} else if (e.keyCode == 37) {
leftPressed = false;
}
}
function collideInfo() {
infoCollide.innerHTML = "<br>La collision s'est produite <br> à la position X <span>: " + x + "</span>" + "<br> la position Y : <span>" + y + "</span>";
}
function gameInfo() {
infoPosX.innerHTML = "La position X de la balle : " + x;
infoPosY.innerHTML = "La position Y de la balle : " + y;
}
function draw() {
id_frame = requestAnimationFrame(draw);
clear();
fps_count();
drawBall();
drawPaddle();
drawBricks();
move_ball();
move_paddle();
distance_boule_paddle();
collision();
gameInfo();
timer++;
if (timer === 2500) {
console.log("STOP !");
cancelAnimationFrame(id_frame);
}
}
requestAnimationFrame(draw);
</script>
</body>
</html>
1 answers
solution1
1 2021-05-31 15:15:28
First of all I don't think you should be doing this
function update {
requestAnimationFrame(update)
Drawball();
Moveball()
Collision();
}
requestAnimationFrame(update);
due to the fact that the requestAnimationFrame(update); is already in the function it self.
try changing it to this
function update {
requestAnimationFrame(update)
Drawball();
Moveball()
Collision();
}
update();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.