title: Bouncing Ball Game, Mouse Detect Event, JavaScript
body: <p>I've already created a bouncing ball which bounces off the walls of the HTML5 Canvas that I have specified.</p>
  
  <p>My goal is to make a "Game Over" screen appear when the pointer (mouse) hovers over the ball. </p>
  
  <p>I have already searched and found some tutorials on mouse events in Javascript, but I'm not really sure how to implement them into my code =/. </p>
  
  <p>Any help would be amazing.</p>
  
  <pre><code>&lt;script&gt;
  var x = Math.floor((Math.random() * 600) + 1);
  var y = Math.floor((Math.random() * 300) + 1);
  
  var dx = 2;
  var dy = 4;
  
  function begin()
  {
      gameCanvas = document.getElementById('gameCanvas');
      context = gameCanvas.getContext('2d');
      return setInterval (draw, 20);
  }
  
  begin();
  
  
  function draw()
  {
      context.clearRect(0,0,600,300);
      context.fillStyle = "#0000FF";
      context.beginPath();
      context.arc(x,y,80,0,Math.PI*2,true); 
      context.closePath();
      context.fill();
  
      if (x &lt; 0 || x &gt; 600) dx=-dx
  
      if (y &lt; 0 || y &gt; 300) dy=-dy;
  
      x += dx;
      y += dy;
  }
  
  gameCanvas.onmousemove = function (e)
  {
      var gameCanvas = e.target;
      var context = gameCanvas.getContext('2d');
      var coords = RGraph.getMouseXY(e);
  }
  </code></pre>
  
  <p></p>