Question

这是我的jsfiddle：jsfiddle.net/V8eKp/5/show

       // START -- MOVE CAMERA
            var p = new b2Vec2();
            p = (ball.body.GetWorldCenter().x) * physics.scale;
            pos.push(p);
            var length = pos.length;

            var s = (pos[length - 1] - pos[length - 2]); //in pixels

            if ((halfwidth < (dw - p)) && (p > halfwidth)) {
                ctx.translate(-s, 0);
            }

我按照此处的代码进行操作：http://www.codingowl.com/readblog.php?blogid=128

球的渲染表现奇怪且缓慢

我看到了这个例子：http://www.emanueleferonato.com/2010/05/04/following-a-body-with-the-camera-in-box2d-the-smart-way/但是我没弄清楚他是怎么做的，他使用了3个变量stage,x,y希望在他写的代码中未定义。并查看Impactjs的这个演示，看看相机如何随着玩家的移动而移动我需要这个功能：http://impactjs.com/demos/physics/

请任何人帮助我

Answer 1

只要ball.body.GetPosition().x > 48，this.current将在每次更新时开始递增，对吧？但是你的draw()只处理0,1和2。

Answer 2

在这里找到一种（某种）工作方式：http://jsfiddle.net/u4Mv5/

你已经掌握了大部分内容，只需要对场景变换逻辑进行一些处理。

我的逻辑是，每当场景发生变化时，移除所有内容，手动向后或向前移动球，并完全重绘新场景。当我们手动移动球时，不需要翻译画布。

绘制和循环代码:(简化）

            draw: function () {
                this.clear();
                new Body(physics, { name: "Ground" });
                ball = new Body(physics, { shape: "circle", x: ballx, y: bally, radius: 0.5 });
                switch ( this.current ) {
                case 0: // First scene
                    new Body(physics, { name: "Scene0Wall" });
                    new Body(physics, { name: "Scene0bricks0" });
                    new Body(physics, { name: "Scene0bricks1" });
                    break;

                case 1: // Second scene
                    new Body(physics, { name: "Scene1bricks0" });
                    break;

                case 2: // Third scene
                    new Body(physics, { name: "Scene2bricks0" });
                    break;
                }
            },
            update: function () {
                ballx = ball.body.GetPosition().x;
                bally = ball.body.GetPosition().y;
                if ( ballx > scene_width ) {
                    ++this.current;
                    ballx -= scene_width;
                    this.draw();
                }
                if ( ballx < 0 && this.current > 0) {
                    --this.current;
                    ballx += scene_width;
                    this.draw();
                }
            },

这在场景布局上也更容易，因为每个场景的原点都是[0,0]。

我只保留球和球。你应该实施的位置，而不是它的状态和速度。还应调整场景布局（和场景切断点），以确保球可以继续行进，而不是卡在一个区块内。

试图在html5画布中绘制多个级别的场景

2 个答案: