Untitled

<html>
<head>
  <title></title>
  <style>
    canvas { border: 2px solid black; background: #CD5C5C; display: block; margin: 0 auto; }
  </style>
</head>
<body>
  <h1><center>Bouncing Obstacles</center></h1>
  <canvas id="mycanvas" width="640" height="360" ></canvas>
  <script>
    window.addEventListener('load',function(){
    //constants
    var GAME_WIDTH = 640;
    var GAME_HEIGHT = 360;

    //An array of Obstacles. Each Obstacle has its own attributes
    var obstacles = [
      {
        x: 100, //x coordinate
        y: 100, //y coordinate
        speedY: 1, //speed in Y
        radius: 30, //radius of circle
        color: "#FF6347"
      },
      {
        x: 260,
        y: 100,
        speedY: 2,
        radius: 20,
        color: "#BDB76B"

      },
      {
        x: 370,
        y: 100,
        speedY: 3,
        radius: 10,
        color: "#4169E1"
      },
      {
        x: 520,
        y: 100,
        speedY: 5,
        radius: 25,
        color: "#C71585"
      }
    ];

    //Player Object
    var player = {
      x: 10,
      y:150,
      speedX:2,
      w:35,
      h:35,
      isMoving: false,
      hasFocus: false
    }

    //grab the canvas and context
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");

    var movePlayer = function(){
      if(player.hasFocus) { player.isMoving = true ; }
    }

    var stopPlayer = function(){
      player.isMoving = false;
      player.hasFocus = false ;
    }

    var mouseOnPlayer = function(event) {
      var currpos = getMousePos(canvas, event);
      var posx = currpos.x ;
      var posy = currpos.y;

      if(posx >= player.x && posx <= player.x + player.w &&
         posy >= player.y && posy <= player.y + player.h)
          player.hasFocus = true ;
      else
          player.hasFocus = false ;
    }

    var getMousePos = function(canvas,event){
      var rect = canvas.getBoundingClientRect();
      return {
        x:(event.clientX - rect.left)/(rect.right-rect.left)*canvas.width ,
        y:(event.clientY - rect.top)/(rect.bottom - rect.top)*canvas.height
      }
    }

    canvas.addEventListener("mousedown",movePlayer);
    canvas.addEventListener("mouseup",stopPlayer);
    canvas.addEventListener("mousemove",mouseOnPlayer);

    // Code for touch event
    canvas.addEventListener("touchstart",movePlayer);
    canvas.addEventListener ("touchend",stopPlayer)

    //update the logic
    var update = function() {

      //Update Player location
      if(player.isMoving){
        player.x+= player.speedX;
      }

      //Update Obstacle location

      var i = 0;
      var n = obstacles.length;

      obstacles.forEach(function(element, index){
        element.y += element.speedY;

        //check boundary conditions
        if(element.y <= 15) {
          element.y = 15;
          //element.speedY = element.speedY * -1;
          element.speedY *= -1;
        }
        else if(element.y >= GAME_HEIGHT - 25) {
          element.y = GAME_HEIGHT - 25;
          element.speedY *= -1;
        }
      });
    };

    //show the game on the screen
    var draw = function() {
      //clear the canvas
      ctx.clearRect(0,0,GAME_WIDTH,GAME_HEIGHT);

      obstacles.forEach(function(element, index){

        ctx.beginPath();
        ctx.fillStyle = element.color;
        ctx.arc(element.x,element.y,element.radius,0,2*Math.PI,true);
        ctx.fill();
      });

      ctx.fillStyle = "#00FF00";
      ctx.fillRect(player.x,player.y,player.w,player.h);
    };

    //gets executed multiple times per second
    var step = function() {

      update();
      draw();

      window.requestAnimationFrame(step);
    };

    //initial kick
    step();
});
  </script>
</body>
</html>