使用 Canvas 和 JS 进行乒乓球游戏：每次移动都会重新绘制球？

如何解决使用 Canvas 和 JS 进行乒乓球游戏：每次移动都会重新绘制球？

我正在使用 HTML canvas 和 JavaScript 进行典型的 Pong 游戏，但我已经被这个问题困住了一段时间。我已经检查过类似的 Stackoverflow 问题，但没有一个答案对我有用。

基本上我有一个 window.onload 函数，它每秒渲染游戏（绘制和移动）。球移动，但每次移动都会绘制自身的复制品。我认为这与我每秒都在渲染这两件事有关，但我无法弄清楚。

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

这是 Fiddle。

谢谢。

解决方法

重绘前需要清除画布：

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

否则，它会不断修改现有的画布状态

查看实际操作 - https://jsfiddle.net/ew2d1quL/2/

你必须从头开始重新绘制，或者你在某处保存另一个画布/图像，然后在绘制游戏的其余部分之前先绘制这个

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,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,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,h);
    }

    function drawCircle(x,r,color) {
        canvasContext.fillStyle = color;
        canvasContext.beginPath(); 
        canvasContext.arc(x,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>