Post
Ask Question

Cursor Move Ball in HTML5

Introduction

 
In this article, we describe how to create a cursor of a moving ball by using the canvas element of HTML5. First, we create a ball, then apply JavaScript to move the ball with the mouse cursor and then apply CSS to add style. The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. 
 
The canvas element looks a lot like the <img> element, the only difference is that it doesn't have the src and alt attributes. The <canvas> element has only two attributes - width and height. It is always recommended to use an id in canvas to make it easier to identify it in our script.
 
Step 1 First we create a canvas element in the body and define its id, width, and height. In the body we define an onload method init() also, like this:
  1. <body onload="init();">  
  2.  <div><h1>HTML5 Canvas Interactive Ball</h1></div>  
  3.     <canvas id="game" width="1000" height="800" >  
  4.     </canvas> 
Step 2 Then we define the JavaScript  init, ev_cursor and create functions.
 
Init function
 
This function uses the getElementById method to get the game id and use a and b variable to define the coordinate axis and mA and mB variables to define mouse cursor coordinates. A Delay variable is used to create a delay and a timer variable to create a timer of 10, like this
 
setInterval(create,10);
 
We use setInterval to create a loop to call every 20ms and the canvas.addEventListener mousemove event handler.
 
canvas.addEventListener('mousemove', ev_cursor, false);
 
Create a function
 
In this function, we use the canvas.getContext method to return an object that provides methods and properties for drawing, image manipulations on the canvas element. We increment the timer by 1 and use the clearRect method to clear the rectangle and arc method to create the ball, like this:
  1. <script type="text/javascript">  
  2.       var a=0;  
  3.       var b=0;   
  4.       var mA=0;  
  5.       var mB=0;  
  6.       var delay=10;  
  7.       var timer=10;  
  8.       function init(){  
  9.           var canvas = document.getElementById('game');  
  10. <div></div>  
  11.           //loop calls create each 20 ms  
  12.           setInterval(create,10);   
  13.           canvas.addEventListener('mousemove', ev_cursor, false);  
  14. <div></div>  
  15.       }  
  16.       function ev_cursor (ev) {  
  17.             mA = ev.layerX;  
  18.             mB = ev.layerY;  
  19.       }  
  20.       function create(){  
  21.         var canvas = document.getElementById('game');  
  22.         if (canvas.getContext){  
  23.           var c = canvas.getContext('2d');  
  24.           timer+=1;  
  25.           c.fillStyle ="Blue";  
  26.           c.strokeStyle="#000";  
  27.           delay=20-(mB/100);  
  28.           accelX=mA-a;  
  29.           accelY=mB-b;  
  30.           a+=(accelX)/delay;  
  31.           b+=(accelY)/delay;  
  32.           a+=Math.sin(timer)*accelX/5;  
  33.           b+=Math.sin(timer)*accelY/5;        
  34.           c.clearRect(0,0,1000,900);          
  35.           c.beginPath();  
  36.           c.arc(a,b,100,0,Math.PI*2,true);     // 100 is ball size  
  37.           c.fill();  
  38.         }  
  39.       }  
  40.     </script> 
Step 3 We use CSS for describing the the look and formatting to our HTML page, like this:
  1. <style type="text/css">  
  2.        canvas { border: 1px solid black; }   
  3.     #game{background:Grey}  
  4.     </style> 
The complete code looks like this:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Cursor Move Ball </title>  
  5.     <style type="text/css">  
  6.        canvas { border: 1px solid black; }   
  7.     #game{background:Grey}  
  8.     </style>  
  9.     <script type="text/javascript">  
  10.       var a=0;  
  11.       var b=0;   
  12.       var mA=0;  
  13.       var mB=0;  
  14.       var delay=10;  
  15.       var timer=10;  
  16. function init(){  
  17.           var canvas = document.getElementById('game');  
  18. <div></div>  
  19.           //loop calls create each 20 ms  
  20.           setInterval(create,10);   
  21.           canvas.addEventListener('mousemove', ev_cursor, false);  
  22. <div></div>  
  23.       }  
  24.       function ev_cursor (ev) {  
  25.             mA = ev.layerX;  
  26.             mB = ev.layerY;  
  27.       }  
  28.       function create(){  
  29.         var canvas = document.getElementById('game');  
  30.         if (canvas.getContext){  
  31.           var c = canvas.getContext('2d');  
  32.           timer+=1;  
  33.           c.fillStyle ="Blue";  
  34.           c.strokeStyle="#000";  
  35.           delay=20-(mB/100);  
  36.           accelX=mA-a;  
  37.           accelY=mB-b;  
  38.           a+=(accelX)/delay;  
  39.           b+=(accelY)/delay;  
  40.           a+=Math.sin(timer)*accelX/5;  
  41.           b+=Math.sin(timer)*accelY/5;        
  42.           c.clearRect(0,0,1000,900);          
  43.           c.beginPath();  
  44.           c.arc(a,b,100,0,Math.PI*2,true);     // 100 is ball size  
  45.           c.fill();  
  46.         }  
  47.       }  
  48.     </script>  
  49. </head>  
  50. <body onload="init();">  
  51.  <div><h1>HTML5 Cursor Move Ball </h1></div>  
  52.     <canvas id="game" width="1000" height="800" >  
  53.     </canvas>  
  54. </body>  
  55. </html> 
Output 
cursor_ball.jpg


Similar Articles