Part 2

Implement inelastic collision with the ground and the vertical edges of the canvas for your mortar rounds. They should bounce, but lose energy with each collision. Shells pass through each other. Test for collision in the positions where the rounds are drawn only.

javascript programming
exa_09_physics2

function Shell(pos,vel,radius) {
  this.pos = pos;
  this.vel = vel;
  this.radius = radius;
}

Shell.prototype = { updateAndDraw : updateAndDraw };

var g = -9.8;  // m/s^2
var shells = [];
var deg60 = Math.PI/3;
var muzVel = 50;
var gamma = 0.75;

function keyPressHandler(event) {
  if ( event.keyCode === " ".charCodeAt(0) ) {
    shells.push( new Shell({x:20,y:20}, {x:muzVel*Math.cos(deg60), y:muzVel*Math.sin(deg60)}, 10) );
  }
}

var canv, ctx;
var lastFrameTime;

function start() {
  canv = document.getElementById("canv");
  ctx = canv.getContext("2d");
  canv.addEventListener("keydown", keyPressHandler);
  requestAnimationFrame( update );
  lastFrameTime = new Date().getTime();
}

function update() {
  ctx.clearRect(0,0,canv.width,canv.height);
  var now = new Date().getTime();
  dt = (now - lastFrameTime)/1000;
  lastFrameTime = now;
  for (let shell of shells)
    shell.updateAndDraw(dt);
  requestAnimationFrame( update );
}
</script>
</head>
<body onload="start();">
<canvas id="canv" width="300" height="200" style="border:1px gray solid;" tabindex='1'></canvas>
</body>
</html>

Part 2

javascript programmingexa_09_physics2

javascript programming
exa_09_physics2