The idea is to create simple hangman game, in which while you choose a given category and click new word button, the corresponding random word from the given list will be displayed (as underscores). Then, if letter matches letter present in this word, it will be revealed, if not, the consecutive element of hangman will be drawn.
But I have no clue now how to implement further these onto the project. How to create a function which will generate a word randomly on the background, and if chosen letter is not there, make it draw something, or if it is present in the word, change underscore with this letter?
I wanted to create a code which will allow to play hangman game described in the topic. I can't find solution for creating the code which will replace underscores with letters, and draw elements on the background if a given letter is not there.
let background;
let width, heigth, margin;
let animals, plants, clothes;
let lives;
let chosenCategory;
let word;
function initialize() {
background = document.getElementById("background").getContext("2d");
width = document.getElementById("background").width;
height = document.getElementById("background").height;
margin = 25;
lives = 10;
word = "nothing";
animals = ["horse", "elephant", "squirell"];
plants = ["pineapple", "tomato", "lettuce"];
clothes = ["trousers", "shirt", "skirt"];
}
function drawLetters() {
for (let i = 0; i < word.length; i++) {
background.fillRect(i * ((width * 0.9) / word.length) + margin, height / 2, 30, 5);
}
}
function randomWord() {
chosenCategory = document.getElementById("category").value;
if (chosenCategory == "animals") {
word = animals[Math.floor(Math.random() * animals.length)];
} else if (chosenCategory == "plants") {
word = plants[Math.floor(Math.random() * plants.length)];
} else if (chosenCategory == "clothes") {
word = clothes[Math.floor(Math.random() * clothes.length)];
}
}
function checkLetter(letter) {
if (word.includes(letter)) {
drawLetter(letter);
}
}
function drawLetter(letter) {
background.font = "30px Arial";
background.fillText(letter, word.indexOf(letter) * ((width * 0.9) / word.length) + margin, height / 2 - 10);
}body {
text-align: center;
background-color: #8EB19D;
}
#background {
background-color: azure;
border: 3px solid black;
}
h1 {
color: rgb(190, 220, 254);
font-Size: 40px;
height: 50px;
text-align: center;
font-family: Tahoma;
}
.container {
font-size: 16px;
background-color: #ffffff;
width: 64vw;
max-width: 32em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em;
border-radius: 0.6em;
}
.letter-row {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.letter-container {
height: 2.4em;
width: 2.4em;
border-radius: 0.3em;
font-weight: bold;
background-color: #ffffff;
cursor: pointer;
}<body onload="initialize()">
<h1>Hangman</h1>
<div class="container">
<p>
<select id="category">
<option value="">Category</option>
<option id="animals" option value="animals">Animals</option>
<option id="plants" option value="plants">Plants</option>
<option id="clothes" option value="clothes">Clothes</option>
</select>
</p>
<canvas id="background" width="350" height="250">No canvas support</canvas>
<div id="text-container">
<div class="letter-row">
<input class="letter-container" type="button" value="A" onclick="checkLetter('a')" />
<input class="letter-container" type="button" value="B" onclick="checkLetter('b')" />
<input class="letter-container" type="button" value="C" onclick="checkLetter('c')" />
<input class="letter-container" type="button" value="D" onclick="checkLetter('d')" />
<input class="letter-container" type="button" value="E" onclick="checkLetter('e')" />
<input class="letter-container" type="button" value="F" onclick="checkLetter('f')" />
<input class="letter-container" type="button" value="G" onclick="checkLetter('g')" />
<input class="letter-container" type="button" value="H" onclick="checkLetter('h')" />
<input class="letter-container" type="button" value="I" onclick="checkLetter('i')" />
</div>
<div class="letter-row">
<input class="letter-container" type="button" value="J" onclick="checkLetter('j')" />
<input class="letter-container" type="button" value="K" onclick="checkLetter('k')" />
<input class="letter-container" type="button" value="L" onclick="checkLetter('l')" />
<input class="letter-container" type="button" value="M" onclick="checkLetter('m')" />
<input class="letter-container" type="button" value="N" onclick="checkLetter('n')" />
<input class="letter-container" type="button" value="O" onclick="checkLetter('o')" />
<input class="letter-container" type="button" value="P" onclick="checkLetter('p')" />
<input class="letter-container" type="button" value="Q" onclick="checkLetter('q')" />
</div>
<div class="letter-row">
<input class="letter-container" type="button" value="R" onclick="checkLetter('r')" />
<input class="letter-container" type="button" value="S" onclick="checkLetter('s')" />
<input class="letter-container" type="button" value="T" onclick="checkLetter('t')" />
<input class="letter-container" type="button" value="U" onclick="checkLetter('u')" />
<input class="letter-container" type="button" value="V" onclick="checkLetter('v')" />
<input class="letter-container" type="button" value="W" onclick="checkLetter('w')" />
<input class="letter-container" type="button" value="X" onclick="checkLetter('x')" />
<input class="letter-container" type="button" value="Y" onclick="checkLetter('y')" />
<input class="letter-container" type="button" value="Z" onclick="checkLetter('z')" />
</div>
</div>
<p></p>
<div>
<button id="New Word" type="button" onclick="randomWord()">New Word</button>
<input type="button" value="Draw Lines" onclick="drawLetters()" />
</div>
<div class="game-container">
<svg height="250" width="200" class="figure-container">
<line x1="60" y1="20" x2="140" y2="20" />
</svg>
<div class="wrong-letter-container">
<div id="wrong-letters"></div>
</div>
<div class="word" id="word"></div>
</div>
<div class="popup-container" id="popup-container">
<div class="popup">
<h2 id="final-message"></h2>
</div>
</div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire