HTML5 游戏滚动

Question

所以我在这里，正在制作一个 HTML5 和 javascript 游戏，我试图让角色走到屏幕中间，停止滚动，然后在相机碰到屏幕边缘时继续行走。

http://gifmaker.me/PlayFrameAnimation.php?folder=20140629160DoiXmJ9u4hISNMxDsnhUI 喜欢这个东西。

if (world.regX > 0 && world.regX < backgroundEdge-camera.width && jerome.x > camera.width/2) {
                jerome.x = camera.width/2 };
if (world.regX > 0 && world.regX < backgroundEdge-camera.width && jerome.x < camera.width/2) { 
                jerome.x = camera.width/2 };

（世界是背景图像的容器。）

只要你不在屏幕边缘附近转身，它就可以正常工作，因为它只会向前跳到屏幕中间，然后从那里开始。

这个问题的答案可能非常明显，但我这辈子都想不出来，如果我在这里听起来很愚蠢，很抱歉。

任何形式的帮助都将不胜感激，因为我已经坚持了一段时间了。

提前致谢！

Answer 1

以 Simon Sarris 的answer 为基础，我想出了this demo

我只添加了以下内容：

if(offsetX >= -worldW + can.width / 2) { // Handle right edge
    if(offsetX <= 0) {                   // Handle left edge
        ctx.translate(offsetX, offsetY);
    } else {
        // Do nothing, default position
    }        
} else { 
    ctx.translate(-worldW + can.width / 2, 0);
}

本质上，这只是检查对象是否在“世界宽度”的一半屏幕内。如果不在其中，它会通过翻译上下文来移动“相机”。如果在该范围内，则根据未满足的要求保持固定位置。

希望对你有帮助！