HTML5游戏滚动

Question

so here I am, making a HTML5 and javascript game, and I'm trying to make the character walk to the middle of the screen, stop scrolling, and then continue walking when the camera hits the edge of the screen.

http://gifmaker.me/PlayFrameAnimation.php?folder=20140629160DoiXmJ9u4hISNMxDsnhUI like this thing.

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

(world is the container for the background image.)

this works fine, so long as you're not turning around near the edges of the screen, because it will just jump forward to the middle of the screen, and go from there.

the answer to this question is probably incredibly obvious, but I just cannot think of it for the life of me, so sorry if I'm sounding stupid here.

any kind of help would be appreciated, because I've been stuck on this for a while now.

thanks in advance!

Answer 1

Using Simon Sarris' answer as a base, I came up with this demo

All I added was the following:

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

Essentially, this just checks to see if the object is within half of a screen of the "world's width". If it's not within that, it moves the "camera" by translating the context. If it is within that, it keeps a set position depending on which requirement is not being met.

Hope it helps!