i've been trying seems should simple, i've been hitting wall. want write javascript code takes image has been drawn inside the canvas tag , moves via keyboard input. when press right arrow key, want image move right. when press left arrow key, want image move left. want keep moving until release key, i'm not interested in slides on bit each key press. here i've come far:
<html> <body onload="load_image()"> <canvas id="mycanvas" width="320" height="240" style="border:1px solid #000000;"> <img id="testpic" src="testpic.png"> </canvas> <script> function load_image() { var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); var img = document.getelementbyid("testpic"); ctx.drawimage(img,10,10);} document.addeventlistener('keydown', function(event) { if (event.keycode == 37) { // code starts left image movement goes here. } else if (event.keycode == 39) { // code starts right image movement goes here. } }, true); document.addeventlistener('keyup', function(event) { if (event.keycode == 37) { // code stops left image movement goes here. } else if (event.keycode == 39) { // code stops right image movement goes here. } }, true); </script> </body> </html> i've been trying examples several websites, none of them work. best can redraw image on , on key presses, not work me. tips or guidance appreciated. if present me working code, love you!
i made working fiddle of want here: https://jsfiddle.net/uu4jqpqy/1/
the main point have have setinterval loop of redraws in right direction on key down, , key clears interval:
if (event.keycode == 37) { // code starts left image movement goes here. if(!leftpointer) { leftpointer = setinterval(function () { xval = xval - 1; ctx.clearrect(0, 0, c.width, c.height); ctx.drawimage(img,xval,yval); }, speed) } } and
if (event.keycode == 37) { // code stops left image movement goes here. clearinterval(leftpointer); } you have make of variables in outer scope work.
Comments
Post a Comment