提问人：Maddy Young 提问时间：11/1/2023 最后编辑：BarmarMaddy Young 更新时间：11/1/2023 访问量：35
刽子手 - 不能使用字母重复超过 3 次的单词
Hangman - can't use words with letters repeating more than 3 times
问：
我正在使用 SVG 创建一个刽子手游戏，一切都运行良好。但是，每当一个单词包含超过 3 个相同的字母时，该单词就无法正确使用。我使用了多种不同的方法来查找重复项，但似乎没有什么可以解决问题。 为了调查问题，我将随机数更改为始终等于 1，其中篮球有 4 个 ls，从而让我识别问题。但是，我仍在努力寻找问题的根源。
let wordArr = [];
let dupeArr = [];
let dupeArr1 = [];
let dupeArr2 = [];
let dupeArr3 = [];
let dupeArr4 = [];
let dupeArr5 = [];
let dupeArr6 = [];
let dupeArr7 = [];
let arrOfDupes = [dupeArr, dupeArr1, dupeArr2, dupeArr3]
let hangmanNum = 0;
let yes = document.getElementsByClassName("yes");
newArr = [];
let endSet = []
let startEr = []
function gameStart() {
let playAgainSet = document.querySelectorAll(".playAgain")
playAgainSet.forEach(e => {
endSet.push(e)
})
endSet.forEach(e => {
e.setAttribute("display", "none")
})
console.log(endSet)
let startSet = document.querySelectorAll(".start")
startSet.forEach(e => {
startEr.push(e)
})
startEr.forEach(e => {
e.setAttribute("display", "none")
})
console.log(startEr)
let lost = document.getElementById("youLost")
lost.setAttribute("display", "none")
let alphabet = document.querySelectorAll(".alphabet")
let alphArr = []
alphabet.forEach(e => {
alphArr.push(e)
})
alphArr.forEach(e => {
e.setAttribute("fill", "black")
})
var wordsToChooseFrom = ["b ,a ,s ,k ,e ,t ,b ,a ,l ,l ,l ,l ", "s ,o ,c ,c ,e ,r ", "l ,a ,c ,r ,o ,s ,s ,e ", "f ,o ,o ,t ,b ,a ,l ,l ", "h ,o ,c ,k ,e ,y ", "g ,o ,l ,f ", "g ,y ,m ,n ,a ,s ,t ,i ,c ,s ", "t ,e ,n ,n ,i ,s ", "b ,a ,d ,m ,i ,n ,t ,o ,n ", "v ,o ,l ,l ,e ,y ,b ,a ,l ,l ", "s ,w ,i ,m ,m ,i ,n ,g ", "w ,r ,e ,s ,t ,l ,i ,n ,g ", "f ,i ,e ,l ,d , ,h ,o ,c ,k ,e ,y ", "l ,l ,l ,l "]
function getRandomInt(max) {
return Math.floor(Math.random() * max)
}
var wordBox = document.getElementById('randomWord')
// var randomI = getRandomInt(10)
var randomI = 0;
let word = wordsToChooseFrom[randomI]
wordArr = word.split(",") //.join(" ")
// wordArr.replace(",", " ")
/* wordArr.forEach(letter => {
})*/
console.log(wordArr)
//wordArr = ["b ","a ","s ","k ","e ", "t ", "b ", "a ", "l ", "l "]
// wordBox.textContent = []
wordBox.setAttribute("display", "block")
let x = 250;
let y = 200;
const svg = document.querySelector('svg')
let underline = document.getElementById("randomWordUnderline")
underline.textContent = ""
for (let i = 0; i < wordArr.length; i++) {
underline.textContent += "_ "
}
console.log(underline.textContent)
let letteri = 0;
let index = 0;
var length = wordArr.length;
function findDupes(arry) {
for (let i = 0; i <= length - 1; i++) {
for (let j = i + 1; j <= length; j++) {
if (arr[i] === arr[j]) {
newArr[index] = arr[i]
index++
console.log(index)
}
}
}
return newArr;
/*let toFindDuplicates = arry => arry.filter((item, index) => arry.indexOf(item) !== index)
newArr = toFindDuplicates(arry);
console.log(newArr);
}
console.log(findDupes(wordArr))
console.log(newArr)*/
// let DupeArr = [];
/* for (i=0; i<newArr.length; i++) {
DupeArr[i] = [];
console.log(DupeArr);
}*/
let newArri = 0;
newArr.forEach(letter => {
/*for (i=0; i<wordArr.length; i++) {
if (wordArr[i]== letter) {
console.log(wordArr.indexOf(letter))
}
}*/
let idx = wordArr.indexOf(letter)
console.log(idx)
while (idx !== -1) {
arrOfDupes[newArri].push(idx)
idx = wordArr.indexOf(letter, idx + 1)
}
console.log(arrOfDupes[newArri])
newArri += 1
})
}
wordArr.forEach(letter => {
let letterNum = wordArr.indexOf(letter)
// console.log(letterNum)
// let letNumString = letterNum.toString()
let numBox = document.createElementNS("http://www.w3.org/2000/svg", "text")
numBox.setAttribute("x", x)
numBox.setAttribute("y", y)
numBox.setAttribute("display", "block")
numBox.setAttribute("stroke", "transparent")
numBox.setAttribute("fill", "transparent")
numBox.setAttribute("class", "letter")
numBox.textContent = letter
if (newArr.includes(letter)) {
numBox.setAttribute("id", letter + letteri)
console.log(letteri)
console.log("yes")
} else {
numBox.setAttribute("id", letter)
// console.log("no")
}
numBox.setAttribute("font-size", "28")
numBox.setAttribute("font-family", "monospace")
svg.appendChild(numBox)
x += 35;
letteri += 1;
// console.log(numBox.getAttribute("id"))
})
}
function letterClicked() {
var thisLetter = event.srcElement.id
event.srcElement.setAttribute("fill", "transparent")
console.log(thisLetter)
console.log(wordArr)
if (wordArr.includes(thisLetter + " ")) {
console.log("yes")
if (newArr.includes(thisLetter + " ")) {
/*let idx = wordArr.indexOf(thisLetter)
let idxArr = []
while (idx !== -1) {
idxArr.push(idx)
idx = wordArr.indexOf(thisLetter, idx + 1)
}*/
let findArr = wordArr.indexOf(thisLetter + " ")
console.log(findArr)
let tempArr;
arrOfDupes.forEach(array => {
if (array.includes(findArr))
tempArr = array
console.log(tempArr)
})
// let numOfLetters = 0
let arrOfLetter = []
tempArr.forEach(num => {
console.log(num)
let letterNum = wordArr[num]
arrOfLetter.push(letterNum + num)
console.log(arrOfLetter)
console.log(wordArr)
})
arrOfLetter.forEach(letter => {
let letterShow = document.getElementById(letter)
letterShow.setAttribute("stroke", "black")
letterShow.setAttribute("fill", "black")
letterShow.setAttribute("class", "yes")
console.log(letterShow)
let newArri = 0;
let arrofWords = []
})
/*for (i=0; i<wordArr.length; i++) {
if (wordArr[i]== letter) {
console.log(wordArr.indexOf(letter))
}
}*/
/* let idx = wordArr.indexOf(letter)
while (idx !== -1) {
arrofWords.push(idx)
idx = wordArr.indexOf(letter, idx + 1)
}
console.log(arrofWords)
newArri += 1*/
} else {
let letterShow = document.getElementById(thisLetter + " ")
letterShow.setAttribute("stroke", "black")
letterShow.setAttribute("fill", "black")
console.log(letterShow)
letterShow.setAttribute("class", "yes")
}
} else {
console.log("hangman")
let hangmanEl = document.getElementById("hangman" + hangmanNum)
hangmanEl.setAttribute("stroke", "black")
hangmanNum += 1;
}
if (wordArr.length == yes.length) {
console.log("won")
endSet.forEach(e => {
e.setAttribute("display", "block")
})
let yesArr = []
console.log(yes)
let allLetters = document.querySelectorAll(".yes")
allLetters.forEach(e => {
yesArr.push(e)
})
yesArr.forEach(e => {
e.setAttribute("display", "none")
})
} else if (hangmanNum == 5) {
console.log("lost")
endSet.forEach(e => {
e.setAttribute("display", "block")
})
let win = document.getElementById("youWin")
win.setAttribute("display", "none")
console.log(win.getAttribute)
let lost = document.getElementById("youLost")
lost.setAttribute("display", "block")
let yesArr = []
console.log(yes)
let allLetters = document.querySelectorAll(".yes")
allLetters.forEach(e => {
yesArr.push(e)
})
yesArr.forEach(e => {
e.setAttribute("display", "none")
})
}
/* wordArr.forEach(letter => {
if(letter == thisLetter + " ") {
}
})*/
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hangman</title>
<script lang="javascript">
</script>
</head>
<body style="margin: 0;">
<h1>Hangman</h1>
<svg width="700" height="600" style="background-color: purple;">
<rect x="10" y="300" height="30" width="150" fill="gray"></rect>
<rect x="10" y="270" height="30" width="125" fill="gray"></rect>
<rect x="10" y="240" height="30" width="100" fill="gray"></rect>
<line x1="50" y1="240" x2="50" y2="50" stroke="gray" stroke-width="5px"></line>
<line x1="47" y1="50" x2="150" y2="50" stroke="gray" stroke-width="5px"></line>
<line x1="150" y1="47" x2="150" y2="80" stroke="gray" stroke-width="5px"></line>
<circle cx="150" cy="100" r="20" fill="none" stroke="transparent" stroke-width="5px" id="hangman0"></circle>
<line x1="150" y1="120" x2="150" y2="200" stroke="transparent" stroke-width="5px" id="hangman1"></line>
<line x1="150" y1="140" x2="120" y2="120" stroke="transparent" stroke-width="5px" id="hangman2"></line>
<line x1="150" y1="140" x2="180" y2="120" stroke="transparent" stroke-width="5px" id="hangman3"></line>
<line x1="150" y1="197" x2="120" y2="220" stroke="transparent" stroke-width="5px" id="hangman4"></line>
<line x1="150" y1="197" x2="180" y2="220" stroke="transparent" stroke-width="5px" id="hangman5"></line>
<text x="50" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="a" onclick="letterClicked()" class="alphabet">A</text>
<text x="90" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="b" onclick="letterClicked()" class="alphabet">B</text>
<text x="130" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="c" onclick="letterClicked()" class="alphabet">C</text>
<text x="170" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="d" onclick="letterClicked()" class="alphabet">D</text>
<text x="210" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="e" onclick="letterClicked()" class="alphabet">E</text>
<text x="250" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="f" onclick="letterClicked()" class="alphabet">F</text>
<text x="290" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="g" onclick="letterClicked()" class="alphabet">G</text>
<text x="330" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="h" onclick="letterClicked()" class="alphabet">H</text>
<text x="370" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="i" onclick="letterClicked()" class="alphabet">I</text>
<text x="410" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="j" onclick="letterClicked()" class="alphabet">J</text>
<text x="450" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="k" onclick="letterClicked()" class="alphabet">K</text>
<text x="490" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="l" onclick="letterClicked()" class="alphabet">L</text>
<text x="530" y="450" font-size="20" font-weight="bold" font-family="sans-serif" id="m" onclick="letterClicked()" class="alphabet">M</text>
<text x="50" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="n" onclick="letterClicked()" class="alphabet">N</text>
<text x="90" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="o" onclick="letterClicked()" class="alphabet">O</text>
<text x="130" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="p" onclick="letterClicked()" class="alphabet">P</text>
<text x="170" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="q" onclick="letterClicked()" class="alphabet">Q</text>
<text x="210" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="r" onclick="letterClicked()" class="alphabet">R</text>
<text x="250" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="s" onclick="letterClicked()" class="alphabet">S</text>
<text x="290" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="t" onclick="letterClicked()" class="alphabet">T</text>
<text x="330" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="u" onclick="letterClicked()" class="alphabet">U</text>
<text x="370" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="v" onclick="letterClicked()" class="alphabet">V</text>
<text x="410" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="w" onclick="letterClicked()" class="alphabet">W</text>
<text x="450" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="x" onclick="letterClicked()" class="alphabet">X</text>
<text x="490" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="y" onclick="letterClicked()" class="alphabet">Y</text>
<text x="530" y="500" font-size="20" font-weight="bold" font-family="sans-serif" id="z" onclick="letterClicked()" class="alphabet">Z</text>
<text x="250" y="200" font-size="40" font-weight="bold" font-family="sans-serif" id="randomWordUnderline" >_________</text>
<text x="250" y="200" font-size="28" font-weight="bold" font-family="monospace" id="randomWord" letter-spacing="0" id="0"></text>
<!-- <text x="285" y="200" font-size="28" font-weight="bold" font-family="monospace" id="randomWord" letter-spacing="0" id="1"></text>
<text x="320" y="200" font-size="28" font-weight="bold" font-family="monospace" id="randomWord" letter-spacing="0" id="2">h</text>
<text x="355" y="200" font-size="28" font-weight="bold" font-family="monospace" id="randomWord" letter-spacing="0" id="3">h</text>
<text x="385" y="200" font-size="28" font-weight="bold" font-family="monospace" id="randomWord" letter-spacing="0" id="4">h</text>
<text x="420" y="200" font-size="28" font-weight="bold" font-family="monospace" id="randomWord" letter-spacing="0" id="5">h</text>
<text x="455" y="200" font-size="28" font-weight="bold" font-family="monospace" id="randomWord" letter-spacing="0" id="6">h</text>
<text x="490" y="200" font-size="28" font-weight="bold" font-family="monospace" id="randomWord" letter-spacing="0" id="7">h</text>
<text x="520" y="200" font-size="28" font-weight="bold" font-family="monospace" id="randomWord" letter-spacing="0" id="8">h</text>
<text x="555" y="200" font-size="28" font-weight="bold" font-family="monospace" id="randomWord" letter-spacing="0" id="9">h</text>
-->
<rect x="100" y="100" width="400" height="400" fill="white" class="playAgain"></rect>
<rect x="200" y="290" height="100" width="200"fill="pink" rx="10"class="playAgain"></rect>
<text x="200" y="250" font-size="50" class="playAgain" display="none" id="youWin">You win!</text>
<text x="200" y="250" font-size="50" id="youLost" display="none">You lost...</text>
<text x="225" y="350" font-size="30" onclick="gameStart()" class="playAgain" display="none"> Play Again?</text>
<text x="200" y="250" font-size="50" class="start">Hangman!</text>
<text x="275" y="350" font-size="30" onclick="gameStart()" class="start"> Play</text>
</svg>
</body>
</html>答： 暂无答案
评论
findDupes()return newArrreturnj <= length应该是，因为最后一个有效索引是 。j < lengthlength-1wordsToChooseFrom