可拖動的精靈在壁紙上

我試圖重現像這樣的東西：http://carbure.co/。可拖動的精靈在壁紙上

經過檢查，該網站使用matter.js，一個物理引擎。下面是一個（失敗的）代碼嘗試，並且由於可怕的文檔，我無法使其工作。

有沒有人有任何想法，我可以做到這一點？

非常感謝

$(window).load(function() { 
    var w = $(window).innerWidth(); 
    var h = $(window).innerHeight(); 

    // Matter.js module aliases 
    var Engine = Matter.Engine; 
    var World = Matter.World; 
    var Bodies = Matter.Bodies; 
    var Body = Matter.Body; 
    var Constraint = Matter.Constraint; 
    var Composite = Matter.Composite; 
    var Composites = Matter.Composites; 
    var MouseConstraint = Matter.MouseConstraint; 

    // create a Matter.js engine 
    var engine = Engine.create({ 
    render: { 
     element: document.body, 
     options: { 
     width: w, 
     height: h, 
     wireframes: false, 
     background: '#fff' 
     } 
    } 
    }); 

    // add a mouse controlled constraint 
    var mouseConstraint = MouseConstraint.create(engine); 
    World.add(engine.world, mouseConstraint); 

    var addToWorld = []; 

    // create random poly's and a ground 
    var ranPolygons = Math.random() * 10 + 5 >> 0; 
    var prevPoly; 
    for (var i = 0; i < ranPolygons; i++) { 
    var polyRadius = Math.random() * 40 + 40 >> 0; 
    var polySides = 1; 
    var x = Math.random() * (w - polyRadius * 2) + polyRadius >> 0; 
    var y = Math.random() * (h/2 - polyRadius * 2) + polyRadius >> 0; 
    var isStatic = Math.random() * 1 < 0.2; 

    var poly = Bodies.polygon(x, y, polySides, polyRadius, { 
     render: { 
     fillStyle: isStatic ? '#0134CB' : makePattern(), 
     strokeStyle: isStatic ? 'transparent' : '#0134CB', 
     lineWidth: Math.random() * 5 + 2 >> 0 
     }, 
     density: Math.random() * 0.1, 
     isStatic: isStatic, 
     restitution: Math.random() * 1 
    }); 
    addToWorld.push(poly); 

    // add borders 
    var border = 5; 
    var halfBorder = border/2; 
    var borders = [ 
    Bodies.rectangle(w/2, halfBorder, w + border, border, { 
     isStatic: true, 
     render: { 
     fillStyle: 'transparent', 
     strokeStyle: 'transparent' 
     } 
    }), 
    Bodies.rectangle(w/2, h - halfBorder, w + border, border, { 
     isStatic: true, 
     render: { 
     fillStyle: 'transparent', 
     strokeStyle: 'transparent' 
     } 
    }), 
    Bodies.rectangle(halfBorder, h/2, border, h + border, { 
     isStatic: true, 
     render: { 
     fillStyle: 'transparent', 
     strokeStyle: 'transparent' 
     } 
    }), 
    Bodies.rectangle(w - halfBorder, h/2, border, h + border, { 
     isStatic: true, 
     render: { 
     fillStyle: 'transparent', 
     strokeStyle: 'transparent' 
     } 
    }), 
    ]; 
    addToWorld = addToWorld.concat(borders); 

    // add all of the bodies to the world 
    World.add(engine.world, addToWorld); 

    // run the engine 
    runner = Engine.run(engine) 

    // setTimeout(ranGrav, 2000); 
    engine.world.gravity.y = 0; 
    engine.world.gravity.x = 0; 

    $(engine.render.canvas).css({ 
    width: '100%', 
    height: '100vh' 
    }) 

});

來源

2017-01-09 Apswak

什麼不工作呢？你在控制檯中遇到錯誤嗎？有沒有出現？通常物理引擎有一個Update（）方法，你必須調用某種定時器... – Milney

它只是一個白色屏幕。我已將該代碼放入網站的

相關問題