javascript - Simple HTML and JS code won't work? -
i'm trying create racing game, , first step seek out making auto , getting move bit. unfortunately, isn't working, nil showing on canvas, not rectangle nor car. ideas (of course of study have ideas)? sorry if code isn't formatted correctly, joined site today.
html:
<!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:
window.onload = function() { var x = 0; var y = 0; var speed = 5; var angle = 0; var mod = 0; var canvas = $('#gamecanvas')[0].getcontext('2d'); var context = gamecanvas.getcontext('2d'); var auto = new image(); car.src = "gamecar.png"; window.addeventlistener("keydown", keypress_handler, false); window.addeventlistener("keyup", keypress_handler, false); var moveinterval = setinterval(function() { draw(); }, 30); }; function render() { context.clearrect(0, 0, width, height); context.fillstyle = "rgb(200, 100, 220)"; context.fillrect(50, 50, 100, 100); x += (speed * mod) * math.cos(math.pi / 180 * angle); y += (speed * 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(); } function keyup_handler(event) { if (event.keycode == 87 || event.keycode == 83) { mod = 0; } } function keypress_handler(event) { console.log(event.keycode); if (event.keycode == 87) { mod = 1; } if (event.keycode == 83) { mod = -1; } if (event.keycode == 65) { angle -= 5; } if (event.keycode == 68) { angle += 5; } }
this need start:
function draw() { context.clearrect(0, 0, canvas.width, canvas.height); context.fillstyle = "rgb(200, 100, 220)"; context.fillrect(50, 50, 100, 100); x += (speed * mod) * math.cos(math.pi / 180 * angle); y += (speed * 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(); } that original render function, utilize draw. also, there invalid width , height references inside, used canvas.width , canvas.height.
this progress far: http://jsfiddle.net/qf47mb4k/
added existing auto image here, no more errors in console: http://jsfiddle.net/qf47mb4k/2/
wasd keys working, need clear canvas on every frame expected.
after fixing canvas , context objects (also removed jquery):
var canvas = document.getelementbyid('gamecanvas'); var context = canvas.getcontext('2d'); to brakes working, need prepare keyup handler:
window.addeventlistener("keyup", keyup_handler, false); everything seems fine now: http://jsfiddle.net/qf47mb4k/4/. enjoy driving car!
full code / working example class="snippet-code-js lang-js prettyprint-override">var x = 0; var y = 0; var speed = 5; var angle = 0; var mod = 0; var canvas = document.getelementbyid('gamecanvas'); var context = canvas.getcontext('2d'); var auto = new image(); car.src = "http://images.clipartpanda.com/car-top-view-clipart-red-racing-car-top-view-fe3a.png"; window.addeventlistener("keydown", keypress_handler, false); window.addeventlistener("keyup", keyup_handler, false); var moveinterval = setinterval(function () { draw(); }, 30); function draw() { context.clearrect(0, 0, canvas.width, canvas.height); context.fillstyle = "rgb(200, 100, 220)"; context.fillrect(50, 50, 100, 100); x += (speed * mod) * math.cos(math.pi / 180 * angle); y += (speed * 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(); } function keyup_handler(event) { if (event.keycode == 87 || event.keycode == 83) { mod = 0; } } function keypress_handler(event) { console.log(event.keycode); if (event.keycode == 87) { mod = 1; } if (event.keycode == 83) { mod = -1; } if (event.keycode == 65) { angle -= 5; } if (event.keycode == 68) { angle += 5; } } class="snippet-code-html lang-html prettyprint-override"><canvas id="gamecanvas" width="500" height="500" style="border:5px solid green"></canvas>
javascript jquery html5 canvas
No comments:
Post a Comment