Question

嗨伙计们我在一个简单的游戏上工作：在画布上移动一个蓝色方块，如果你在广场上狡猾，如果你在外面输了你就输了。我不知道如何将鼠标位置与方形位置进行比较...... 这是我的源代码

<head>  
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>  
<script>
var context;
var x=6; // the start position
var y=6; // same
var dx=1; // the speed  
var dy=1; // the speed  


function init()
{
  context= myCanvas.getContext('2d');
  setInterval(draw,6); 
  clicrect();
}

function draw()
{
  context.clearRect(0,0, 300,300);
  context.beginPath();
  context.fillStyle="#0000ff";
  context.fillRect(x,y,50,50);
  context.closePath();
  context.fill();
  // Boundary Logic
if( x<1 || x>250-50) dx=-dx;
if( y<1 || y>300-50) dy=-dy;
x+=dx;
y+=dy;

}

function clicrect() {
$('#myCanvas').click(function (e)
{
    if (e.target == document.getElementById("myCanvas:animated"))  //that's where I am strugglin, I try to compare the mouse position with the blue square position, but the myCanvas:animated don't work.
        alert("In");
    else
        alert("Out!");
});
}

</script>
</head>
<body onLoad="init();">
  <canvas id="myCanvas" width="300" height="300" >
  </canvas>
</body>

感谢您的帮助：）

Answer 1

看看this - 看起来像是一个合理的起点 - 画布中的元素不在DOM中，因此jquery本身不能直接交互

如何在我用fillrect（）绘制的正方形上附加click（）之类的事件

1 个答案: