Draggable Sprites auf einem Hintergrundbild

Question

Ich versuche, etwas wie dieses zu reproduzieren: http://carbure.co/.

Nach der Überprüfung verwendet die Website matter.js, eine Physik-Engine. Unten ist ein (fehlgeschlagener) Codeversuch, und ich habe Schwierigkeiten, ihn angesichts der schrecklichen Dokumente zum Laufen zu bringen.

Hat jemand eine Idee, wie sonst kann ich das erreichen?

Vielen Dank

$(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' 
    }) 

}); 

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.