Resolved Combination Script for game not working

java-junkie · 03-17-2012, 03:01 AM

I am very new to javascript. At least when it comes to writing scripts. The only thing I'm trying to do with the following script is make it so when you click on the right numbers of the image it will take you to a new page. If you click the wrong numbers it will forward you to an error page explaining that the code/numbers you clicked on were wrong. The code of numbers is four numbers long.

When I try the correct numbers or the incorrect numbers nothing happens either way. I'm not sure why.

Code:

<html><head><title>Untitled</title>
<script type="text/javascript">

			var combination;
			var comboAnswer = "7256";

			combination = "";

			function keycode(n) {
		if (combination.length < (opener.top.comboAnswer.length - 1)) {
					combination = combination + n;
				}
				else {
					combination = combination + n;
					checkCode();
				}
			}

			function checkCode() {
				if (combination == opener.top.comboAnswer) {
					window.location.href = "disarmed.html";
				}
				else {
					window.location.href = "armed.html";
				}
			}

		</script>
<body bgcolor="#000000">
<center>
<div style="text-align:center; width:527px; margin-left:auto; margin-right:auto;">
<img id="combination" src="image.png" usemap="#combination" border="0" alt="" />
<map id="_combination" name="combination">
<area shape="rect" coords="255,184,288,210" href="javascript:keycode(1)" alt="" title="" />
<area shape="rect" coords="288,184,321,210" href="javascript:keycode(2)" alt="" title="" />
<area shape="rect" coords="321,184,354,210" href="javascript:keycode(3)" alt="" title="" />
<area shape="rect" coords="255,213,288,239" href="javascript:keycode(4)" alt="" title="" />
<area shape="rect" coords="288,213,321,239" href="javascript:keycode(5)" alt="" title="" />
<area shape="rect" coords="320,213,353,239" href="javascript:keycode(6)" alt="" title="" />
<area shape="rect" coords="256,240,289,266" href="javascript:keycode(7)" alt="" title="" />
<area shape="rect" coords="288,240,321,266" href="javascript:keycode(8)" alt="" title="" />
<area shape="rect" coords="320,240,353,266" href="javascript:keycode(9)" alt="" title="" />
<area shape="rect" coords="288,265,321,291" href="javascript:keycode(0)" alt="" title="" />
<area shape="default" nohref>
</map>
</div>
</center>
</body></html>

webdev1958 · 03-17-2012, 03:16 AM

Can you post/attach the actual .png (image.png) you are using. It'll make it easier to run your actual code or post an alternative code solution.

And why are you referring to opener.top.comboAnswer.length when you have var comboAnswer = "7256"; earlier. What is the difference between the two?

java-junkie · 03-17-2012, 03:37 AM

Quote:

Originally Posted by webdev1958

Can you post/attach the actual .png (image.png) you are using. It'll make it easier to run your actual code or post an alternative code solution.

And why are you referring to opener.top.comboAnswer.length when you have var comboAnswer = "7256"; earlier. What is the difference between the two?

The comboAnswer variable is the correct code a visitor would have to enter. This actually isn't suppose to be visible in the code in case someone viewed the source. I was going to link that variable in a separate script, but I thought it was the problem. So I moved it to the present code, but it's still not working. As for "length" it's so it knows the length of the code.

Logic Ali · 03-17-2012, 03:54 AM

Are you getting any errors in the console?

Your reference to opener.top indicates that this code has to run in a child window, so what does var comboAnswer = "7256"; do in the current window?

java-junkie · 03-17-2012, 03:57 AM

Quote:

Originally Posted by Logic Ali

Are you getting any errors in the console?

Your reference to opener.top indicates that this code has to run in a child window, so what does var comboAnswer = "7256"; do in the current window?

Okay I removed opener.top from both parts of the code and now the script works. Thank you!

webdev1958 · 03-17-2012, 04:08 AM

Hopefully this standalone demo, using your .png image map will help.

The user clicks 4 numbers. After the 4th number is clicked the user entered 4 digit number is checked against the "hard wired" correct answer and then redirects to the appropriate url

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css"></style>
        <script type="text/javascript">
            var correctCode = 6471;
            var curGuess = '', count = 0;
            function keycode(num) {
                if(++count < 4){ //continue building the guessed code string
                    curGuess += num;
                } else { //check if entered 4 digit code string is correct
                    curGuess += num;
                    var redirectURL = (Number(curGuess) == correctCode)? 'url1':'url2';
                    window.location.href = redirectURL;
                }
            }
            function startAgain(){
                curGuess = '';
                count = 0;
            }
            window.onload=function(){
                document.getElementById('btnClear').onclick=startAgain;
            }
        </script>
    </head>
    <body>
        <img id="imgKeypad" src="image.png" usemap="#combination" border="0" alt="" />
        <div>
            <button id="btnClear">Try again</button>
        </div>
        <map id="combination" name="combination">
            <area shape="rect" coords="255,184,288,210" onclick="keycode(1);return false;" alt="" title="" href=""/>
            <area shape="rect" coords="288,184,321,210" onclick="keycode(2);return false;" alt="" title="" href=""/>
            <area shape="rect" coords="321,184,354,210" onclick="keycode(3);return false;" alt="" title="" href=""/>
            <area shape="rect" coords="255,213,288,239" onclick="keycode(4);return false;" alt="" title="" href=""/>
            <area shape="rect" coords="288,213,321,239" onclick="keycode(5);return false;" alt="" title="" href=""/>
            <area shape="rect" coords="320,213,353,239" onclick="keycode(6);return false;" alt="" title="" href=""/>
            <area shape="rect" coords="256,240,289,266" onclick="keycode(7);return false;" alt="" title="" href=""/>
            <area shape="rect" coords="288,240,321,266" onclick="keycode(8);return false;" alt="" title="" href=""/>
            <area shape="rect" coords="320,240,353,266" onclick="keycode(9);return false;" alt="" title="" href=""/>
            <area shape="rect" coords="288,265,321,291" onclick="keycode(0);return false;" alt="" title="" href=""/>
        </map>
    </body>
</html>