0
Как часть моего задания, я делаю простую игру в палач, где пользователь нажимает на алфавит букв, который затем должен поменять правильные буквы, иначе показанные как _.Hangman game - Замена букв в списке
Я знаю, проблема myWord[i].innerHTML = guess; и почему, но я не знаю, что еще использовать здесь.
Если вы не хотите, чтобы смотреть через весь фрагмент кода, функцию, которая, как предполагается, заботиться о нем ниже:
function wordOnClick() {
var guess = this.innerHTML; //Usikker
this.className = "active";
this.onclick = null;
for (var i=0; i<saveWord.length; i++) {
if (saveWord[i] === guess) {
myWord[i].innerHTML = guess;
var bool = true;
winCounter++;
}
}
if (bool != true) {
counter --;
animateMan();
}
if (counter === 0) {
document.getElementById("buttons").className = "active";
}
if (winCounter === saveWord.length) {
lifePool.innerHTML = "Congratz, you've won!";
hangmanbtn.style.display = "inherit";
}
}
Весь код здесь:
hangmanbtn.onclick = function() {
hangman();
};
/*
* Hangman!
* Runs when you click PLAY!
*/
function hangman() {
hangmanStyle();
createbuttons();
incompleteWord();
/*
* RESET CANVAS ON NEW GAME
*/
var canvas = document.getElementById("hangman");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height);
/*
* REMOVE CAVNAS OVERLAY & RESTORE BUTTONS
*/
hangmanbtn.style.display = "none";
hiddenCanvas.style.display = "none";
lifePool.innerHTML = "You have 6 lives";
document.getElementById("buttons").className = "";
/*
* VARIABLES
*/
var saveWord;
var words = [];
var guess;
var usedGuesses = [];
var getWord;
var myWord = document.getElementById("myWord").innerHTML;
var counter = 6;
var winCounter = 0;
/*
* This function creates the alphabet buttons
*/
function createbuttons() {
document.getElementById("buttons").innerHTML = "";
var sexyButtons = document.getElementById("buttons");
var letters = document.createElement("ul");
var alphabet = ['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'
];
for (var i = 0; i < alphabet.length; i++) {
letters.id = "alphabet";
var list = document.createElement("li");
list.id = "letter";
list.innerHTML = alphabet[i];
list.onclick = wordOnClick;
sexyButtons.appendChild(letters);
letters.appendChild(list);
}
}
/*
* Finds a random word and returns it
*/
function chosenWord() {
words = ["keyboard", "guitar", "elephant", "radio", "amnesia", "law", "programming", "princess",
"facebook", "pizza", "taco", "electronics", "titanic", "elevator", "cat", "house", "sea", "space", "galaxy", "psychopath", "marijuana", "youcanneverguessthiswordhahah"
];
var result = Math.floor(Math.random() * words.length);
saveWord = words[result];
console.log(saveWord);
return saveWord;
}
/*
* Gets word from chosenWord() and displays the word in a list
*/
function incompleteWord() {
var wordHolder = document.getElementById("hold");
var makeWordList = document.createElement("ul");
var getWord = chosenWord();
guess;
usedGuesses = [];
hold.innerHTML = "";
for (var i = 0; i < getWord.length; i++) {
makeWordList.id = "myWord";
guess = document.createElement("li");
guess.className = "guess";
guess.innerHTML = "_";
wordOnClick();
usedGuesses.push(guess);
wordHolder.appendChild(makeWordList);
makeWordList.appendChild(guess);
}
return getWord;
return usedGuesses;
}
/*
* Runs when you click a letter:
* Replaces _ with the correct letter, draws the hangman if it is wrong, whites out
* the already clicked letters, and gives feedback on remaining lives
*/
function wordOnClick() {
var guess = this.innerHTML; //Usikker
this.className = "active";
this.onclick = null;
for (var i = 0; i < saveWord.length; i++) {
if (saveWord[i] === guess) {
myWord[i].innerHTML = guess;
var bool = true;
winCounter++;
}
}
if (bool != true) {
counter--;
animateMan();
}
if (counter === 0) {
document.getElementById("buttons").className = "active";
}
if (winCounter === saveWord.length) {
lifePool.innerHTML = "Congratz, you've won!";
hangmanbtn.style.display = "inherit";
}
}
/*
* This function sets the width and color for the hangman
*/
function hangmanStyle() {
var ctx = document.getElementById("hangman").getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#000"
ctx.lineWidth = 4;
}
/*
* This function draws the hangman pieces in order
*/
function animateMan() {
var remLives = counter;
for (var i = -1; i < remLives; i++) {
if (remLives === 5) {
head();
lifePool.innerHTML = "You have " + remLives + " lives";
} else if (remLives === 4) {
body();
lifePool.innerHTML = "You have " + remLives + " lives";
} else if (remLives === 3) {
leftArm();
lifePool.innerHTML = "You have " + remLives + " lives";
} else if (remLives === 2) {
rightArm();
lifePool.innerHTML = "You have " + remLives + " lives";
} else if (remLives === 1) {
leftLeg();
lifePool.innerHTML = "You have " + remLives + " lives";
} else if (remLives === 0) {
rightLeg();
lifePool.innerHTML = "You have lost!";
hangmanbtn.style.display = "inherit";
}
}
}
/*
* These are the hangman limbs
*/
function head() {
var ctx = document.getElementById("hangman").getContext("2d");
ctx.beginPath();
ctx.fillStyle = "#000"
ctx.arc(235, 145, 25, 0, 2 * Math.PI)
ctx.fill();
ctx.stroke();
}
function body() {
var ctx = document.getElementById("hangman").getContext("2d");
ctx.beginPath();
ctx.moveTo(235, 170);
ctx.lineTo(235, 250);
ctx.stroke();
}
function leftArm() {
var ctx = document.getElementById("hangman").getContext("2d");
ctx.beginPath();
ctx.moveTo(235, 180);
ctx.lineTo(200, 200);
ctx.stroke();
}
function rightArm() {
var ctx = document.getElementById("hangman").getContext("2d");
ctx.beginPath();
ctx.moveTo(235, 180);
ctx.lineTo(270, 200);
ctx.stroke();
}
function leftLeg() {
var ctx = document.getElementById("hangman").getContext("2d");
ctx.beginPath();
ctx.moveTo(235, 250);
ctx.lineTo(200, 290);
ctx.stroke();
}
function rightLeg() {
var ctx = document.getElementById("hangman").getContext("2d");
ctx.beginPath();
ctx.moveTo(235, 250);
ctx.lineTo(270, 290);
ctx.stroke();
}
}body {
background-color: antiquewhite;
}
.task {
margin: 5px;
padding: 3px;
border-top: 2px solid gray;
}
#hangman {
/*background-image: url("hangman/hangmanbackground.jpg");*/
background-color: #FFF;
}
#alphabet {
padding: 2px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 8px;
width: 380px;
height: 80px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;
border: solid 1px #fff;
background-color: forestgreen;
}
#alphabet li {
float: left;
margin: 0 5px 13px 0;
list-style: none;
width: 12px;
height: 10px;
padding: 5px;
padding-bottom: 15px;
background: #c1d72e;
color: #fff;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;
border: solid 1px #fff;
}
#alphabet li:hover {
background: #3ADF00;
border: solid 1px #fff;
color: #fff;
}
.active {
opacity: 0.4;
filter: alpha(opacity=40);
-moz-transition: all 1s ease-in;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
cursor: default;
}
.active:hover {
-moz-transition: all 1s ease-in;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
opacity: 0.4;
filter: alpha(opacity=40);
-moz-transition: all 1s ease-in;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#myWord {
margin: 0;
display: block;
padding: 0;
display: block;
}
#myWord li {
position: relative;
list-style: none;
margin: 0;
display: inline-block;
padding: 0 10px;
font-size: 30px;
}
#lifePool {
max-width: 300px;
margin: 0;
z-index: 3px;
font-size: 30px;
font-family: monospace;
color: #c1d72e;
}
#hiddenCanvas {
height: 500px;
width: 800px;
position: absolute;
z-index: 4;
background-color: forestgreen;
opacity: 0.8;
}
#hangmanbtn {
width: 100px;
height: 50px;
background-color: #c1d72e;
border-radius: 10px;
color: #fff;
font-size: 25px;
}<section class="task">
<h3>
Task 4
</h3>
<button id=hangmanbtn>Play!</button>
<div id="hiddenCanvas"></div>
<p id="lifePool"></p>
<div id="buttons"></div>
<div id="hold"></div>
<canvas id="hangman" height="500px" width="800px"></canvas>
</section>
Спасибо ! Это поставило вопрос для меня. :) –