S2JS - Rotating, flipping, pointing - another game : Keeping track of the mouse

First let's deal with keeping track of the mouse (or touch) position.

We'll declare a couple of global variables to store the mouse x and y position.

Just while we're working on this, we'll also display those variables on each frame.

I've temporarily removed our Sprite definition just to keep things smaller until we need it.

Have a look at the code below and make sure you understand it. It's a lot simpler than just of the code we've seen recently.

(It just keeps displaying "0,0" because we haven't added the bit to detect the mouse position yet)

<html> <body> <canvas id="myCanvas" width=300 height=300 style="background-color:MediumSeaGreen"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second var mouse_x = 0; var mouse_y = 0; // Where is the mouse function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the frame ctx.font="25px Arial"; ctx.fillText("Mouse is at " + mouse_x + ", " + mouse_y, 0, 20); } setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>