Hangman游戏将用户选择的字母与单词中的字母进行比较以进行猜测
Hangman game comparing the letter the user selected with the letters in the word to be guesses
这是一个简单的hangman游戏，我用按钮制作了一个字母键盘，所以点击它应该调用函数checkLetter to检查在要猜测的单词中选择的字母是否在这一部分它没有运行。当用户点击按钮时，如何删除按钮上的字母，以防止他再次选择它
这是我的代码以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>
您的按钮id应该是唯一的。因此，将创建按钮的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>';
}
在getLetter（）函数中，您可以禁用按钮，
function getLetter(x)
{
checkLetter(x);
document.getElementById(x).disabled = true;
}
使用您的代码返工。更改将在代码段本身上进行注释。
为了便于理解，我的评论放在/////////和'''''''''''之间。
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>相关文章：
- 比较从函数和生成的日期对象
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 如何使用 node.js 比较两个 json 数组
- jQuery自定义验证比较多个输入的序列
- 反向字符串比较
- 如何有效地将游戏数据存储在URL查询字符串中
- 通过JSON&比较时间
- 将DOM节点值与字符串Javascript进行比较
- 从键值结构中获取数据，并将其与AngularJS中ng重复的值进行比较
- Javascript游戏输入失去焦点
- 如何在p5.js中管理多智力竞赛游戏的多个屏幕
- 递归深度比较
- 可以't在JavaScript中比较两个字符串
- 实现比较方法的最佳实践是什么;s的比较类型是在运行时选择的
- 如何在moment.js中只比较日期
- setInterval游戏循环的范围问题
- 无法比较javascript变量
- Hangman游戏将用户选择的字母与单词中的字母进行比较以进行猜测
- Drag n'中的字符串创建和比较;投掷游戏
- 比较记忆游戏中的元素
