into this simple code I use an eventListener which doesnt look to work at all. The canvas display an image and the given hitpaint function is supposed determines whether a click occurs. I cant understand why the eventListener behaves like that. Any insight would be helpful.
mycanv.addEventListener("click", function(e){
var output = document.getElementByID("output");
ctx.fillStyle = 'blue';
//ctx.clearRect(0,0,100,20);
if (hitpaint){
//ctx.fillText("hit",100,20);
output.innerHTML = "hit";
}
else
//ctx.fillText("miss",100,20);
output.innerHTML = "miss";
}, false);
the hitpaint looks like that:
function hitpaint(mouse_event) {
var bounding_box=mycanv.getBoundingClientRect();
var mousex=(mouse_event.clientX-bounding_box.left) *
(mycanv.width/bounding_box.width);
var mousey=(mouse_event.clientY-bounding_box.top) *
(mycanv.height/bounding_box.height);
var pixels=ctx.getImageData(mousex,mousey,1,1);
for (var i=3; i<pixels.data.length; i+=4) {
// If we find a non-zero alpha we can just stop and return
// "true" - the click was on a part of the canvas that's
// got colour on it.
if ( pixels.data[i]!==0 ) return true;
}
// The function will only get here if none of the pixels matched in
return false;
}
Finally the main loop which display the picture in random location into the canvas:
function start(){
// main game function, called on page load
setInterval( function() {
ctx.clearRect(cat_x, cat_y, 100, 100);
cat_x = Math.random() * mycanv.width-20;
cat_y = Math.random() * mycanv.height-20;
draw_katy(cat_x,cat_y);
}, 1000);
}
Aucun commentaire:
Enregistrer un commentaire