Javascript 边界不起作用

我用HTML制作了一个简单的游戏，基本上在画布框中绘制一个精灵，并允许我通过箭头键移动它。但由于某种原因，当我在精灵上设置边界，使其不会离开画布时，效果并不理想

这是画布中精灵的图像（画布是黄色精灵所在的盒子）

精灵确实有边界，在这个边界上它不能走得更远，但我希望它们位于画布线条上。现在它被限制在画布中某个不可见的框中。但是我在代码中看到的任何东西都不能证明我的错误是正确的。我做错了什么

代码如下：

// JavaScript Document

var canvasWidth = 800;
var canvasHeight = 600;

$('#gameCanvas').attr('width', canvasWidth);
$('#gameCanvas').attr('height', canvasHeight);

var keysDown = {};

$('body').bind('keydown', function(e){
 keysDown[e.which] = true;
});

$('body').bind('keyup', function(e){
 keysDown[e.which] = false;
});

var canvas = $('#gameCanvas')[0].getContext('2d');
var FPS = 30;
var image = new Image();
image.src = "ship.png";

var playerX = (canvasWidth/2) - (image.width/2);
var playerY = (canvasHeight/2) - (image.height/2);

setInterval(function() {
update();
draw();
}, 1000/FPS);

function update(){
if(keysDown[37]){
    playerX -= 10;
}
if(keysDown[38]){
    playerY -= 10;
}
if(keysDown[39]){
    playerX += 10;
}
if(keysDown[40]){
    playerY += 10;
}

playerX = clamp(playerX, 0, canvasWidth - image.width);
playerY = clamp(playerY, 0, canvasHeight - image.height);

}

function draw() {
canvas.clearRect(0,0, canvasWidth, canvasHeight);
canvas.strokeRect(0, 0, canvasWidth, canvasHeight);
canvas.drawImage(image, playerX, playerY);
}

function clamp(x, min, max){
return x < min ? min : (x > max ? max : x);

}

//JavaScript文档
var canvasWidth=800；
var canvasHeight=600；
$（'#gameCanvas'）.attr（'width'，canvasWidth）；
$（'gameCanvas'）.attr（'height'，canvashheight）；
var keysDown={}；
$（'body'）.bind（'keydown'，函数（e）{
keysDown[e.which]=true；
});
$（'body'）.bind（'keyup'，函数（e）{
keysDown[e.which]=false；
});
var canvas=$（'#gameCanvas'）[0].getContext（'2d'）；
var FPS=30；
var image=新图像（）；
image.src=“ship.png”；
var playerX=（canvasWidth/2）-（image.width/2）；
var playerY=（canvasHeight/2）-（image.height/2）；
setInterval（函数（）{
更新（）；
draw（）；
}，1000/帧）；
函数更新（）{
如果（按键向下[37]）{
playerX-=10；
}
如果（按键向下[38]）{
游戏性-=10；
}
如果（按键向下[39]）{
playerX+=10；
}
如果（按键向下[40]）{
玩耍次数+=10；
}
playerX=climp（playerX，0，canvasWidth-image.width）；
playerY=clamp（playerY，0，画布高度-image.height）；
}
函数绘图（）{
canvas.clearRect（0,0，画布宽度，画布高度）；
canvas.strokeRect（0，0，画布宽度，画布高度）；
canvas.drawImage（图像、playerX、playerY）；
}
功能夹（x、最小、最大）{
返回xmax？max:x）；
}

您的代码工作正常。图像接触到边界并且没有超出边界。也许我不理解你的问题，所以请评论以澄清你需要什么

jsfiddle上的演示如下：

注意：我认为您需要等待图片加载，然后再执行任何操作。诸如此类：

var image = new Image();

image.onload = function () {
    setInterval(function () {
        update();
        draw();
    }, 1000/FPS);
}

image.src = 'yourpic.png';

---

被感知到的错误弄糊涂了，所以这里有一条裂缝

我所做的是为图像添加了一个

load

事件监听器，以确保在开始更新之前它已完全加载

image.addEventListener('load', function () {
    update();
});

注意，我只调用update，更新函数调用draw，然后

draw（）

的末尾调用

requestAnimationFrame（update）

始终使用来制作动画，而不是间隔。你应该注意到它现在表现得更流畅了

我还在图像周围添加了一个边界框，以便您可以看到边界。但是，如果您的问题是希望图像本身与画布的边界对齐，则只需裁剪图像资源

您也可以使用

drawImage

只需像这样使用

drawImage

的所有9个参数即可

drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, 
                 destX, destY, destWidth, destHeight)

所以要修剪它，你可以这样做

var cropX = 80,
    cropY = 20;

canvas.drawImage(image, 
                 cropX, cropY, image.width-cropX, image.height-cropY, 
                 playerX, playerY,image.width-cropX,image.height-cropY);

现在它将绘制裁剪后的图像

另外一个建议是不要为此使用jQuery，您不需要它。您可以使用

getElementById

选择您的

canvas

元素，而不使用它，或者您也可以使用

完整的代码。

// JavaScript Document

var canvasWidth = 800;
var canvasHeight = 600;

$('#gameCanvas').attr('width', canvasWidth);
$('#gameCanvas').attr('height', canvasHeight);

var keysDown = {};

$('body').bind('keydown', function (e) {
    keysDown[e.which] = true;
});

$('body').bind('keyup', function (e) {
    keysDown[e.which] = false;
});

var canvas = $('#gameCanvas')[0].getContext('2d');
var FPS = 30;
var image = new Image();
image.crossOrigin = "Anonymous";

image.src = "http://i.imgur.com/LfcwdP7.gif";
image.addEventListener('load', function () {
    update();
});

var playerX = (canvasWidth / 2) - (image.width / 2);
var playerY = (canvasHeight / 2) - (image.height / 2);



function update() {
    if (keysDown[37]) {
        playerX -= 10;
    }
    if (keysDown[38]) {
        playerY -= 10;
    }
    if (keysDown[39]) {
        playerX += 10;
    }
    if (keysDown[40]) {
        playerY += 10;
    }

    playerX = clamp(playerX, 0, canvasWidth - image.width);
    playerY = clamp(playerY, 0, canvasHeight - image.height);

    draw();
}

function draw() {
    canvas.clearRect(0, 0, canvasWidth, canvasHeight);
    canvas.strokeRect(0, 0, canvasWidth, canvasHeight);
    canvas.strokeRect(playerX, playerY, image.width, image.height);
    canvas.drawImage(image, playerX, playerY);

    requestAnimationFrame(update);
}

function clamp(x, min, max) {
    return x < min ? min : (x > max ? max : x);

}

//JavaScript文档
var canvasWidth=800；
var canvasHeight=600；
$（'#gameCanvas'）.attr（'width'，canvasWidth）；
$（'gameCanvas'）.attr（'height'，canvashheight）；
var keysDown={}；
$（'body'）.bind（'keydown'，函数（e）{
keysDown[e.which]=true；
});
$（'body'）.bind（'keyup'，函数（e）{
keysDown[e.which]=false；
});
var canvas=$（'#gameCanvas'）[0].getContext（'2d'）；
var FPS=30；
var image=新图像（）；
image.crossOrigin=“匿名”；
image.src=”http://i.imgur.com/LfcwdP7.gif";
image.addEventListener（'load'，函数（）{
更新（）；
});
var playerX=（canvasWidth/2）-（image.width/2）；
var playerY=（canvasHeight/2）-（image.height/2）；
函数更新（）{
如果（按键向下[37]）{
playerX-=10；
}
如果（按键向下[38]）{
游戏性-=10；
}
如果（按键向下[39]）{
playerX+=10；
}
如果（按键向下[40]）{
玩耍次数+=10；
}
playerX=climp（playerX，0，canvasWidth-image.width）；
playerY=clamp（playerY，0，画布高度-image.height）；
draw（）；
}
函数绘图（）{
canvas.clearRect（0，0，画布宽度，画布高度）；
canvas.strokeRect（0，0，画布宽度，画布高度）；
canvas.strokeRect（playerX，playerY，image.width，image.height）；
canvas.drawImage（图像、playerX、playerY）；
requestAnimationFrame（更新）；
}
功能夹（x、最小、最大）{
返回xmax？max:x）；
}

当我说我想让它触及边界时，我的意思是精灵的极限点可以触及黑框，但不能超出。现在，精灵甚至无法到达黑线，因为出于某种原因，边界比黑线框小。这是因为你的图像有太多的透明空间，这就是为什么你的图像没有接触到它。你需要用PhotoShop或GIMP剪辑它，这样它就会有正确的边界。但我做到了。我在使用Photoshop时使用了魔术橡皮擦工具使背景透明，但图像周围仍然有一个边框，它首先接触画布线条，从而阻止它进一步移动。不，你需要为此更改图像的大小。您可以尝试使用裁剪工具。很好，不过，它是裁剪图像，但不能解决边界冲突。正如你们在图片上看到的，它并没有走得更远。您还需要修改“钳制”代码

playerX=clamp（playerX，0，canvasWidth-image.width+cropX）；playerY=夹具（playerY，0，画布高度-image.height+cropY）演示：