Question

我目前正在开发一款小游戏，但我无法让圆圈正确地击中左侧和顶部画布边框。它正确地击中了右侧和底侧。

圆圈可以用W A S D移动，并且必须正确地击中画布的所有边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Game</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
</head>
<body>

<canvas id="myCanvas" width="1200" height="800"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var dx = 2;
    var dy = -2;
    var playerRadius = 80;
    var playerX = (canvas.width-playerRadius)/2;
    var playerY = (canvas.height-playerRadius);
    var rightPressed = false;
    var leftPressed = false;
    var upPressed = false;
    var downPressed = false;

    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

    function keyDownHandler(e) {
        if(e.keyCode == 87) {
            upPressed = true;
        }
        else if(e.keyCode == 83) {
            downPressed = true;
        }
        else if(e.keyCode == 68) {
            rightPressed = true;
        }
        else if(e.keyCode == 65) {
            leftPressed = true;
        }
    }
    function keyUpHandler(e) {
        if(e.keyCode == 87) {
            upPressed = false;
        }
        else if(e.keyCode == 83) {
            downPressed = false;
        }
        else if(e.keyCode == 68) {
            rightPressed = false;
        }
        else if(e.keyCode == 65) {
            leftPressed = false;
        }
    }

    function drawPlayer(){
        ctx.beginPath();
        ctx.arc(playerX, playerY, playerRadius, 0, Math.PI*2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPlayer();

        if(rightPressed && playerX < canvas.width-playerRadius) {
            playerX += 7;
        }
        else if(leftPressed && (playerX - playerRadius) > 0) {
            playerX -= 7;
        }
        else if(upPressed && (playerY - playerRadius) > 0) {
            playerY -= 7;
        }
        else if(downPressed && playerY < canvas.height-playerRadius) {
            playerY += 7;
        }

        if(playerX >= canvas.width){
            leftPressed = false;
        }
    }

    setInterval(draw, 10);

</script>


</body>
</html>

如果您需要更多信息，请说明。

Answer 1

这与你检查球是否可以移动的方式有关。你检查X - radius＆gt; 0，然后向左移动7.如果球距离左边缘1个像素，它可以移动，但它将向左移动6个像素。在计算新X位置后，再次检查X - 半径是否小于0 ...相应地调整X ...您需要对所有方向执行相同的操作（底部和右侧将停止工作如果你修复了左上角和左上角然后向右下方移动 - Jaromanda X

Answer 2

示例代码：即使您从评论

中找到它

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPlayer();

    if(rightPressed && playerX < canvas.width-playerRadius) {
        playerX += 7;
        if (playerX > canvas.width-playerRadius) {
            playerX = canvas.width-playerRadius;
        }
    }
    else if(leftPressed && (playerX - playerRadius) > 0) {
        playerX -= 7;
        if (playerX - playerRadius < 0) {
            playerX = playerRadius;
        }
    }
    else if(upPressed && (playerY - playerRadius) > 0) {
        playerY -= 7;
        if (playerY - playerRadius < 0) {
            playerY = playerRadius;
        }
    }
    else if(downPressed && playerY < canvas.height-playerRadius) {
        playerY += 7;
        if (playerY > canvas.height-playerRadius) {
            playerY = canvas.height-playerRadius;
        }
    }
}

这不是处理它的最有效方法，但它显示了问题以及如何解决它（我认为）

可能稍微不准确（在某些“修正”中你可能需要+/- 1 - 我没有正确检查

Answer 3

对于此类任务，您不需要具有true和false vars的setInterval，您可以在每个keydown事件中刷新场景。我修改了你的代码，你有：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var playerRadius = 80;
var playerX = (canvas.width - playerRadius) / 2;
var playerY = (canvas.height - playerRadius);

document.addEventListener("keydown", keyDownHandler, false);

var moves = {
  87: {x: 0, y: -7},
  83: {x: 0, y: 7},
  68: {x: 7, y: 0},
  65: {x: -7, y: 0}
};

function keyDownHandler(e) {

  if( moves.hasOwnProperty(e.keyCode) ) {

    playerX += moves[e.keyCode].x;
    playerY += moves[e.keyCode].y;

    if(playerX < playerRadius) playerX = playerRadius;
    if(playerX > canvas.width - playerRadius) playerX = canvas.width - playerRadius;
    if(playerY < playerRadius) playerY = playerRadius;
    if(playerY > canvas.height - playerRadius) playerY = canvas.height - playerRadius;

    drawPlayer();

  }

}

function drawPlayer(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(playerX, playerY, playerRadius, 0, Math.PI*2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

drawPlayer();

jsfiddle

Javascript使圆圈正确地击中了画布边框

3 个答案: