Привет, ребята
Я работаю над простой игрой: на холсте движется синий квадрат, если вы нажимаете на квадрат, то выигрываете, если вы выходите за пределы, вы проигрываете. Я не знаю, как сравнить положение мыши с положением квадрата ...
Вот мой исходный код
<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>
спасибо за вашу помощь:)