Grid Ball

grid-ball.js

/**
* @name: Grid Ball
* @date: 7-29-16 | July 29, 2016
* @author: ormux
* @class: Ball Physics
* @version: 1.1
*/
/* Request Animation Frame Shim; this piece of code is my hero... */
window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    }
})();

/* document ready Function; nope no jQuery */
(function() {
  // init() canvas;
  var c = document.createElement('canvas'),
    ctx = c.getContext('2d'),
    CW = window.innerWidth,
    CH = window.innerHeight,
    keys = [];
  c.width = CW;
  c.height = CH;
  document.body.appendChild(c);
  document.body.style.background = 'black';
  document.body.style.margin = 0;
  document.body.style.overflow = 'hidden';

  /* main() function; I kinda like the "int main()" function ¯\_(ツ)_/¯ */
  window.onload = main;
  function main() {
    requestAnimFrame(main);
    render();
    update();
    collision();
  }

  /* key listeners; yes you can actually control the ball with arrow keys, but it's a bit sketchy I will fix it. */
  window.addEventListener( "keydown", function(e) {
    keys[e.keyCode] = true;
    console.log(e.keyCode, e.keyIdentifier, e.code);
  });
  window.addEventListener( "keyup", function(e) {
    delete keys[e.keyCode];
  });
  
  /* clear canvas */
  function c_clear() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, CW, CH);
  }


  function draw_text(x, y, font, text, col) {
    ctx.save();
    ctx.font = font;
    ctx.fillStyle = col;
    ctx.fillText(text, x, y);
    ctx.restore();
  };

  function draw_grid() {
    var w = c.width,
      h = c.height;
    for (var i = 0.5; i < w || i < h; i += 15) {
      // draw horizontal lines
      ctx.moveTo(i, 0);
      ctx.lineTo(i, h);
      // draw vertical lines
      ctx.moveTo(0, i);
      ctx.lineTo(w, i);
    };
    ctx.lineWidth = '0.7';
    ctx.strokeStyle = 'green';
    ctx.stroke();
  };

  /* ball_obj; don't judge me I'm old school. */
  var ball = {};
		 ball.x = CW/2;
		 ball.y = CH/2;
		 ball.r = 10
		 ball.vx = 2;
		 ball.vy = -2;
		 ball.draw = function() 
		 	{
		 		ctx.beginPath();
		 		ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
		 		ctx.closePath();
		 		ctx.lineWidth = '3';
		 		ctx.strokeStyle = 'green';
		 		ctx.fillStyle = 'black';
		 		ctx.fill();
		 		ctx.stroke();
		 	}
     
     /* update() function; FIXME */
     function update() 
      {
         if (keys[37] || keys[65]) 
          {
            ball.x -= ball.vx;
          } else if (keys[39] || keys[68]) 
          {
            ball.x += ball.vx;
          }
        
         if (keys[38] || keys[87]) 
          {
            ball.y += ball.vy;
          } else if (keys[40] || keys[83]) 
          {
            ball.y -= ball.vy;
          }
        
        ball.x += ball.vx;
        ball.y += ball.vy;
      }
     
    /* wall collision system */
     function collision() 
      {
        if (ball.x - ball.r <= 0) 
          {
            ball.x = ball.r;
            ball.vx = - ball.vx;
          } else if (ball.x + ball.r >= CW) 
          {
            ball.x = CW - ball.r;
            ball.vx = -ball.vx;
          }
        
        if (ball.y - ball.r <= 0) 
        {
          ball.y = ball.r;
          ball.vy = - ball.vy
        } else if (ball.y + ball.r >= CH) 
        {
          ball.y = CH - ball.r;
          ball.vy = - ball.vy;
        }
      }
  
     /* draw() function */
     function render()
			{
				ctx.fillRect(0, 0, CW, CH);
				draw_grid();
				ball.draw();
				draw_text(CW/28, (CH/26), "20px Monaco", "x : " + Math.round(ball.x), "red");
				draw_text(CW/28, (CH/26) + 30, "20px Monaco", "y : " + Math.round(ball.y), "red");
			}
})();