i am trying to move the ball but instead it draws the ball over and over and tur
ID: 3712727 • Letter: I
Question
i am trying to move the ball but instead it draws the ball over and over and turns into a line sort of. how do i fix this so the ball moves correctly? this is javascript, thank you
<!DOCTYPE html>
<html>
<head>
<title>Term Project - Ping Pong </title>
</head>
<body>
<canvas id ="myCanvas" width = "800" height = "600"
</canvas>
<script>
var canvas,ball, paddle1, paddle2, ctx;
/* set the canvas size and color */
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width;
var y = canvas.height;
var dx = 2;
var dy = -2;
ctx.beginPath();
ctx.rect(20, 20, 800, 800);
ctx.fillStyle = "green";
ctx.fill();
/* dimensions of the ball */
var xposball = 200;
var yposball = 300;
var radiusball = 18;
/* speed of the ball */
var xspeedball = 1;
var yspeedball = 1;
/* direction of the ball */
xdirball = 1;
ydirball = 1;
var gamespeed = 2;
/* add the ball, paddles, and canvas to game */
function draw(){
ctx.rect(39, 115, 20, 150);
ctx.fillStyle = 'black'
ctx.stroke();
ctx.rect(770, 115, 20, 150);
ctx.fillStyle = 'black'
ctx.stroke();
/* draw the ball */
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(xposball, yposball, radiusball, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
xposball = xposball + xspeedball * xdirball;
yposball = yposball + yspeedball * ydirball;
}
setInterval(draw, gamespeed);
</script>
</body>
</html>
Explanation / Answer
The ball is leaving a line because every time we are painting a new circle on every frame without removing the previous circle.
The code is correct , there is no need to make changes to this code, only one line of code will be added to this code to the draw() function. Here, a method will be used to clear the canvas content clearRect(). This function will take the coordinates of the top left corner and the coordinates of the bottom right corner of the given rectangle.
The line of code to be added is : ctx.clearRect(0, 0, canvas.width, canvas.height);
Now, the program will look like this :
<!DOCTYPE html>
<html>
<head>
<title>Term Project - Ping Pong </title>
</head>
<body>
<canvas id ="myCanvas" width = "800" height = "600"
</canvas>
<script>
var canvas,ball, paddle1, paddle2, ctx;
/* set the canvas size and color */
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width;
var y = canvas.height;
var dx = 2;
var dy = -2;
ctx.beginPath();
ctx.rect(20, 20, 800, 800);
ctx.fillStyle = "green";
ctx.fill();
/* dimensions of the ball */
var xposball = 200;
var yposball = 300;
var radiusball = 18;
/* speed of the ball */
var xspeedball = 1;
var yspeedball = 1;
/* direction of the ball */
xdirball = 1;
ydirball = 1;
var gamespeed = 2;
/* add the ball, paddles, and canvas to game */
function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.rect(39, 115, 20, 150);
ctx.fillStyle = 'black'
ctx.stroke();
ctx.rect(770, 115, 20, 150);
ctx.fillStyle = 'black'
ctx.stroke();
/* draw the ball */
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(xposball, yposball, radiusball, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
xposball = xposball + xspeedball * xdirball;
yposball = yposball + yspeedball * ydirball;
}
setInterval(draw, gamespeed);
</script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.