Javascript Canvas clearRectメソッドの問題

Question

私はゲームの敵とプレーヤーの2つのボールを持っています。誰も何をすべきかヒントを持っていますか？おそらくそれは私が間違った機能を作っているからです。moveleft moveright.ifまた、コードで何か悪いことを見て、ヒントを提供してください。

var c = document.getElementById('myCanvas'); 
 
var ctx = c.getContext('2d'); 
 
var Player1 = { 
 
    x: 150, 
 
    y: 70, 
 
    velX: 20, 
 
    velY: 12, 
 
    hp: 20, 
 
    startAngle: 40, 
 
}; 
 
var Enemy = { 
 
    x: 200, 
 
    y: 150, 
 
    velX: 12, 
 
    velY: 12, 
 
    hp: 20, 
 
    startAngle: 40, 
 
}; 
 

 
function drawPlayer1() { 
 
    ctx.fillStyle = "red"; 
 
    ctx.beginPath(); 
 
    ctx.arc(Player1.x, Player1.y, Player1.startAngle, 0, 2 * Math.PI); 
 
    ctx.fill(); 
 
} 
 

 
function drawEnemy() { 
 
    ctx.fillStyle = "blue"; 
 
    ctx.beginPath(); 
 
    ctx.arc(Enemy.x, Enemy.y, Enemy.startAngle, 0, 2 * Math.PI); 
 
    ctx.fill(); 
 
} 
 

 
function move(event) { 
 
    // the event.keyCode is Deprecated, use event.code or event.key 
 
    if (event.keyCode == '39' || event.key === ' ') { 
 

 
    if (Player1.x < c.width - Player1.startAngle) { 
 
     updatePositionRight(); 
 
    } 
 
    } 
 
    if (event.keyCode == '37' || event.key == ' ') { 
 

 
    if (Player1.x > 0 + Player1.startAngle) { 
 
     updatePositionLeft(); 
 
    } 
 

 
    } 
 
    if (event.keyCode == '38' || event.key == ' ') { 
 
    if (Player1.y > 0 + Player1.startAngle) { 
 
     updatePositionUp(); 
 
    } 
 

 
    } 
 
    if (event.keyCode == '40' || event.key == ' ') { 
 

 
    if (Player1.y < c.height - Player1.startAngle) { 
 
     updatePositionDown(); 
 
    } 
 
    } 
 
} 
 

 
function updatePositionRight() { 
 

 
    // update Player1's property 
 
    Player1.x += Player1.velX; 
 

 
    // erase the canva 
 
    ctx.clearRect(0, 0, c.width, c.height); 
 

 
    // redraw Player1 
 
    drawPlayer1(); 
 
} 
 

 
function updatePositionLeft() { 
 

 
    // update Player1's property 
 
    Player1.x -= Player1.velX; 
 

 
    // erase the canvas 
 
    ctx.clearRect(0, 0, c.width, c.height); 
 

 
    // redraw Player1 
 
    drawPlayer1(); 
 
} 
 

 
function updatePositionDown() { 
 

 
    // update Player1's property 
 
    Player1.y += Player1.velY; 
 

 
    // erase the canvas 
 
    ctx.clearRect(0, 0, c.width, c.height); 
 

 
    // redraw Player1 
 
    drawPlayer1(); 
 
} 
 

 
function updatePositionUp() { 
 

 
    // update Player1's property 
 
    Player1.y -= Player1.velY; 
 

 
    // erase the canvas 
 
    ctx.clearRect(0, 0, c.width, c.height); 
 

 
    // redraw Player1 
 
    drawPlayer1(); 
 
} 
 
// bind event 
 
window.addEventListener('keydown', move, false); 
 
// initialize 
 
function drawEntities() { 
 
    drawPlayer1(); 
 
    drawEnemy(); 
 
} 
 
drawEntities();

<canvas id="myCanvas" width="600" height="600" style="border:1px solid black"></canvas>

Answer 1

また、すべてのupdatePositionXXX機能を使用してenemyを再描画する必要があります。現時点でclearRectがコールされた後には、player1のみが再描画されます。