Get Mouse coords canvas, and call function with interval

Question

So I want the game to check at real time for an area of canvas to be clicked. So Im guessing I need a function that get called every .1 of a second? This is what I came up with so far

function init()
{

setInterval('CheckMouseCoords', 60000);
SetUpLevel1();

}


function CheckMouseCoords()
{

var dot = getCursorPosition(e);
if (dot.x < 100 & dot.x < 200)
 {
  if (dot.y < 100 && dot.y < 200)

 {
   HUDOn();
 }  
 }


function HUDOn()
{

drawBackground();
drawBars();
drawPlayer();
drawEnemy();
drawHUD();

}

or would a more resource-friendly way be based on click it checks whether the area (button) has been clicked?

is this any better?

function CheckMouseCoords()
{


var mouseX = Math.floor((e.pageX-$("#canvas").offset().left) / 20);
var mouseY = Math.floor((e.pageY-$("#canvas").offset().top) / 20);

if (mouseX > 100 & mouseY < 500)
 {
 if ((mouseY+100) > 100 && (mouseY+100)< 500)

 {
   HUDOn();
 }  
 }

`setInterval('CheckMouseCoords', 60000);` - This won't invoke the function. This will: `setInterval(CheckMouseCoords, 60000);` — Šime Vidas, Jun 02 '13 at 01:02
IT you are wanting to check the area when user clicks, then bind an onclick event, no need to check mouse coord like that — dchhetri, Jun 02 '13 at 01:15

score 0 · Answer 1 · answered Jun 02 '13 at 02:23

Here’s how to have the browser notify you if mouse events occur

First, some set up. Record the coordinates of where the canvas is on the browser window. We need this because the browser will report mouse location relative to the entire window and we need coordinates relative to the canvas.

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

Then you can request that jQuery let you know when a mousedown event occurs:

    $("#canvas").mousedown(function(e){handleMouseDown(e);});

Finally, when jQuery actually detects a mousedown, jQuery will call your "mousedown handler function". This is where we calculate the mouse position and where you will put any code that you want to execute when mousedown occurs.

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#downlog").html("Down: "+ mouseX + " / " + mouseY);

      // Put your mousedown stuff here

    }

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/taxuM/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#downlog").html("Down: "+ mouseX + " / " + mouseY);

      // Put your mousedown stuff here

    }

    function handleMouseUp(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#uplog").html("Up: "+ mouseX + " / " + mouseY);

      // Put your mouseup stuff here
    }

    function handleMouseOut(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#outlog").html("Out: "+ mouseX + " / " + mouseY);

      // Put your mouseOut stuff here
    }

    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#movelog").html("Move: "+ mouseX + " / " + mouseY);

      // Put your mousemove stuff here

    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>

</head>

<body>

    <p id="downlog">Down</p>
    <p id="movelog">Move</p>
    <p id="uplog">Up</p>
    <p id="outlog">Out</p>
    <canvas id="canvas" width=300 height=300></canvas>

</body>
</html>

Get Mouse coords canvas, and call function with interval

1 Answers1