Ciao

vi posto il mio promo lavoro con il canvas. Prendendo spunto da un sito, ho aggiunto poi delle piccole modifiche. I pratica una pallina si muove sul una porzione dello schermo e ribalzando torna indietro.
Ora vorrei interagire con la pallina. Ad esempio, cliccandoci sopra vorrei che facesse qualcosa, che so .. tornare indietro oppure cambiare traiettoria e cosi via.
Come gestisco questa cosa ?



codice:
<html>
<body>
 
<canvas id="gioco" width="500" height="500"></canvas>
	<script type="text/javascript">
	var canvas = document.getElementById('gioco');
	var c = canvas.getContext('2d');	
	
	// Posizione di partenza
	
	var x = 30;
	var y = 130;
	var m = 1;
	
	// Dimensioni del rettagolo di gioco
	
	var larghezza  = 500;
	var altezza = 500;
	var dimensioneCerchio = 15;
	
	setInterval(muoviPallina,10);  
	setTimeout(muoviPallina,10);  
	
	
	function muoviPallina() 
	{  
	
	 // Disegno i rettangoli
	 
	  c.clearRect(0,0,larghezza,altezza);

	  c.fillStyle = "rgba(100, 100, 255, 0.4)";
	  c.beginPath();
	  c.fillRect(0,0,larghezza,altezza);
	  c.closePath();

	  // Poi la pallina
	  
	  c.fillStyle = "rgba(0, 0, 0, 1)";
	  c.beginPath();
	  c.arc(x, y, dimensioneCerchio, 0, Math.PI*2, true);
	  c.fill();
	  c.closePath();

	  c.clearRect();

	  if (m == 1) 
	  { 
	    // sono sul bordo MASSIMO o a destra o in basso, faccio tornare indietro la palla
		
		if ((y > altezza-dimensioneCerchio) || (x > 500-dimensioneCerchio))
		{ m = -1  }	
		
	  }
	  
	  else
	  {
		// sono sul bordo MINIMO o a sinistra o in alto, faccio tornare indietro la palla
		
		if ((x <= dimensioneCerchio) || (y <= dimensioneCerchio))
		{ m = 1  }
	
	  } 
	  	  
	  x = x + m;
	  y = y + m;
	}
</script>

</body>
</html>