Hangman游戏比较用户选择的字母与单词中的字母进行猜测
[英]Hangman game comparing the letter the user selected with the letters in the word to be guesses
问题描述
This is a simple hangman game i made an alphabet keyboard by buttons so onclick it should call the function checkLetter to check if the letter selected in the word to be guessed or not this part it doesn't run also how to delete the letter on the button when the user clicked on it so prevent him select it again?! 
这是一个简单的刽子手游戏，我通过按钮制作一个字母键盘，所以点击它应该调用函数checkLetter来检查在猜测的单词中选择的字母是否不运行这部分它也不运行如何删除字母上的字母当用户点击它时按钮，以防止他再次选择它？！
this is my code begin with html then javascript 这是我的代码以html然后javascript开头
var B ,L ,placeholder ,correctGuesses ,wrongGuesses ,wordToGuess ,wordLength ,words=[] ,wrongletter=true; function newGame() { //initialize all the variables placeholder=""; correctGuesses=0; wrongGuesses=0; wordToGuess=getWord(); wordLength=wordToGuess.length; //make a loop that replaces underscores with the word to be guessed for(var i=0;i<wordLength;i++) { placeholder+="_ "; } document.getElementById("placeforword").innerHTML=placeholder; //loop to make a keyboard of buttons //B hold the buttons B = ''; //L hold letters L; //this loop to get the letters by charcode for (var i = 65; 90 >= i; i++) {// A-65, Z-90 L = String.fromCharCode(i); B += '<button id="B2" onclick="getLetter(\\''+L+'\\');">' + L + '</button>'; } document.getElementById("box1").innerHTML = B; drawCanvas(); } function getLetter(x) { checkLetter(x); } function checkLetter(letter) { document.getElementById("placeforword").innerHTML=placeholder; placeholder=placeholder.split(""); for(var i=0;i<wordLength;i++) { if(wordToGuess.charAt(i)===letter.toLowerCase()) { placeholder[i]=letter; wrongletter=false; correctGuesses++; } if(correctGuesses===wordLength) { //if all letters have been guessed that mean u guessed all the correct letters and u win //call the drawCanvas drawCanvas(); } } //if ur guess was wrong if(wrongGuess) { badGuesses++; drawCanvas();//this function to draw the body of the victim } document.getElementById("placeforword").innerHTML=placeholder.join(""); } function getWord() { var a=["bad","happy","anyotherwords"]; //choose a random word return a[parseInt(Math.random()*a.length)]; }
<html> <head> <title>New Game</title> <style type="text/css"> #B1 { background-color: #4CAF50; color: white; font-size: 24px; } #box2 { width: 350px; height: 350px; padding: 10px; background-color: blue; text-align: center; } </style> </head> <body> <div id="container" style="width:100%;"> <div id="left" style="float:left;width:50%;"> <div id="newgame"> <button onclick="newGame()" id="B1">New Game</button> <br> <br> </div> <!--<div id="newgame1"></div>--> <div id="box1"></div> <div> <p id="placeforword"></p> </div> <div id="box2"> <h1>Letters u Guessed</h1> </div> </div> <div id="right" style="float:right;width:50%;"> <div> <canvas id="stage" width="643" height="643" style="border:5px solid #000000;"></canvas> </div> </div> </div>
2 个解决方案
解决方案1
0 2016-04-14 15:38:52
Your button id should be unique. 您的按钮ID应该是唯一的。 So change the for loop that creates the button to 因此，更改创建按钮的for循环
for (var i = 65; 90 >= i; i++) {// A-65, Z-90
L = String.fromCharCode(i);
B += '<button id="'+L+'" onclick="getLetter(\''+L+'\');">' + L + '</button>';
}
And in getLetter() function you can disable the button, 在getLetter（）函数中，您可以禁用该按钮，
function getLetter(x)
{
checkLetter(x);
document.getElementById(x).disabled = true;
}
解决方案2
0 2016-04-14 17:12:11
Reworked with your code. 用你的代码重写。 The changes are commented on the snippet itself. 这些更改会在代码段本身上发表评论。
My comments are placed between ///////// and \\\\\\\\\\\\\\\\\\\\\\ for easy understanding. 我的评论放在/////////和\\\\\\\\\\\\\\\\\\\\\\之间，以便于理解。
The drawCanvas() function has been commented out because it is not defined. drawCanvas()函数已被注释掉，因为它未定义。
var B ,L ,placeholder ,correctGuesses ,wrongGuesses ,wordToGuess ,wordLength ,words=[] ,wrongletter=true; function newGame() { //initialize all the variables placeholder=[]; /////////initialize placeholder as an array\\\\\\\\\\\\\\\\\\\\\\ correctGuesses=0; wrongGuesses=0; wordToGuess=getWord(); wordLength=wordToGuess.length; //make a loop that replaces underscores with the word to be guessed for(var i=0;i<wordLength;i++) { placeholder[i] = "_ "; /////////instead of concatinating string add '_' to placeholder array\\\\\\\\\\\\\\\\\\\\\\ } document.getElementById("placeforword").innerHTML=placeholder.join(""); //loop to make a keyboard of buttons //B hold the buttons B = ''; //L hold letters L; //this loop to get the letters by charcode for (var i = 65; 90 >= i; i++) {// A-65, Z-90 L = String.fromCharCode(i); B += '<button id="'+L+'" onclick="getLetter(\\''+L+'\\');">' + L + '</button>'; /////////button id should be unique. So give each button with letter as id \\\\\\\\\\\\\\\\\\\\\\ } document.getElementById("box1").innerHTML = B; //drawCanvas(); } function getLetter(x) { document.getElementById(x).disabled = true; /////////disable button that clicked\\\\\\\\\\\\\\\\\\\\\\ checkLetter(x); } function checkLetter(letter) { wrongletter=true; document.getElementById("placeforword").innerHTML=placeholder; // placeholder=placeholder.split(""); /////////no need this since the placeholder is now an array\\\\\\\\\\\\\\\\\\\\\\ for(var i=0;i<wordLength;i++) { if(wordToGuess.charAt(i)===letter.toLowerCase()) { placeholder[i]=letter; wrongletter=false; correctGuesses++; } if(correctGuesses===wordLength) { //if all letters have been guessed that mean u guessed all the correct letters and u win //call the drawCanvas //drawCanvas(); } } //if ur guess was wrong if(wrongletter) /////////I think you mistakenly gave the variable name here\\\\\\\\\\\\\\\\\\\\\\ { wrongGuesses++; /////////I think you mistakenly gave the variable name here\\\\\\\\\\\\\\\\\\\\\\ //drawCanvas();//this function to draw the body of the victim } document.getElementById("placeforword").innerHTML=placeholder.join(""); } function getWord() { var a=["bad","happy","anyotherwords"]; //choose a random word return a[parseInt(Math.random()*a.length)]; }
<html> <head> <title>New Game</title> <style type="text/css"> #B1 { background-color: #4CAF50; color: white; font-size: 24px; } #box2 { width: 350px; height: 350px; padding: 10px; background-color: blue; text-align: center; } </style> </head> <body> <div id="container" style="width:100%;"> <div id="left" style="float:left;width:50%;"> <div id="newgame"> <button onclick="newGame()" id="B1">New Game</button> <br> <br> </div> <!--<div id="newgame1"></div>--> <div id="box1"></div> <div> <p id="placeforword"></p> </div> <div id="box2"> <h1>Letters u Guessed</h1> </div> </div> <div id="right" style="float:right;width:50%;"> <div> <canvas id="stage" width="643" height="643" style="border:5px solid #000000;"></canvas> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在JavaScript Hangman游戏中对猜测进行排序 - Sorting guesses in JavaScript Hangman Game
试图显示Hang子手游戏中剩下的猜测数量 - trying to display the amount of guesses that is left in a Hangman game
用Java的Hangman游戏中的对应单词字母替换下划线 - Replacing underscores with letters of corresponding word in Hangman game in Javascript
刽子手游戏中的增量字母 - Increment letters in a hangman game
Javascript 刽子手游戏仅填充单词中第一次出现的重复字母 - Javascript Hangman Game only populating first occurrence of a repeated letter in word
JavaScript Hangman游戏； 仅显示错误的猜测，当用户获胜时发出警报 - JavaScript Hangman Game; display only wrong guesses, alert when user wins
检查单词中的字母[hangman] - Check letter in word [hangman]
子手游戏-替换列表中的字母 - Hangman game - Replacing letters in a list
使以前选择的单词在 html 上消失，并在 Hangman 游戏中用新单词替换 javascript - Make previous selected word go away on html and replace with new word in Hangman game for javascript
如何处理javascript game子手游戏中的重复字母 - how to deal with repeated letters in a javascript hangman game
相关标签