Question

我用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);

}

Answer 1

对于感知到的错误有点困惑所以这里是一个裂缝。

<强> Live Demo

我所做的是为图像添加了一个load事件监听器，以确保在开始更新之前将其完全加载，

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

注意我只是调用update，你的更新函数调用draw，然后结束draw()调用requestAnimationFrame(update)

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

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

您也可以使用drawImage

执行此操作

<强> Live Demo Cropped

只需使用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，你不需要它你可以使用canvas或querySelectorAll选择你的getElementById元素你也可以绑定您的活动使用addEventListener

完整代码。

// 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);

}

Answer 2

您的代码运行正常。图像 IS 触及边界并且不会超越。也许我没有理解你的问题，所以请评论澄清你需要的东西。

以下jsfiddle上的演示：

http://jsfiddle.net/8x5yv233/

注意：我认为你需要在做任何事情之前等待图片加载。这样的事情：

var image = new Image();

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

image.src = 'yourpic.png';

边界不起作用

2 个答案: