Javascript刽子手游戏问题

时间:2014-05-04 03:03:58

标签: javascript arrays

我一直在使用HTML模板和javascript为一个类的项目开发一个刽子手游戏。

我目前遇到了一些问题。 1.我正在使用一个阵列来调用图片进行错误的猜测,以便在绞架中添加部件。当发生4次错误猜测时,只显示图片#4。 2.我也有一个问题,那就是只有某些单词才能确定按钮决定实际工作和字母" o"从来没有工作

非常感谢任何帮助。

<!DOCTYPE HTML>
<html>
<head>
<title>Hangman</title>
<meta charset="utf-8">
<script type="text/javascript" language="JavaScript">

    var NumberOfChances;
    var theWord = "",oldString="";
    var currentGuessed = "";
    var value="";

    var words = new Array();
        words[0]="No strings attached";
        words[1]="Never look back";
        words[2]="Happy birthday";
        words[3]="Against all odds";
        words[4]="Break a leg";
        words[5]="Off the beaten path";
        words[6]="Good old days";
        words[7]="Gold rush";
        words[8]="Happy camper";
        words[9]="Grin from ear to ear";
        words[10]="Live long and prosper";
        words[11]="Quartz watch";
        words[12]="Jumping jacks";
        words[13]="Income tax";

    var image = new Array();
        image[0] = '<img src="image0.jpg" align ="left" width="415" height="496">';
        image[1] = "<img src='image1.jpg' align ='left' width='415' height='496'>";
        image[2] = '<img src="image2.jpg" align ="left" width="415" height="496">';
        image[3] = '<img src="image3.jpg" align ="left" width="415" height="496">';
        image[4] = '<img src="image4.jpg" align ="left" width="415" height="496">';
        image[5] = '<img src="image5.jpg" align ="left" width="415" height="496">';
        image[6] = '<img src="image6.jpg" align ="left" width="415" height="496">';

        NumberOfChances = image.length;



        function swap(image)
{
        document.getElementById("images").src =image+".gif";

}

    var usedLetters = new Array();
    function secretWord()
{
    debugger
        theWord = words[Math.floor(Math.random()*51)]; 
    for (i=0; i<theWord.length; i++)
{
        currentGuessed = currentGuessed + "*";

}
        document.getElementById("secretWord").value = currentGuessed;
    debugger
}
    function gameProcess()
{
        currentGuessed ="";
        secretWord();
        NumberOfChances=0;
        document.getElementById("lives").value = NumberOfChances;
        startImage = image[0];
} 

    function turn(letterGuessed)
{
    debugger
        value = oldString = "";
    var correctGuess = false;
    for (i=0; i<theWord.length; i++)
{

    if (theWord.charAt(i) == letterGuessed)
{
        value  = value + letterGuessed;
        currentGuessed = currentGuessed.replace(oldString + "*",value);
        oldString = value;
        correctGuess=true;
}
    else
{
    if(currentGuessed.charAt(i) == "*")
{
        value = value + '*';
        oldString = oldString + "*";
}
    else
{
        value = value + currentGuessed.charAt(i);
        oldString = oldString + currentGuessed.charAt(i);
}
}
} 
    if (!correctGuess)
{
        NumberOfChances++;
        swap("image" + NumberOfChances );
    if (NumberOfChances==6)
{
        alert("You Lost!");
        document.getElementById("secretWord").value = theWord;
            theWord = "";
        currentGuessed = "";
}
        document.getElementById("lives").value = NumberOfChances;
    if(correctGuess != 0)
{
        takeChance();
}
}
        win();
}

    function win()
{
    var winCount = 0;
        for(var i = 0;i<theWord.length;i++)
{
        if(currentGuessed.charAt(i) == "*")
{
        winCount++;
}
    document.getElementById("secretWord").value = currentGuessed;
}
    if(winCount == 0 && currentGuessed != "")
{
        alert("yay, you win!");
}

} 
</script>
</head>

<body>
<H1>Lets play Hangman</H1>

<form name="userGuessForm"  id="form1">
<div id="Image"><img src="image0.gif" align ="left" width="415" height="496" id="images"/></div>
<div id="wordDisplay"></div>

This is the Secret Word<br /><input id="secretWord" type="text" value="currentGuessed" />
<br />
<input id="letters" type="button" name="a" value="a" onClick="turn('a');">
<input id="Button1" type="button" name="b" value="b" onClick="turn('b');">
<input id="Button2" type="button" name="c" value="c" onClick="turn('c');">
<input id="Button3" type="button" name="d" value="d" onClick="turn('d');">
<input id="Button4" type="button" name="e" value="e" onClick="turn('e');">
<input id="Button5" type="button" name="f" value="f" onClick="turn('f');">
<input id="Button6" type="button" name="g" value="g" onClick="turn('g');">
<input id="Button7" type="button" name="h" value="h" onClick="turn('h');">
<input id="Button8" type="button" name="i" value="i" onClick="turn('i');">
<input id="Button9" type="button" name="j" value="j" onClick="turn('j');">
<input id="Button10" type="button" name="k" value="k" onClick="turn('k');">
<input id="Button11" type="button" name="l" value="l" onClick="turn('l');">
<input id="Button12" type="button" name="m" value="m" onClick="turn('m');">
<input id="Button13" type="button" name="n" value="n" onClick="turn('n');">
<input id="Button14" type="button" name="o" value="o" onClick="turn('o');">
<input id="Button15" type="button" name="p" value="p" onClick="turn('p');">
<input id="Button16" type="button" name="q" value="q" onClick="turn('q');">
<input id="Button17" type="button" name="r" value="r" onClick="turn('r');">
<input id="Button18" type="button" name="s" value="s" onClick="turn('s');">
<input id="Button19" type="button" name="t" value="t" onClick="turn('t');">
<input id="Button20" type="button" name="u" value="u" onClick="turn('u');">
<input id="Button21" type="button" name="v" value="v" onClick="turn('v');">
<input id="Button22" type="button" name="w" value="w" onClick="turn('w');">
<input id="Button23" type="button" name="x" value="x" onClick="turn('x');">
<input id="Button24" type="button" name="y" value="y" onClick="turn('y');">
<input id="Button25" type="button" name="z" value="z" onClick="turn('Z');"><br />
Number of Tries (6): <input id="lives" type="text" value="0" onfocus="lives.blur();" SIZE=2> 
<input type="button" name="submit" value=" Start Over " onClick="gameProcess()">
<input type="button" name="end" value=" END " onClick="gameEnd()"><br />
</form>
</body>
</html>

3 个答案:

答案 0 :(得分:2)

您的图片无法正常工作,因为您将数组用作字符串。

document.getElementById("images").src =image+".gif";

应该是

document.getElementById("images").src ="image"+NumberOfChances+".gif";

否则,你正在做的是获取所有图像的html并将其设置为图像的src属性。

<img src="<img src="image0.jpg" align ="left" width="415" height="496">, <img src="image1.jpg" align ="left" width="415" height="496">, <img src="image2.jpg" align ="left" width="415" height="496">..." id="images"> This isn't what you want!

而且,我认为你已经把你的jpgs和gif混淆了。检查文件扩展名。

另外,你有50个单词,你没有在这里展示吗?你的数组包含13,但后来你写了

theWord = words[Math.floor(Math.random()*51)]; 

这似乎表明你有一个不到51或50个单词。

在你的信函中,我认为你并没有完全理解for循环的概念。你似乎在想的是每次调用函数时都会发生一次新的迭代,但事实并非如此。相反,每次使用您猜到的一个字母调用函数时,for循环都会遍历整个单词。因此,除非单词中的每一个字母都是o,否则如果你猜出字母o,你将为单词中的每个o得到一个点,并且每个字符都不会得到-1,这不是&#39; 39; t你想要什么。抛弃for循环,每次运行函数时都使用i ++。

答案 1 :(得分:0)

function swap(image)
{
        document.getElementById("images").src =image+".gif";

}

尝试将gif更改为jpg

答案 2 :(得分:0)

if (!correctGuess)
{
    NumberOfChances++;
    swap(image[NumberOfChances]);