0

Ok seriously this is driving me insane. I am using firefox and i cannot get this image to stay on screen. Im trying to make the image move when i press keys but any keybinding makes my image vanish.

I guess i just suck idk.

<html>

<canvas height="480" id="gamescreen" width="640">
Browser not compatible with HTML5 canvas
</canvas>
<head>
    <script>

    var imageX=0
    var imageY=0


var keys = new Array();

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



function startmygame()
{
 canvas = document.getElementById('gamescreen');
 context2D = canvas.getContext('2d');
 setInterval(gameloop, 1000 / 30);
 update();
}

function gameloop()
{
    draw();
    input();
}
function draw()
{
var img = new Image();
img.src = "https://c9.io/starwisp7193/testweb/workspace/Felicia_Up_Close_by_WarrenLouw.jpg";
context2D.drawImage(img,imageX,imageY);
}

function input()
{
    if ((37 in keys && keys[37]) || (65 in keys && keys[65])){ //left
  imageX -= 2;
 }
 if ((39 in keys && keys[39]) || (68 in keys && keys[68])){ //right
  imageX += 2;
 }
}




 </script>
</head>
<body>    


</body>

</html>
2
Contributors
1
Reply
11
Views
4 Years
Discussion Span
Last Post by LastMitch
0

I am using firefox and i cannot get this image to stay on screen. Im trying to make the image move when i press keys but any keybinding makes my image vanish.

Does it stay all the other browsers? \

You need to set the image in an absolute position in CSS.

On a side note, some HTML5/CSS3 might not work on certain browsers.

I would check the code you are doing to see whether it work on firefox version.

Edited by LastMitch

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.