Javascript游戏的问题

时间:2014-09-16 06:55:09

标签: javascript html

我正在研究一个非常简单的问题"猜我的数字"然而,在Javascript游戏中,我无法正常使用它。

该程序应该选择一个介于1和10之间的随机整数,并允许用户尝试将该数字猜测为正确数量。如果用户猜出的数字低于正确数字,则该程序应该显示"您的猜测太低"消息,当猜测太高或正确时,这是相同的。程序必须在网页上显示消息,而不是在警报或任何类型的弹出窗口中显示。此外,该程序应该保留用户猜测的数字的运行列表,并在每次用户猜测时在页面上显示它们(我希望此列表显示在我的标题下面#34;这里是你到目前为止所猜到的数字:")。最后,该程序应该显示一个"您已经尝试过使用该数字"如果用户尝试输入他们已经使用过的号码,则会显示该消息。

这是我的代码,以及我创建的JSfiddle,我还在玩。

<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <title>Guess My Number</title>

        <script type = "text/javascript">
            var tries = [];
            game = {
                 num : 0,
                 turns : 1,
                 reset : function() {
                        this.turns = 1;
                        this.newNum();
                 },
                 newNum : function() {
                    this.num = parseInt(Math.random(), 10) + 1;
                 },
                 guessNumber : function(guess) {
                        try {
                            guess = parseInt(guess, 10);
                        }
                        catch (e) {
                            document.getElementById("guess").value = "Enter a guess.";
                            this.turns++;
                            return false;
                        }
                        if (guess == this.num) {
                            document.getElementById("result").value = "Correct! It took you " + this.turns + " tries to guess my number.";
                            tries.push(document.getElementById("guess").value);
                            display();
                            document.getElementById("guess").value = " ";
                            return true;
                        }
                        else if(guess > this.num) {
                            document.getElementById("result").value = "Your guess is too high. Try again.";
                            tries.push(document.getElementById("guess").value;
                            display();
                            document.getElementById("guess").value = " ";
                            return false;
                        }
                        else if(tries.indexOf(guess) != -1 {   
                            document.getElementById("result").value = "You have already guessed that number. Try again.";
                            document.getElementById("guess").value = " ";
                            return false;
                        }
                        else {
                            document.getElementById("result").value = "Your guess is too low. Try again.";
                            tries.push(document.getElementById("guess").value;
                            display();
                            document.getElementById("guess").value = " ";
                            return false;  
                        }
                    }
                    function display() {
                        var number = ";
                            for(i=0; i<tries.length; i++) {
                                    number += tries[i] + "<br >";
                            }
                            document.getElementById("tries").innerHTML = number;
                    }
                    function guessNumber() {
                        var guess = document.getElementById("guess").value;
                        game.guessNumber(guess);
                        document.getElementById("guess").value = " ";
                    }
                    function resetGame() {
                        game.reset();
                        document.getElementById("guess").value = " ";
                    }
                    resetGame();
            }
        </script>
    </head>

    <body>
        <h1>Would You Like To Play A Game?</h1>
        <h3>Directions:</h3>
                <p>
                The game is very simple. I am thinking of a non-decimal number between 1 and 10, it is your job to guess what that number is. If you guess incorrectly on your first attempt, don't worry. You can keep guessing until you guess my number.
            </p>
        <h3>Thanks for playing and good luck!</h3>
        <h3>Created by Beth Tanner</h3>
        <p>Your Guess:
            <input type = "text" id = "guess" size = "10" />
            <br />
            <input type = "button" value = "Submit Guess" onclick = "guessNumber()" onclick = "display()" />
            <input type = "reset" value = "Reset Game" onclick = "resetGame()" />
        </p>
        <h3>How'd you do?</h3>
            <div id = "result">
                <input type = "text" id = "result" size = "20" />
            </div>
        <h3>Here are the numbers you've guessed so far:</h3>
    </body>
</html>

http://jsfiddle.net/v09ttL74/

正如你应该能够从小提琴中看到的那样,当我点击其中一个按钮时,什么也没发生,所以我不确定问题出在哪里。当我在小提琴上选择JShints选项时,我遇到了一些错误,但大多数都是&#34;缺少分号&#34;在那些不应该是分号的地方,就像我写的所有内容都是

else {

任何建议都将不胜感激。我觉得这只是一个非常简单的项目,我过度思考,因为我强调它不起作用。

2 个答案:

答案 0 :(得分:3)

您的代码中存在很多问题。仅举几例...

1-这里有未公开的括号

tries.push(document.getElementById("guess").value;

它应该是......

tries.push(document.getElementById("guess").value);

2-表达式未以此处的右括号

终止
else if(tries.indexOf(guess) != -1 { 

它应该是......

else if(tries.indexOf(guess) != -1) { 

3-函数内的函数声明错误

function display() {
                    var number = ";
                        for(i=0; i<tries.length; i++) {
                                number += tries[i] + "<br >";
                        }
                        document.getElementById("tries").innerHTML = number;
                }
                function guessNumber() {
                    var guess = document.getElementById("guess").value;
                    game.guessNumber(guess);
                    document.getElementById("guess").value = " ";
                }
                function resetGame() {
                    game.reset();
                    document.getElementById("guess").value = " ";
                }

我可以永远地去,但是,真的,错误有点明显

答案 1 :(得分:1)

好的,因为有些答案肯定已经让你知道你的脚本和HTML代码有多少错误......从缺失的括号到相同的id到缺少的元素。好吧,我已经纠正了它们,它现在正在运作:

<h1>Would You Like To Play A Game?</h1>
<h3>Directions:</h3>
    <p>
        The game is very simple. I am thinking of a non-decimal number between 1 and 10, it is your job to guess what that number is. If you guess incorrectly on your first attempt, don't worry. You can keep guessing until you guess my number.
</p>
<h3>Thanks for playing and good luck!</h3>
<h3>Created by Beth Tanner</h3>
<p>Your Guess:
    <input type = "text" id = "guess" size = "10" />
    <br />
    <input type = "button" value = "Submit Guess" onclick = "guessNumber()" onclick = "display()" />
    <input type = "reset" value = "Reset Game" onclick = "resetGame()" />
</p>
<h3>How'd you do?</h3>

    <input type = "text" id = "result" size = "20" />

<h3>Here are the numbers you've guessed so far:</h3>
<p id='tries'></p>

脚本:

var tries = [];
game = {
    num : 0,
    turns : 1,
    reset : function() {
        this.turns = 1;
        this.newNum();
    },
    newNum : function() {
        this.num = parseInt(Math.random() * 10) + 1;
    },
    guessNumber : function(guess) {
        try {        
            guess = parseInt(guess, 10);
        }
        catch (e) {
            document.getElementById("guess").value = "Enter a guess.";
            this.turns++;
            return false;
        }
        alert(guess+ ' '+this.num);
        if (guess == this.num) {
            document.getElementById("result").value = "Correct! It took you " + this.turns + " tries to guess my number.";
            tries.push(document.getElementById("guess").value);
            display();
            document.getElementById("guess").value = " ";
            return true;
        }
        else if(tries.indexOf(guess) != -1) {   
            document.getElementById("result").value = "You have already guessed that number. Try again.";
            document.getElementById("guess").value = " ";
            return false;
        }
        else if(guess > this.num) {
            document.getElementById("result").value = "Your guess is too high. Try again.";
            tries.push(document.getElementById("guess").value);
            display();
            document.getElementById("guess").value = " ";
            return false;
        }
        else if(guess < this.num){          
            document.getElementById("result").value = "Your guess is too low. Try again.";
            tries.push(document.getElementById("guess").value);
            display();
            document.getElementById("guess").value = " ";
            return false;  
        }


    }
}
    function display() {
        var number = "";
        for(i=0; i<tries.length; i++) {
            number += tries[i] + "<br >";
        }
        document.getElementById("tries").innerHTML = number;
    }
    function guessNumber() {
        var guess = document.getElementById("guess").value;
        game.guessNumber(guess);
        document.getElementById("guess").value = " ";
    }
    function resetGame() {
        game.reset();
        document.getElementById("guess").value = " ";
    }
    resetGame();

<强> See the DEMO here