Javascript 获取鼠标坐标画布，并使用间隔调用函数_Javascript_Jquery_Canvas

Javascript 获取鼠标坐标画布，并使用间隔调用函数

javascript jquery canvas

Javascript 获取鼠标坐标画布，并使用间隔调用函数,javascript,jquery,canvas,Javascript,Jquery,Canvas,因此，我希望游戏能够实时检查画布区域是否被点击。所以我猜我需要一个每.1秒调用一次的函数？这就是我到目前为止想到的 function init() { setInterval('CheckMouseCoords', 60000); SetUpLevel1(); } function CheckMouseCoords() { var dot = getCursorPosition(e); if (dot.x < 100 & dot.x < 200) { if (

因此，我希望游戏能够实时检查画布区域是否被点击。所以我猜我需要一个每.1秒调用一次的函数？这就是我到目前为止想到的

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();

}

函数init（）
{
设置间隔（'CheckMouseCoords'，60000）；
SetUpLevel1（）；
}
函数CheckMouseCoords（）
{
var点=getCursorPosition（e）；
如果（点x<100和点x<200）
{
如果（点y<100和点y<200）
{
HUDOn（）；
}  
}
函数HUDOn（）
{
牵引杆接地（）；
牵引杆（）；
drawPlayer（）；
付款人（）；
drawHUD（）；
}

或者，一种更为资源友好的方法是基于单击它来检查区域（按钮）是否已被单击

这样更好吗

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();
 }  
 }

函数CheckMouseCoords（）
{
var mouseX=Math.floor（（e.pageX-$（“#canvas”）.offset（）.left）/20）；
var mouseY=数学地板（（e.pageY-$（“#canvas”）.offset（）.top）/20）；
如果（mouseX>100和mouseY<500）
{
如果（（鼠标+100）>100&（鼠标+100）<500）
{
HUDOn（）；
}  
}

以下是如何让浏览器在发生鼠标事件时通知您的方法

首先，一些设置。记录画布在浏览器窗口上的位置坐标。我们需要这样做，因为浏览器将报告鼠标相对于整个窗口的位置，我们需要画布的坐标

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

然后，您可以请求jQuery在mousedown事件发生时通知您：

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

最后，当jQuery实际检测到mousedown时，jQuery将调用您的“mousedown处理函数”。这是我们计算鼠标位置的地方，您将在这里放置发生mousedown时要执行的任何代码

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

      // Put your mousedown stuff here

    }

下面是代码和小提琴：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
功能手柄向下（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
$（“#downlog”）.html（“Down:“+mouseX+”/“+mouseY”）；
//把你的鼠标下的东西放在这里
}
功能handleMouseUp（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
$（“#uplog”）.html（“Up:“+mouseX+”/“+mouseY”）；
//把你的鼠标放在这里
}
函数handleMouseOut（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
$（“#outlog”）.html（“Out:+mouseX+”/“+mouseY”）；
//把你的老鼠屎放在这里
}
功能手柄移动（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
$（“#movelog”）.html（“移动：+mouseX+”/“+mouseY”）；
//把你的mousemove放在这里
}
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUp（e）；}）；
$（“#canvas”）.mouseout（函数（e）{handleMouseOut（e）；}）；
})；//end$（函数（）{}）；
向下
移动
向上
退出

Global code容易出错。请阅读模块模式。

setInterval（'CheckMouseCoords'，60000）；

-这不会调用函数。这将：

setInterval（CheckMouseCoords，60000）；

如果您希望在用户单击时检查区域，然后绑定onclick事件，则无需像这样检查鼠标坐标

<!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>