javascript - How can I get my JS car to move? -
i'm trying auto move arrow keys , rotate well. the auto loaded onto canvas, not moving keys. think i've set in need, or i'm wrong. or, there minor mistakes. anyways, please help noob me :d!
<!doctype html> <html lang="en"> <head> <title>ball</title> <script src="http://code.jquery.com/jquery-git2.js"></script> </head> <body> <center> <canvas id="gamecanvas" width="500" height="500" style="border:5px solid green"></canvas> <script src="js/game.js"></script> </center> </body> </html> js:
//set context canvas var context = $('#gamecanvas')[0].getcontext('2d'); //dimensions canvas var width = $('#gamecanvas').width(); var height = $('#gamecanvas').height(); //image auto var auto = new image(); car.src = "http://thumb1.shutterstock.com/thumb_small/338038/192139124/stock-vector-illustration-of-a-red-sports-car-top-view-192139124.jpg"; //car variables , position var x = 80; var y = 80; var vx = 0; var vy = 0; var angle = 0; var mod = 0; //draws auto during motion var moveinterval = setinterval(function () { draw(); }, 30); //clears canvas function draw() { context.clearrect(0, 0, gamecanvas.width, gamecanvas.height); // alter direction , velocity of auto x += (vx * mod) * math.cos(math.pi / 180 * angle); y += (vy * mod) * math.sin(math.pi / 180 * angle); context.save(); context.translate(x, y); context.rotate(math.pi / 180 * angle); context.drawimage(car, -(car.width / 2), -(car.height / 2)); context.restore(); } //codes keyboard keys $('#gamecanvas').keydown(function(event) { code = event.keycode; if (code == 37) vx = -10.0; // left key pressed if (code == 39) vx = 10.0; // rightkey pressed if (code == 38) vy = -2.0; // key pressed if (code == 40) vy = 2.0; // downwards key pressed }); $('#gamecanvas').up(function(event) { code = event.keycode; if (code == 37) vx = 0.0; // leftkey not pressed if (code == 39) vx = 0.0; // rightkey not pressed if (code == 38) vy = 0.0; // upkey not pressed if (code == 40) vy = 0.0; // downkey not pressed }); update();
maybe this:
//set context canvas var context = $('#gamecanvas')[0].getcontext('2d'); //dimensions canvas var width = $('#gamecanvas').width(); var height = $('#gamecanvas').height(); //image auto var auto = new image(); car.src = "http://thumb1.shutterstock.com/thumb_small/338038/192139124/stock-vector-illustration-of-a-red-sports-car-top-view-192139124.jpg"; //car variables , position var x = 80; var y = 80; var vx = 0; var vy = 0; var angle = 0; var mod = 0; draw(); function draw() { context.clearrect(0, 0, gamecanvas.width, gamecanvas.height); x += (vx * mod) * math.cos(math.pi / 180 * angle); y += (vy * mod) * math.sin(math.pi / 180 * angle); console.log(vx); console.log(vy); context.translate(vx, vy); context.rotate(math.pi / 180 * angle); context.drawimage(car, x, y); } $(document).keydown(function(event) { code = event.keycode; if (code == 37) { vx = -10.0; } // left key pressed if (code == 39){ vx = 10.0;} // rightkey pressed if (code == 38){ vy = -2.0;} // key pressed if (code == 40){ vy = 2.0; } // downwards key pressed draw(); }); javascript function object html5-canvas
No comments:
Post a Comment