how can move object keyboard keys using html5 , javascript. here tried below code not moving can 1 move object using keyboard arrow keys?
<!doctype html> <html> <head> </head> <body onload="gameloop()" onkeydown="keydown(event)" onkeyup="keyup(event)" bgcolor='green'> <canvas id="mycanvas"></canvas> <script> var canvas = document.getelementbyid('mycanvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(100, 100, 50, 0.25 * math.pi, 1.25 * math.pi, false); ctx.fillstyle = "rgb(255, 255, 0)"; ctx.fill(); ctx.beginpath(); ctx.arc(100, 100, 50, 0.75 * math.pi, 1.75 * math.pi, false); ctx.fill(); ctx.beginpath(); ctx.arc(100, 75, 10, 0, 2 * math.pi, false); ctx.fillstyle = "rgb(0, 0, 0)"; ctx.fill(); //moves// var xpos=500; var ypos=550; var xspeed=1; var yspeed=0; var maxspeed=5; //boundaries// var minx=500; var miny=200; var maxx=990; var maxy=400; //controller var uppressed=0; var downpressed=1; var leftpressed=0; var rightpressed=0; function slowdownx() { if(xspeed > 0) xspeed=xspeed-1; if(xspeed<0) xspeed=xspeed+1; } function slowdowny() { if(yspeed > 0) yspeed = yspeed-1; if(yspeed < 0) yspeed = yspeed+1; } function gameloop() { xpos=math.min(math.max(xpos+xspeed,minx),maxx); ypos=math.min(math.max(ypos+yspeed,miny),maxy); xpos = document.getelementbyid('mycanvas').style.left; ypos = document.getelementbyid('mycanvas').style.top; if (uppressed == 1) yspeed = math.max(yspeed - 3,-3*maxspeed); if (downpressed == 1) yspeed = math.min(yspeed + 3,3*maxspeed) if (rightpressed == 1) xspeed = math.min(xspeed + 1,1*maxspeed); if (leftpressed == 1) xspeed = math.max(xspeed - 1,-1*maxspeed); if (uppressed == 0 && downpressed == 0) slowdowny(); if (leftpressed == 0 && rightpressed == 0) slowdownx(); return settimeout("gameloop()",10); } function keydown(e) { var code = e.keycode ? e.keycode : e.which; if (code == 38) uppressed = 1; if (code == 40) downpressed = 1; if (code == 37) leftpressed = 1; if (code == 39) rightpressed = 1; } function keyup(e) { var code = e.keycode ? e.keycode : e.which; if (code == 38) uppressed = 0; if (code == 40) downpressed = 0; if (code == 37) leftpressed = 0; if (code == 39) rightpressed = 0; } </script> </body> </html>
here basics of drawing shape on html canvas , moving arrowkeys
disclaimer: code not best game technique, it’s meant clear instruction. ;)
first create few variables define ball:
// ball @ coordinates 70,75 var ballx=70; var bally=75; // ball have radius of 15; var ballradius=15; next create function draw ball @ specified coordinates
function draw(){ // clear canvas next frame ctx.clearrect(0,0,canvas.width,canvas.height); // draw ball use can move left/right arrow keys // ball's center @ ballx / bally // ball have radius of ballradius ctx.beginpath(); ctx.arc(ballx,bally,ballradius,0,math.pi*2,false); ctx.closepath(); ctx.fill(); } now listen user’s keystrokes.
// listen when user presses key down window.addeventlistener("keydown", keydownhandler, true); when user presses key down:
- if user presses left or right arrows, move ball changing it’s “ballx” coordinate.
- after changing balls position, redraw canvas
this code handles when key down (called addeventlistener):
// here handle command keys function keydownhandler(event){ // key user pressed var key=event.which; // let keypress handle displayable characters if(key>46){ return; } switch(key){ case 37: // left key // move ball 1 left subtracting 1 ballx ballx -= 1; break; case 39: // right key // move ball 1 right adding 1 ballx ballx += 1; break; default: break; } // redraw ball in new position draw(); } here code , fiddle: http://jsfiddle.net/m1erickson/tsxmx/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; padding:20px;} #canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); ctx.strokestyle="blue"; ctx.fillstyle="red"; var ballx=70; var bally=75; var ballradius=15; var leftwall=30; var rightwall=120; draw(); function draw(){ // clear canvas next frame ctx.clearrect(0,0,canvas.width,canvas.height); // tell canvas start new path // draw walls on left , right ctx.beginpath(); ctx.moveto(leftwall,0); ctx.lineto(leftwall,canvas.height); ctx.moveto(rightwall,0); ctx.lineto(rightwall,canvas.height); ctx.linewidth=2; ctx.stroke(); // draw ball use can move left/right arrow keys ctx.beginpath(); ctx.arc(ballx,bally,ballradius,0,math.pi*2,false); ctx.closepath(); ctx.fill(); } // here handle command keys function keydownhandler(event){ // key user pressed var key=event.which; // let keypress handle displayable characters if(key>46){ return; } switch(key){ case 37: // left key // move ball 1 left subtracting 1 ballx ballx -= 1; // calc ball's left edge var ballleft=ballx-ballradius; // keep ball moving through left wall if(ballleft<=leftwall){ ballx=leftwall+ballradius; } break; case 39: // right key // move ball 1 right adding 1 ballx ballx += 1; // calc ball's right edge var ballright=ballx+ballradius; // keep ball moving through right wall if(ballright>=rightwall){ ballx=rightwall-ballradius; } break; default: break; } // redraw draw(); } // listen when user presses key down window.addeventlistener("keydown", keydownhandler, true); }); // end $(function(){}); </script> </head> <body> <p>click in red box keyboard focus</p> <p>then move ball left , right arrow keys</p> <canvas id="canvas" width=200 height=150></canvas> </body> </html> 
Comments
Post a Comment