CODEWITHSUNDEEP
javascriptdomcanvashtml5-canvas
Vinyet
Vinyet

Reputation: 31

Pong game with Canvas and JS: ball is redrawn with each movement?

I'm doing the typical Pong game with just HTML canvas and JavaScript, but I've been stuck on this issue for a while now. I have checked similar Stackoverflow questions, but none of the answers worked for me.

Basically I have a window.onload function that renders the game (draw and move) every second. The ball moves, but draws a replica of itself with each movement. I think it's got something to do with the fact that I'm rendering both things each second, but I can't figure it out.

var framesPerSecond = 60;
  setInterval(function() {
    drawGame();
    move();
}, 1000/framesPerSecond);

Here's the Fiddle.

Thanks.

Upvotes: 1

Views: 200

Answers (2)

Scriptkiddy1337
Scriptkiddy1337

Reputation: 791

You have to redraw from beginning or you save another canvas/image somewhere and draw this first before you draw the rest of the game

var canvas;
var canvasContext;
var printScore = document.createElement("p");
var score = 0;

window.onload = function() {
    canvas = document.getElementById("gameCanvas");
    canvasContext = canvas.getContext('2d');

    var framesPerSecond = 60;
    setInterval(function() {
        drawGame();
        move();
    }, 1000/framesPerSecond);

    var leftPaddle = {
        x: 0,
        y: (canvas.height/2) - 50,
        width: 10,
        height: 100,
        color: "yellow",
        score: 0
    }
    
    var rightPaddle = {
        x: canvas.width - 10,
        y: (canvas.height/2) - 50,
        width: 10,
        height: 100,
        color: "yellow",
        score: 0
    }

    var ball = {
        x: canvas.width/2,
        y: canvas.height/2,
        radius: 9,
        color: "white",
        speed: 5,
        velocityX: 5, 
        velocityY: 5,
    }

    function drawGame() {
    // redraw background
    canvasContext.fillStyle = 'black';
    canvasContext.fillRect(0, 0, canvasContext.canvas.width, canvasContext.canvas.height);
    
        drawRect(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height, leftPaddle.color);
        drawRect(rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height, rightPaddle.color); 
        drawCircle(ball.x, ball.y, ball.radius, ball.color);
    }

    function drawRect(x, y, w, h, color) {
        canvasContext.fillStyle = color;
        canvasContext.fillRect(x, y, w, h);
    }

    function drawCircle(x, y, r, color) {
        canvasContext.fillStyle = color;
        canvasContext.beginPath(); 
        canvasContext.arc(x, y, r, 0, Math.PI*2, false);
        canvasContext.fill();
        canvasContext.closePath();
    }

    function move() {
        ball.x += ball.velocityX; 
        ball.y += ball.velocityY; 
        if ( (ball.y + ball.radius > canvas.height ) || (ball.y - ball.radius < 0) ) {
            ball.velocityY =- ball.velocityY;
        } else if ( (ball.x + ball.radius > canvas.width ) || (ball.x - ball.radius < 0)) {
            ball.velocityX =- ball.velocityX;
        }
        drawGame();
    }

}
canvas {
    margin-top: 0px auto;
    border: 2px solid black;
    background-color: black;
    border-radius: 10px;
    display: block;
    width: 50%;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Pong</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src='main.js'></script>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
</body>
</html>

Upvotes: 1

G07cha
G07cha

Reputation: 4154

Canvas needs to be cleared before redrawing:

canvasContext.clearRect(0, 0, canvas.width, canvas.height);

Otherwise, it would keep modifying existing canvas state

See in action - https://jsfiddle.net/ew2d1quL/2/

Upvotes: 2

Related Questions