如何防止块离开 canvas 宽度和高度？

Question

我对编程还很陌生。我一直在研究这段代码，但未能成功地为这个块添加关于 canvas 的宽度和高度的碰撞检测。但是，碰撞检测确实适用于 canvas 的上侧和左侧。我需要做些什么来防止块离开 canvas 宽度和长度？

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const keys = [];

const player = new Image();
player.src = "https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w102-h68-n-l50-sg-rj";
const background = new Image();
background.src = "https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj";

function drawSprite(img, sX, sY, sW, sH, dX, dY, dW, dH){
    ctx.drawImage(img, sX, sY, sW, sH, dX, dY, dW, dH);
}

var xPos = 0;
var yPos = 0;
function movement(e){
    if (e.keyCode == 37 && !xPos <=0){
      xPos -= 6;
    }
    else if (e.keyCode == 37 && xPos <=0){
      xPos -= xPos;
    }
    else if (e.keyCode == 38 && !yPos <= 0){
      yPos -= 6;
    }
    else if (e.keyCode == 38 && yPos <= 0){
      yPos -= yPos;
    }
    else if (e.keyCode == 39 && !xPos <= canvas.width){
      xPos += 6; 
    }
    else if (e.keyCode == 39 && xPos <= canvas.width){
      xPos -= 100; 
    }
    else if (e.keyCode == 40){
      yPos += 6;
    }
}

document.onkeydown = movement;

function animate(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
    drawSprite(player, 0, 0, 30, 52, xPos, yPos, 30, 52);
    requestAnimationFrame(animate);
}
animate();

<canvas id="canvas"></canvas>

Answer 1

对于右侧和底部碰撞，您需要从 canvas 的 width/height 中减去块的 width/height。

如果 x 或 y 位置大于最大数量，则将其设置为最大数量

哦，你不必在更改 x/y 位置之前检查所有这些，你可以在之后检查它们

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const keys = [];

const player = new Image();
player.src = "https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h200-n-l50-sg-rj";
const background = new Image();
background.src = "https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj";

function drawSprite(img, sX, sY, sW, sH, dX, dY, dW, dH){
    ctx.drawImage(img, sX, sY, sW, sH, dX, dY, dW, dH);
}

var xPos = 0;
var yPos = 0;
var playerWidth = 30;
var playerHeight = 52
const step = 6;
function movement(e){
    if (e.keyCode == 37){
      xPos -= step;
    }
    else if (e.keyCode == 38){
      yPos -= step;
    }
    else if (e.keyCode == 39){
      xPos += step; 
    }
    else if (e.keyCode == 40){
      yPos += step;
    }

    if (xPos < 0)
      xPos = 0;

    if (xPos > canvas.width - playerWidth)
      xPos = canvas.width - playerWidth;

    if (yPos < 0)
      yPos = 0;

    if (yPos > canvas.height - playerHeight)
      yPos = canvas.height - playerHeight;
}

document.onkeydown = movement;

function animate(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
    drawSprite(player, 0, 0, player.width, player.height, xPos, yPos, playerWidth, playerHeight);
    requestAnimationFrame(animate);
}
animate();

<canvas id="canvas"></canvas>

如何防止块离开 canvas 宽度和高度？

How to prevent block from leaving canvas width and height?

javascript

collision-detection

collision