Member Avatar for jared_1

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
  • 132 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for LastMitch

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
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.