Draw function and replace elements with letters-CodePudding

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 onl oad="initialize()">
  <h1>Hangman</h1>
  <div >
    <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 >
        <input  type="button" value="A" onclick="checkLetter('a')" />
        <input  type="button" value="B" onclick="checkLetter('b')" />
        <input  type="button" value="C" onclick="checkLetter('c')" />
        <input  type="button" value="D" onclick="checkLetter('d')" />
        <input  type="button" value="E" onclick="checkLetter('e')" />
        <input  type="button" value="F" onclick="checkLetter('f')" />
        <input  type="button" value="G" onclick="checkLetter('g')" />
        <input  type="button" value="H" onclick="checkLetter('h')" />
        <input  type="button" value="I" onclick="checkLetter('i')" />
      </div>
      <div >
        <input  type="button" value="J" onclick="checkLetter('j')" />
        <input  type="button" value="K" onclick="checkLetter('k')" />
        <input  type="button" value="L" onclick="checkLetter('l')" />
        <input  type="button" value="M" onclick="checkLetter('m')" />
        <input  type="button" value="N" onclick="checkLetter('n')" />
        <input  type="button" value="O" onclick="checkLetter('o')" />
        <input  type="button" value="P" onclick="checkLetter('p')" />
        <input  type="button" value="Q" onclick="checkLetter('q')" />
      </div>
      <div >
        <input  type="button" value="R" onclick="checkLetter('r')" />
        <input  type="button" value="S" onclick="checkLetter('s')" />
        <input  type="button" value="T" onclick="checkLetter('t')" />
        <input  type="button" value="U" onclick="checkLetter('u')" />
        <input  type="button" value="V" onclick="checkLetter('v')" />
        <input  type="button" value="W" onclick="checkLetter('w')" />
        <input  type="button" value="X" onclick="checkLetter('x')" />
        <input  type="button" value="Y" onclick="checkLetter('y')" />
        <input  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 >
      <svg height="250" width="200" >
                <line x1="60" y1="20" x2="140" y2="20" />
            </svg>

      <div >
        <div id="wrong-letters"></div>
      </div>
      <div  id="word"></div>
    </div>

    <div  id="popup-container">
      <div >
        <h2 id="final-message"></h2>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

Make a clear
do not use inline event handlers
for now add a console.log to double check

I also changed the CSS to not rely on position absolute and transform

let background;
let width, heigth, margin;
let animals, plants, clothes;
let lives;
let chosenCategory;
let word;

const clear = () =>   background.clearRect(0, 0, width, height);

const 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"];
};

const drawLetters = () =>  {
  clear();
  console.log(word)
  for (let i = 0; i < word.length; i  ) {
    background.fillRect(i * ((width * 0.9) / word.length)   margin, height / 2, 30, 5);
  }
};

const 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)];
  }
};


const drawLetter = (letter) => {
  background.font = "30px Arial";
  background.fillText(letter, word.indexOf(letter) * ((width * 0.9) / word.length)   margin, height / 2 - 10);
};

const checkLetter = (letter) => {
  if (word.includes(letter)) {
    drawLetter(letter);
  }
};


window.addEventListener("DOMContentLoaded", initialize)

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;
  padding: 3em;
  border-radius: 0.6em;
  margin: auto;
}

.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;
}

<h1>Hangman</h1>
<div >
  <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 >
      <input  type="button" value="A" onclick="checkLetter('a')" />
      <input  type="button" value="B" onclick="checkLetter('b')" />
      <input  type="button" value="C" onclick="checkLetter('c')" />
      <input  type="button" value="D" onclick="checkLetter('d')" />
      <input  type="button" value="E" onclick="checkLetter('e')" />
      <input  type="button" value="F" onclick="checkLetter('f')" />
      <input  type="button" value="G" onclick="checkLetter('g')" />
      <input  type="button" value="H" onclick="checkLetter('h')" />
      <input  type="button" value="I" onclick="checkLetter('i')" />
    </div>
    <div >
      <input  type="button" value="J" onclick="checkLetter('j')" />
      <input  type="button" value="K" onclick="checkLetter('k')" />
      <input  type="button" value="L" onclick="checkLetter('l')" />
      <input  type="button" value="M" onclick="checkLetter('m')" />
      <input  type="button" value="N" onclick="checkLetter('n')" />
      <input  type="button" value="O" onclick="checkLetter('o')" />
      <input  type="button" value="P" onclick="checkLetter('p')" />
      <input  type="button" value="Q" onclick="checkLetter('q')" />
    </div>
    <div >
      <input  type="button" value="R" onclick="checkLetter('r')" />
      <input  type="button" value="S" onclick="checkLetter('s')" />
      <input  type="button" value="T" onclick="checkLetter('t')" />
      <input  type="button" value="U" onclick="checkLetter('u')" />
      <input  type="button" value="V" onclick="checkLetter('v')" />
      <input  type="button" value="W" onclick="checkLetter('w')" />
      <input  type="button" value="X" onclick="checkLetter('x')" />
      <input  type="button" value="Y" onclick="checkLetter('y')" />
      <input  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 >
    <svg height="250" width="200" >
        <line x1="60" y1="20" x2="140" y2="20" />
      </svg>

    <div >
      <div id="wrong-letters"></div>
    </div>
    <div  id="word"></div>
  </div>

  <div  id="popup-container">
    <div >
      <h2 id="final-message"></h2>
    </div>
  </div>
</div>

CodePudding user response：

So when given category is chosen and New Word button is clicked, adequate to number of letters in this word, number underscores will be displayed. And as here:

 function checkLetter(letter) {
        if (word.includes(letter)) {
            drawLetter(letter);
        }

If chosen letter is present, it will replace the underscore. And if it is not the case - if the word doesn't include the letter, then the element of hangman will be drawn. But I don't know how to make it work. How to make some kind of negation to this condition if word.includes, in the way such as: if word doesn't include letter, then draw element of the hangman.