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的回答为基础，我想到了这个演示

我添加的内容如下：

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

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

希望能帮助到你！