madmenyo Posted May 22, 2010 Share Posted May 22, 2010 Hey I'm creating my first game. I am proud to say i just made a script that moves a square with the arrow keys OMG . But just as i thought i'm starting to understand javascript a problem occurs. When everything worked i wanted to add the function game() but that just does not change the background when i have squareman below that 350 or lower... Heres the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>Super squareman</title> <style> #gamebox { margin:auto; border: 1px solid black; width:512px; height:512px; background-color: rgb(192,192,192); } #squareman { position:relative; top: 240px; left: 240px; width:32px; height:32px; background-color:#900; border: 1px solid black; } </style> <script language="javascript"> //instance squareman var squareman; var timer; var squaremanTop = 240; var squaremanLeft = 240; function init() { squareman = document.getElementById('squareman'); document.onkeydown = keyListener; game() } //key detection function function keyListener(e) { if(!e) { e = window.event; } if (e.keyCode==37 && squaremanLeft > 0) { squaremanLeft -= 4; squareman.style.left = squaremanLeft + 'px'; } if (e.keyCode==39 && squaremanLeft < 480) { squaremanLeft += 4; squareman.style.left = squaremanLeft + 'px'; } if (e.keyCode==38 && squaremanTop > 0) { squaremanTop -= 4; squareman.style.top = squaremanTop + 'px'; } if (e.keyCode==40 && squaremanTop < 480) { squaremanTop += 4; squareman.style.top = squaremanTop + 'px'; } } function game() { if (squaremanTop < 350) { gamebox.style.backgroundColor = 'rgb(128,0,0)'; squareman.style.backgroundColor = 'rgb(0,128,0)'; } } </script> </head> <body onload="init()"> <div id="gamebox"> <div id="squareman"> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
ghostcoder Posted May 22, 2010 Share Posted May 22, 2010 Start by adding a semi-colon after game() in your init function. Quote Link to comment Share on other sites More sharing options...
madmenyo Posted May 22, 2010 Author Share Posted May 22, 2010 whoops, fixed that but that probably happened after i started to get stressed and started testing stuff out to make it work. It still does not work, i edit the script above -edit- errrr.... i can't Quote Link to comment Share on other sites More sharing options...
madmenyo Posted May 26, 2010 Author Share Posted May 26, 2010 I fixed it by calling the function game() everytime a down key is pressed. But, it still does not work in firefox.... i tested it in IE 7, opera and firefox. whats different about FF? Quote Link to comment Share on other sites More sharing options...
ignace Posted May 26, 2010 Share Posted May 26, 2010 whats different about FF? FF uses charCode instead of keyCode Quote Link to comment Share on other sites More sharing options...
madmenyo Posted May 26, 2010 Author Share Posted May 26, 2010 Well, i am able to move the cube/square across the gamebox with this code in firefox. The problem is changing the background color when a certain even is true. Or for that matter make "something" happen if a statement about the square is true or false. Quote Link to comment Share on other sites More sharing options...
madmenyo Posted May 29, 2010 Author Share Posted May 29, 2010 I fixed the style problem with FF. I had to correctly refference the CSS element, or so i was told . Instead of using: gamebox.style.backgroundColor = 'rgb(128,0,0)'; I had to use: document.getElementById('gamebox').style.backgroundColor = 'rgb(128,0,0)'; Still some questions on why this does work without the "correct" refference: squareman.style.top = squaremanTop + 'px'; But i just give this thread the solved mark, hope this one can help some other people out. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.