-
May 23rd, 2010, 07:00 AM
#1
Javascript - Function not working
Hey all,
I'm starting to learn javascript, well at least i thought i was learning it . I created this script where you can move a square inside a box and thats all working and all. So i thought lets make a game from it and i added the function "game()". But whenever the statement becomes true nothing happens. I though i finally started figuring out how things work in javascript but i guess thats not true .
PHP Code:
<html>
<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>
Last edited by HanneSThEGreaT; May 24th, 2010 at 08:03 AM.
-
May 24th, 2010, 08:08 AM
#2
Re: Javascript - Function not working
You are calling the game function only one time, and that is when the page loads, so in fact, that causes nothing to happen. You have to call your game function from the press of either the up / down keys. If I do this :
PHP Code:
function init()
{
squareman = document.getElementById('squareman');
document.onkeydown = keyListener;
//REMOVED game(); HERE
}
//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';
game(); //ADDED THE CALL TO game() HERE!
}
}
It does change colours when moving down
-
May 26th, 2010, 03:29 AM
#3
Re: Javascript - Function not working
Miraculously it doesn't . However i can only check it in firefox, i know i should get opera and safari but i really don't care that much about IE atm.
-
May 26th, 2010, 04:35 AM
#4
Re: Javascript - Function not working
So you're saying it still doesn't work?
Tested mine on IE 8.
-
May 26th, 2010, 04:42 AM
#5
Re: Javascript - Function not working
I just checked it with IE and opera and it does work. But it still does not work with firefox, and i'm using firefox to debug so i really want to know whats making it not work in firefox.
I am currently searching the net for similar problems with javascript style.change in firefox, i have found some posts but i can't find a clear answer on how to fix mine and specifically whats causing firefox to not change my div.
Last edited by menyo; May 26th, 2010 at 04:44 AM.
-
May 26th, 2010, 07:38 AM
#6
Re: Javascript - Function not working
You're going to need to make a couple of changes...
1. Window event capturing for cross-browser support
Code:
if (window.document.addEventListener) {window.document.addEventListener("keydown", keyListener, false);}
else {window.document.attachEvent("onkeydown", keyListener);}
2. Repeat key for Firefox
Unfortunately, as Firefox progressed, the developers thought it would be more secure to not pass repeating keystrokes for the keydown event. So, you're going to have to create a timer (setInterval) and check to see if the keyup event has occurred. If not, repeat your method.
Last edited by PeejAvery; May 26th, 2010 at 12:21 PM.
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
-
May 26th, 2010, 08:39 AM
#7
Re: Javascript - Function not working
Hey PeejAvery,
I don't get it, i am able to move the square around the gamebox using my arrow keys in firefox. That means the event capturing is working and the variable squaremanTop is being calculated each time right? So how can the keylistener be the problem?
Anyway, i take it that the code you gave should replace "document.onkeydown = keyListener;" in my init() function. If i'm correct that code checks if the browser has a key listener and if not it makes one. I replaced the line with your code and it's still not working (the background color style change part that is).
About the repeat key for firefox, does this mean i'm unable to hold down the key in FF? Well i can hold down the key and after a second or 2 it will repeat. Obviously this isn't the effect i want in the end but figured i fix this later on. Or am i totaly wrong about this and should this fix my problem with changing css styles?
I just think it's weird that i am able to change top and left CSS offset in firefox (moving squareman inside the gamebox) but i am not able to change the background color using the same method with firefox.
-
May 26th, 2010, 12:26 PM
#8
Re: Javascript - Function not working
Originally Posted by menyo
I don't get it, i am able to move the square around the gamebox using my arrow keys in firefox. That means the event capturing is working and the variable squaremanTop is being calculated each time right? So how can the keylistener be the problem?
It's not "the problem," but it is a cross-browser compliance issue. Not all browsers use document.onkeydown.... For some, you have to attach the events. The code I showed is completely cross-browser compliant for the attaching of an event handler.
Originally Posted by menyo
Anyway, i take it that the code you gave should replace "document.onkeydown = keyListener;" in my init() function. If i'm correct that code checks if the browser has a key listener and if not it makes one. I replaced the line with your code and it's still not working (the background color style change part that is).
Once again...it's not "the problem." However, the code should look like this...
Code:
function init() {
squareman = document.getElementById('squareman');
if (window.document.addEventListener) {window.document.addEventListener("keydown", keyListener, false);}
else {window.document.attachEvent("onkeydown", keyListener);}
}
Originally Posted by menyo
About the repeat key for firefox, does this mean i'm unable to hold down the key in FF? Well i can hold down the key and after a second or 2 it will repeat. Obviously this isn't the effect i want in the end but figured i fix this later on. Or am i totaly wrong about this and should this fix my problem with changing css styles?
In Firefox for Windows, it will repeat with the exact same delay as specified for the key delay. You can adjust that in control panel. However, Firefox for Mac OS X and Linux distributions do not support the key repeat. That is why I suggest using a timer. Plus, with a timer, you won't have the key delay but you can regulate it in milliseconds.
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
-
May 29th, 2010, 09:25 AM
#9
Re: Javascript - Function not working
I finally fixed my problem.
I had to correctly reference the element ID like this.
document.getElementById('gamebox').style.backgroundColor = 'rgb(128,0,0)';
instead of:
gamebox.style.backgroundColor = 'rgb(128,0,0)';
But about the multi browser functionality for the keystrokes....
If i use:
document.onkeydown = keyListener;
everything works in every browser. But if i use your code:
if (window.document.addEventListener) {window.document.addEventListener("keydown", keyListener, false);}
else {window.document.attachEvent("onkeydown", callkeydownhandler);}
It's not working in IE, so whats so multifunctional about your code? Am i forgetting something?
Last edited by menyo; May 29th, 2010 at 09:29 AM.
-
June 1st, 2010, 07:11 AM
#10
Re: Javascript - Function not working
There are various ways to retrieve the keyCode.
For your keyListener function, have
Code:
function keyListener(e)
var keyCode =
document.layers ? e.which :
document.all ? event.keyCode :
document.getElementById ? e.keyCode : 0;
if (keyCode==37 && squaremanLeft > 0)
...
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|