1.

Solve : HTML5 canvas doesn't work?

Answer»

This is my first time trying to write a "game" in HTML5. I'm following CODE from this: http://www.slashgame.net/2011/06/video-intro-to-html5-game-dev.html

I didn't copy & paste it, I wrote it myself with a few changes.

Here it is:

Code: [Select] <script type="text/javascript">
const FPS= 30;
var canvas= null;
var context2D= null;


var playerImg = new image ();
playerImg.src = "http://i46.tinypic.com/25k5y7t.jpg";


var playerPosX = 0;
var playerPosY = 0;


var keys = new Array ();

window.addEventListener('keydown', keyDown, true);
window.addEventListener('keyup', keyUp, true);
function keyDown(evt) {
keys[evt.keyCode] = true;
}
function keyUp(evt) {
keys[evt.keyCode] = false;
}



window.onload = init;

function init() {
canvas = document.getElementById('canvas');
context2D = canvas.getConext('2d');

setInterval(DRAW, 1000/FPS);
}


function draw() {
update();

context2D.ClearRect(0, 0, canvas.width, canvas.height);
context2D.drawImage(playerImg, playerPosX, playerPosY);
}


function update() {
if ((37 in keys && keys[37]) || (65 in keys && keys[65])){ //left
playerPosX -= 2;
}

if ((39 in keys && keys[39]) || (68 in keys && keys[68])){ //right
playerPoslX += 2;
}

</script>
I can't get the player to show up. I'm using Google Chrome.
I have the image on my computer, so I put it in the same directory as the HTML file and just said "player.bmp". That didn't work so I said C:\blah\blah\player.bmp. That didn't work so I uploaded it to Tinypic and did the full URL of that. And that doesn't work either. I don't know what's wrong.

Also, Google Chrome's "inspect element" thing had an error that said "unexpected end of INPUT" at the end. A little bit ago when I was still working on the code it had another error that said something like "image undefined" on the playerImg thing, but now that I've finished the code it doesn't ANYMORE (the only thing I've changed about the image is the image source I think.

The link I have at the top's code has playerVel stuff, I got rid of that on mine. Could that be it?

Thanks.



Discussion

No Comment Found