Question

我无法弄清楚如何做到这一点。我正在同时翻译角色和背景，但是如果有任何打嗝，角色位置滑出画布的可视区域，我需要画布翻译基于玩家的位置（hero.x，hero.y）。

目前我有

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;

//then in my update function
if (38 in keysDown && hero.y > 0){ //UP KEY PRESSED KEY
ctx.translate(0,12);   //translate background position +12y
hero.y -= hero.speed * modifier; //move player up on the background image

else if (40 in keysDown && hero.y < 3750-64){ //DOWN KEY PRESSED
ctx.translate(0, -12); 
hero.y += hero.speed * modifier;    
}
}

移动玩家和画布但不能保证在一起......如果它完全冻结，则播放器偏离中心甚至偏离屏幕。

可视画布区域为640x480，但您可以导航的背景图像为5,000 x 3750。

在网络浏览器上，当它没有冻结时，它会按我想要的方式工作，以与角色相同的速度移动播放器和背景。

但是，手机上相同的速率会使播放器比屏幕翻译速度快得多，这意味着即使播放器仍在移动背景，播放器也会走出可视区域。

如果我执行ctx.translate（hero.x，hero.y）并使用hero.x，播放器的hero.y坐标，或者它的某些变体减去偏移量，它会移动背景< em> BY 每当我按下键而不是将其移动 TO 那个位置时，

我怎样才能让所有玩家的位置都有条件地移动玩家和背景，但是在一起，或者自动调整下一个更新（）以使玩家居中...... ?????

Answer 1

我怎样才能让所有玩家的位置都有条件移动玩家和背景，但是一起，或者自动调整下一个更新（）以使玩家居中

嗯，简单的方法是实际上总是把玩家拉到中心！换句话说，永远不要改变或翻译他或她的坐标。而是担心翻译与此相关的所有其他内容。

由于您希望玩家始终位于中心位置，因此您应该始终在画布中心绘制玩家（640/2 x 480/2）

然后你要做的是保持X和Y的画布偏移并使用该偏移绘制所有内容（背景等），然后重置转换并在普通旧中心绘制英雄。

所以你的绘制函数看起来像这样：

function draw() {
    ctx.clearRect(0,0,500,500);
    // Save the default transformation matrix
    ctx.save();
    // Translate by the background's offset
    ctx.translate(xoffset, yoffset);
    // Draw the background (and maybe other things) translated
    ctx.fillStyle = backgroundGradient; 
    ctx.fillRect(0,0,500,500);  
    // We restore to the default transformation
    // This will draw the hero not translated at all
    // That means we can always draw the hero in the center!
    ctx.restore();
    // hero is a black rectangle
    ctx.fillRect(240, 240, 20, 20);
}

这是一个使用鼠标向下和向上的实时示例。移动背景有一个很大的“太阳”，而“停留”矩形保持不变，因为它总是在同一个地方绘制：

http://jsfiddle.net/3CfFE/

在平移时重置/锁定html5画布位置以使玩家居中

1 个答案: