这是一个简单的刽子手游戏，我通过按钮制作了一个字母键盘，所以点击它应该调用函数checkLetter
检查在猜测的单词中选择的字母是否被猜到这部分它还没有运行当用户点击它时如何删除按钮上的字母，所以阻止他再次选择它？！
这是我的代码
从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>
答案 0 :(得分：0)
您的按钮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;
}
答案 1 :(得分：0)
使用您的代码重写。这些更改会在代码段本身上发表评论。
我的评论位于/////////和\\\\\\\\\\\之间，以便于理解。
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>