javascript - I can't get mouse input in my HTML5 game -
i'm trying mouse input in game; appreciated.
i call event listeners in init() function, , have both mousemoved() , mouseclicked() functions. haven't been able response.
(i asked make jsfiddle project, here is. it's not rendering images, reason. once there's input, there should text on top left shows mouse coordinates. also, when click on canvas, should alert.)
var canvasbg = document.getelementbyid('canvasbg'); var ctxbg = canvasbg.getcontext('2d'); var canvasentities = document.getelementbyid('entities'); var entitiesctx = canvasentities.getcontext('2d'); var isplaying = false; var player; var enemy; var mousex, mousey; var playerimg = new image(); playerimg.src = 'http://placekitten.com/g/50/50'; var enemyimg = new image(); enemyimg.src = 'http://placehold.it/50x50'; window.onload = init; var requestanimframe = window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe || function(callback) { window.settimeout(callback, 1000 / 60); }; // main functions function init() { console.debug('init()'); player = new entity(250, // xpos 225, // ypos 0, // xd 0, // yd 3, // speed 50, // width 50, // height playerimg, // imgsrc true); // player? enemy = new entity(500,225,0,0,1,25,25,enemyimg,false); canvasbg.addeventlistener('mousemove', mousemoved, false); canvasbg.addeventlistener('click', mouseclicked, false); startloop(); } function loop() { // console.debug('game loop'); if(isplaying){ update(); draw(); requestanimframe(loop); } } function startloop() { isplaying = true; loop(); } function stoploop() { isplaying = false; } function clearallctx() { ctxbg.clearrect(0, 0, canvasbg.width, canvasbg.height); entity.clearctx(); } function draw(){ clearallctx(); player.draw(); enemy.draw(); } function update(){ player.update(); } // end of main functions // input handling function mousemoved(e) { mousex = e.layerx - canvasbg.offsetleft; mousey = e.layery - canvasbg.offsettop; document.getelementbyid('mousecoors').innerhtml = 'x: ' + mousex + ' y: ' + mousey; } function mouseclicked(e) { alert('you clicked mouse!'); } // end of input handling // entity functions function entity(xpos, ypos, xd, yd, speed, width, height, imagesrc, player) { this.xpos = xpos; this.ypos = ypos; this.xd = xd; this.yd = yd; this.speed = speed; this.width = width; this.height = height; this.imagesrc = imagesrc; this.player = player; } entity.clearctx = function(){ entitiesctx.clearrect(0,0,canvasbg.width,canvasbg.height); }; entity.prototype.draw = function () { entitiesctx.drawimage(this.imagesrc, this.xpos, this.ypos); }; entity.prototype.update = function () { this.xpos += this.xd; this.ypos -= this.yd; }; // end of entity functions
so theres few things going on, first fiddle loading set incorrectly, once changed no wrap in body works.
the actual issue you're having due background canvas being under entities canvas, cant of mouse events.
one solution use pointer-events , set none pointer-events: none on entities canvas.
#entities { margin: -500px auto; pointer-events: none; } another option if need wider browser support have entities canvas capture mouse events instead.
Comments
Post a Comment