文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML5游戏滚动

问HTML5游戏滚动
EN

Stack Overflow用户

提问于 2014-06-29 23:13:04

回答 1查看 512关注 0票数 0

所以我现在正在制作一个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 };

(world是背景图像的容器。)

这很好，只要你不转过身靠近屏幕的边缘，因为它只会跳到屏幕的中间，然后从那里。

这个问题的答案可能是非常明显的，但我无法为自己的一生考虑这个问题，所以如果我在这里听起来很愚蠢的话，我很抱歉。

任何帮助都会很感激，因为我已经坚持了很长一段时间了。

提前谢谢！

javascript

html

canvas

scroll

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-01 04:20:11

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

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

希望能帮上忙！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24481082

复制

相似问题

问HTML5游戏滚动
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5游戏滚动EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5游戏滚动
EN