Sling shot

In this example below you will see how to do a Sling shot with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by carl-r-kelly, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright carl-r-kelly ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sling shot</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="canvas">
  <p class="canvas__score">0</p>
</div>
  <script src='https://rawgit.com/liabru/matter-js/master/build/matter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/carl-r-kelly/sling-shot-aBBMao */
body {
  margin: 0;
  background: #222;
}

canvas {
  max-width: 100%;
  max-height: 100%;
}
canvas:active {
  cursor: pointer;
  cursor: -webkit-grabbing;
}

.canvas {
  height: 750px;
  width: 1920px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
}
.canvas__score {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  margin: 0;
  line-height: 1;
  padding: 20px;
  min-width: 200px;
  font-size: 10vmin;
  -webkit-align-self: flex-end;
  -moz-align-self: flex-end;
  align-self: flex-end;
  -ms-flex-item-align: end;
}


/*Downloaded from https://www.codeseek.co/carl-r-kelly/sling-shot-aBBMao */
// Matter.js - http://brm.io/matter-js/
// Matter aliases


var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Constraint = Matter.Constraint,
    Composites = Matter.Composites,
    MouseConstraint = Matter.MouseConstraint,
    Events = Matter.Events,
    sproutCat = 0x0001,
    elasticCat = 0x0002,
    mouthCat = 0x0004,
    canvasWidth = 1920,
    canvasHeight = 750;

var engine = Engine.create(document.body, { 
    enableSleeping: true,
    render: {
        options: {
            width: canvasWidth,
            height: canvasHeight,
            background: 'http://dev.direction.group/background.jpg',
            wireframes: false,
        }
    }
});

engine.world.bounds.max.x = canvasWidth;
engine.world.bounds.max.y = canvasHeight;

var mouse = MouseConstraint.create(engine, {
    constraint: { stiffness: 1 }
});

var mouth = Bodies.circle(1455, 210, 20, { 
    isStatic: true, 
    collisionFilter: {
      mask: sproutCat | mouthCat
    },
    render: { 
      visible: true,
      fillStyle: '#f00'
    } 
});

var sproutOptions = {
  frictionAir: 0.000, 
  restitution: 0.0, 
  density: 1000,
  collisionFilter: {
    mask: mouthCat | sproutCat
  },
  render: { 
    sprite: { 
      texture: 'http://dev.direction.group/sprout.png' 
    }
  } 
};

var sprout = Bodies.polygon(500, 300, 8, 20, sproutOptions),
    anchor = { x: 550, y: 290 },
    elastic = Constraint.create({ 
        pointA: anchor, 
        bodyB: sprout, 
        stiffness: 0.1, 
        collisionFilter: {
          mask: elasticCat
        },
        render: { 
            lineWidth: 5, 
            strokeStyle: '#dfa417',
            scale: 10
        } 
    });

World.add(engine.world, [mouse, mouth, sprout, elastic]); 

Engine.run(engine);

Events.on(engine, 'collisionStart', function(event){
      mouth.render.fillStyle = '#0f0';
      setTimeout(function() {
        mouth.render.fillStyle = '#f00';
      }, 250);
      World.remove(engine.world, sprout);
      sprout = Bodies.polygon(500, 300, 8, 20, sproutOptions)
      World.add(engine.world, elastic);
      World.add(engine.world, sprout);
      elastic.bodyB = sprout;

  var amount = 10,
      total = parseInt($('.canvas__score').text());
  
  total+= amount;
  
  $('.canvas__score').text(total);
})



Events.on(engine, 'tick', function(event) {  
          
    if(sprout.position.x > canvasWidth || sprout.position.y > canvasHeight){      
      World.remove(engine.world, sprout);
      sprout = Bodies.polygon(500, 300, 8, 20, sproutOptions)
      World.add(engine.world, elastic);
      World.add(engine.world, sprout);
      elastic.bodyB = sprout;
    }
       
    if (sprout.position.x > 600 || sprout.position.y < 250) {
        World.remove(engine.world, elastic);
//        elastic.bodyB = null;
//        elastic.render.lineWidth = 0;
    }
  
  // // go for the mouth
  //   if (engine.timing.timestamp < 1500) {
  //       sprout.positionPrev.x += 10;
  //       sprout.positionPrev.y -= 10; 
  //   }
});

Comments