representing a character at various array in an html table w/JQuery/JavaScript

后端未结

关注

 3  799

I\'ve run into some issue graphically representing some of my data via J Query in my Hangman game- right now I\'m working on the last part of my play(space) function to take int

相关标签:

3条回答

無奈伤痛

2021-01-23 19:02

Ok, it does everything now. In addition to the first version's features, version 2 has the following:

If a letter is guessed wrong more than once, an alert will inform the player of doing so and ignore it.
If a correct guess has more than one letter, all letters will be exposed.
Improved endGame() function with a message, but it needs one more fix, I'll leave that one to you ;-)

Plunker

<!doctype>
<html>

<head>
    <meta charset="utf-8">
    <title>35387864</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        html {
            font: 400 16px/1.428 'Verdana';
        }
        
        main {
            padding: 20px;
        }
        
        footer,
        header {
            padding: 5px 20px;
        }
        
        footer {
            border-top: 2px ridge #666;
        }
        
        header {
            border-bottom: 2px ridge #666;
        }
        
        .wordSpaces,
        .wrongLetters {
            border: 1px ridge grey;
            table-layout: fixed;
            border-collapse: collapse;
            margin: 10px 0;
        }
        
        .wordSpaces td,
        .wrongLetters td {
            border: 2px inset #BBB;
            width: 3ch;
            height: 1.5rem;
            padding: 1px;
            text-align: center;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            color: white;
        }
        
        .wrongLetters td {
            color: red;
        }
        
        .form-control {
            width: 10ch;
            text-align: center;
        }
        
        ul {
            font-size: 1rem;
            list-style: none;
            padding-left: 0;
        }
        
        .msg {
            font-size: 0;
            color: #000;
            text-align: center;
        }
    </style>
</head>

<body>
    <header>
        <h2> Hangman </h2>
    </header>
    <main>
        <figure class="hangman"> <img src="https://i.imgur.com/gSxmkUf.gif" id="gallows" align="middle top"> <img src="https://i.imgur.com/Mb4owx9.gif" id="head" align="middle top" style="display:none;"> <img src="https://i.imgur.com/xkXISte.gif" id="body" align="middle top" style="display:none;"> <img src="https://i.imgur.com/U44ReUi.gif" id="armL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/49kkaQF.gif" id="handL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/tqtNazW.gif" id="armR" align="middle top" style="display:none;"> <img src="https://i.imgur.com/ydnz7eX.gif" id="handR" align="middle top" style="display:none;"> <img src="https://i.imgur.com/dlL7Kek.gif" id="legL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/3AQYFV9.gif" id="footL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/j9noEN7.gif" id="legR" align="middle top" style="display:none;"> <img src="https://i.imgur.com/kJofX7M.gif" id="footR" align="middle top" style="display:none;"> </figure>
        <table class="wordSpaces">
            <caption>
                Your Word is:
            </caption>
            <tbody>
                <tr>
                </tr>
            </tbody>
        </table>
        <br/>
        <h1 class="msg">
</h1>
        <fieldset class="guessIn">
            <legend> Guess a Letter </legend>
            <label for="form">Type a Letter then Click <kbd>Enter</kbd></label>
            <input type="text" id="form" class="form-control" placeholder="guess" maxlength="1" required/>
        </fieldset>
        <table class="wrongLetters">
            <caption>
                Letters Guessed Wrong:
            </caption>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </main>
    <footer>
        <ul>
            <li><a href="https://stackoverflow.com/questions/35387864/hangman-gameplay-in-javascript">Hangman Gameplay in JavaScript</a></li>
            <li><a href="https://jsfiddle.net/zer00ne/0fa56t3s/">jsFiddle</a></li>
        </ul>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>
        var wordBank = ["modernism", "situationalist", "sartre", "camus", "hegel", "lacan", "barthes", "baudrillard", "foucault", "debord", "baudrillard"];
        /*var wordBank = ["xxxbnvkllyyybns"];*/
        var word = [];
        var wrongGuesses = [];
        var rightGuesses = [];
        var images = [gallows, head, body, armL, handL, armR, handR, legL, footL, legR, footR];
        var img = 1;

        $(document).ready(function() {
            function randomWord() {
                var random = Math.floor(Math.random() * wordBank.length);
                var toString = wordBank[random];
                console.log(toString);
                word = toString.split("");
                console.log(word);
            }
            randomWord();

            function wordSpaces() {
                for (var i = 0; i < word.length; i++) {
                    $(".wordSpaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
                }
            }
            wordSpaces();

            function play(letter) {
                var wIdx = jQuery.inArray(letter, word);
                var wrong = wrongGuesses.length;
                if (wIdx === -1) {
                    if (wrong === 0) {
                        wrongGuesses.push(letter);
                        $('.wrongLetters tbody tr td:first-of-type').text(letter);
                        hangman();
                    } else {

                        for (var j = 0; j < wrong; j++) {
                            if (wrongGuesses[j] === letter) {
                                alert('The "' + letter + '" has already beem played.\nPlease try again.');
                                return true;
                            }
                            console.log('wrong' + wrong);
                        }
                        wrongGuesses.push(letter);
                        $('.wrongLetters tbody tr td:nth-of-type(' + (wrong + 1) + ')').text(letter);
                        hangman();
                    }
                } else {
                    for (var w = 0; w < word.length; w++) {
                        if (word[w] === letter) {
                            W = w + 1;
                            $(".wordSpaces tbody tr td:nth-of-type(" + W + ")").css("color", "black");
                            rightGuesses.push(letter);
                        }
                    }
                }
            }
            $(".form-control").keypress(function(event) {
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if (keycode == 13) {
                    var letter = $(this).val();
                    play(letter);
                    $(this).val('');
                    endGame();
                    return false;
                }
            });

            function hangman() {
                $(images[img - 1]).hide();
                $(images[img]).show();
                img++;
                $("html").css("background-color", "#ff4500").fadeIn(300).delay(300).fadeOut(300).fadeIn(100);
            }

            function endGame() {
                if (rightGuesses.length == word.length) {
                    $("body").css("background-color", "rgba(0, 185, 41, .3)");
                    $(".msg").text(word + " is correct!\nYou win!").css("font-size", "24px");
                    $(".form-control").prop('disabled', true);
                } else if (wrongGuesses.length === 10) {
                    $("body").css("background-color", "rgba(227, 0, 0, .3)");
                    $(".msg").text(word + " was the answer.\nYou lose.").css("font-size", "24px");
                    $(".form-control").prop('disabled', true);
                } else return false;
            }

        });
    </script>
</body>

</html>

0 讨论(0)

天涯浪人

2021-01-23 19:10

I figured this out on my own (I sort of panicked) like this: first I created a .forEach loop to loop through the word, then the issue was the difference btwn array concatenation in JS & html/css... I creates the index variable, and added one & also an additional plus sign outside of the parenthesis... So, this solves the problem:

indexes.forEach(function(index) { $(".word-spaces tbody tr td:nth-of-type(" + (index + 1) + ")").css('color', 'black'); });

0 讨论(0)
发布评论:

提交评论
- 加载中...
慢半拍i

2021-01-23 19:15
Note that when you make a selection you get the following error in the console:

Uncaught Error: Syntax error, unrecognized expression: :nth-of-type

That's because of this line:
```
$(".word-spaces tbody tr td:nth-of-type(" + indexes + ")").css('color', 'black');
```
Since a correct guess can set multiple indexes, you'll need to use a loop for the correct guesses like this:
```
$.each(indexes,function(e,i){
    $(".word-spaces tbody tr td:nth-of-type(" + i + ")").css('color', 'black');
})
```
Additionally, I think this line is wrong:
```
 $(".word-spaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
```
You probably meant to use the value of i like this:
```
$(".word-spaces > tbody > tr").append('<td data-idx='+i+'>' + word[i] + '</td>')
```
(though you dont really need the data-idx attribute at all since it will always be the same as the child index within the tr tag and you're using that to get the cells anyway)

Here is a working jsFiddle
0 讨论(0)
发布评论:

提交评论
- 加载中...

representing a character at various array in an html table w/JQuery/JavaScript

Here is a working jsFiddle