This is a hangman project I'm working on. Inside the guessing function, a for loop is used to add onclick functions to the buttons and another for loop is used to check whether the button's text(a letter) is inside the word. Also a while loop is wrapping these for loops up to check whether the user is out of guesses or he guesses the word. But when I try to run it, browser crashes and I have no clue why it happens.
Also I wonder if I can put the while loop conditions inside the for loop as they works quite similar :/
Here is my code:
window.onload = function() { var letters = "a b c d e f g h i j k l m n o p q r s t u v w x y z"; var category = ["Premier Leaque Football Teams", "Films", "Cities"]; var wordlist = [ ["everton", "liverpool", "swansea", "chelsea", "hull", "manchester-city", "newcastle-united"], ["alien", "dirty-harry", "gladiator", "finding-nemo", "jaws"], ["manchester", "milan", "madrid", "amsterdam", "prague"] ]; var hints = [ ["Based in Mersyside", "Based in Mersyside", "First Welsh team to reach the Premier Leauge", "Owned by A russian Billionaire", "Once managed by Phil Brown", "2013 FA Cup runners up", "Gazza's first club"], ["Science-Fiction horror film", "1971 American action film", "Historical drama", "Anamated Fish", "Giant great white shark"], ["Northern city in the UK", "Home of AC and Inter", "Spanish capital", "Netherlands capital", "Czech Republic capital"] ] var buttons = document.getElementById("buttons"); var showCategory = document.getElementById("show_category"); var hyphens = document.getElementById("hyphens"); var showLives = document.getElementById("show_lives"); var showClue = document.getElementById("show_clue"); var showHint = document.getElementById("show_hint"); var playAgain = document.getElementById("play_again"); letters = letters.split(" "); var letters_ul = document.createElement("ul"); for (var i = 0; i < letters.length; i++) { var letters_li = document.createElement("li"); var letters_button = document.createElement("button"); letters_button.innerHTML = letters[i]; letters_li.appendChild(letters_button); letters_ul.appendChild(letters_li); } buttons.appendChild(letters_ul); initialize = function() { var c = Math.floor(Math.random() * category.length); var w = Math.floor(Math.random() * wordlist[c].length); var word = wordlist[c][w]; var lives = 10; showCategory.innerHTML = "The Chosen Category is " + category[c]; hyphens.innerHTML = ""; for (var i = 0; i < word.length; i++) { hyphens.innerHTML += "-"; } showLives.innerHTML = "You have " + lives + " lives" showClue.innerHTML = "Clue : -"; showHint.addEventListener("click", function(){ showClue.innerHTML = "Clue : " + hints[c][w]; }) playAgain.addEventListener("click", function(){ initialize(); }) guessing(word, lives); } guessing = function(word, lives) { var button_list = document.querySelectorAll("#buttons ul li button"); var isWord = false; while (lives > 0 && !isWord) { for (var i = 0; i < button_list.length; i++) { button_list[i].addEventListener("click", function(e){ var h = ""; for (var j = 0; j < word.length; j++) { if (word[j] === e.target.innerHTML) { h += e.target.innerHTML; } else if (hyphens.innerHTML[j] === word[j]) { h += ""; } else { h += "-"; } if (hyphens.innerHTML === h && lives > 0) { lives--; showLives.innerHTML = "You have " + lives + " lives"; } else if (lives === 0 && !isWord) { showLives.innerHTML = "Game Over!"; } else if (hyphens.innerHTML === word) { showLives.innerHTML = "You Win!"; isWord = true; } hyphens.innerHTML = h; } } ) } } } initialize(); } * { box-sizing: border-box; } body { margin: 0; background-color: goldenrod; font-family:'Courier New', Courier, monospace; text-align: center; color: white; } h1 { font-size: 50px; } h2 { font-size: 40px; } p { font-size: 25px; } #buttons ul { list-style-type: none; margin: 0; padding: 0; } #buttons ul li { display: inline-block; } #buttons ul li button { padding: 10px 15px; border: 1px solid white; border-radius: 5px; background-color: white; color: goldenrod; margin: 5px; } #buttons ul li button:hover { background-color: goldenrod; color: white; } #buttons ul li button:active, #buttons ul li button:visited { opacity: 0.5 !important; background-color: goldenrod !important; color: white !important; } #hyphens { font-size: 50px; } #hangman { border: 2px dashed white; } .container #show_hint, .container #play_again{ color: white; background-color: goldenrod; padding: 20px 40px; margin: 15px; border: 1px solid white; } .container #show_hint:hover, .container #play_again:hover { background-color: white; color: goldenrod; } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="hangman"> <meta name="keywords" content="hangman"> <meta name="author" content="Nick Hui"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hangman</title> <link rel="stylesheet" href="hangman.css"> <script src="hangman.js"></script> </head> <body> <h1>HANGMAN</h1> <h2>VANILLA JAVASCRIPT HANGMAN GAME</h2> <p>Use the alphabet below to guess the word, or click hint to get a clue.</p> <div id="buttons"></div> <p id="show_category"></p> <div id="hyphens"></div> <p id="show_lives">You have 10 lives</p> <p id="show_clue">Clue: -</p> <canvas id="hangman"></canvas> <div class="container"> <button id="show_hint">HINT</button> <button id="play_again">Play again</button> </div> </body> </html>
没有评论:
发表评论