ping pongo brongo

by Hensixteen

HTML

<canvas id="canvas" width="500" height="500" style="border:1px solid black"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height/2;
var rad = 10;
var direction = (Math.random() * Math.PI);
var negativeX = 1;
var negativeY = 1;
var mousePos = event.clientX;
var score = 0;
var gameStop = false;


ctx.beginPath();
ctx.arc(x, y, rad, 0, 2*Math.PI);
ctx.fill();
ctx.stroke();


setInterval(function() {

	//if(gameStop = false) {
  
  canvas.addEventListener("mousemove", updateMouse);
	function updateMouse(){
		mousePos = event.clientX;
	}
  
  if(y>=(450-rad) && y<=(470+rad)) {
  	if(x>=mousePos && x<=(mousePos+75)) {
      	negativeY = (negativeY * -2);
        score++;
        y=(449-rad);
      }
    else {
      	gameStop = true;
      }
  }
  
	if(x>=(500-rad)) {
  	negativeX = (negativeX * -1);
    x-=5;
  }
  
  if(x<=rad) {
  	x+=5;
  	negativeX = (negativeX * -1);
  }
  
  if(y<=rad) {
  	negativeY = (negativeY * -1);
  }

	x+=(negativeX * Math.cos(direction));
  y-=(negativeY * Math.sin(direction));

	ctx.clearRect(0, 0, 500, 500);
  
  ctx.fillStyle="#FF0000";
	ctx.beginPath();
	ctx.fillRect(0, 450, 500, 50);
	ctx.stroke();
	ctx.fillStyle="#000000"
  
  ctx.beginPath();
  ctx.fillRect(mousePos - 37.5, 450, 75, 20);
  
	ctx.beginPath();
	ctx.arc(x, y, rad, 0, 2*Math.PI);
	ctx.fill();
	ctx.stroke();
  
 	

}, 10);