A Pen by devasem.

index.html

<div>
<canvas id="display" width="400" height="300" style="border: 1px solid aqua;" ></canvas>
<hr/>
  <h1>Physics Simulation : Wall Collision</h1>
</div>

script.js

/**
 * Created by Devajit on 19/3/14.
 */

window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded(){
    ballLoad();
}
function ballLoad(){
  var display = document.getElementById("display");
  var canvas = display.getContext("2d");
  var p1={x:20,y:280},
      speed=10,
      gravity=0.1,
      ball={x:p1.x,y:p1.y,velX:0,velY:0},
      radius=15,
      angleInRad=0,
      angle=35;
  function render(){
    canvas.fillStyle="black";
    canvas.fillRect(0,0,display.width,display.height);
    ball.x+=ball.velX;
    ball.y+=ball.velY;
    canvas.fillStyle="red"
    canvas.beginPath();
    canvas.arc(ball.x,ball.y,radius,2*Math.PI,0,true);
    canvas.closePath();
    canvas.fill();
    update();
    if(ball.x>display.width||ball.x<0){
      angle = 180- angle;
      update();
    }
    else if(ball.y>display.height||ball.y<0){
      angle = 360-angle;
      update();
    
    }
    
  } 
  function update(){
    angleInRad = angle*Math.PI/180;
    ball.velX = Math.cos(angleInRad)*speed;
    ball.velY = Math.sin(angleInRad)*speed;
      
  }
  

  update();  

  function start(){
    window.setInterval(render,1000/60.0);
  }
 start();
  

}

style.css

body{
  background-color:black;
}
h1{
  font-size:17px;
  color:white;
  margin-left:50px;
  
}
canvas{
  border-radius:50px 0 50px 0;
  
}
hr,h1{
  position:absolute;
  z-index:30;
  width:395px;
  top:275px;
}

Wall-Collision.markdown

Wall Collision

A Pen by devasem on CodePen.

License.