JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<h1>hangman</h1>
<p>by frogggeee</p>
<button type = "button" onclick = "newGame()">new game</button>
<p></p>
<canvas id = "canvas" width = "480" height = "360"></canvas>
<script>
let guessedLetters = [];
let lives = 6;
let lettersFound = [];
let playersLetters = "";
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let words = ["panda", "zebra", "cat", "dog", "lion", "frog", "hawk", "mouse", "pig", "moose", "shark", "rat", "worm", "rabbit", "cow", "eagle", "monkey"];
let word = 0;
let hangmanImage = new Image();
hangmanImage.src = "http://pixelartmaker.com/art/201d6cdbc293ff9.png";
function newGame() {
	word = words[Math.floor(Math.random() * words.length)];
  lettersFound = [];
  addSpaces();
  setTimeout(guessLetter, 100);
}
function addSpaces() {
lettersFound.push("_");
	for (let i = 0; i < 20; i++) {
  	lettersFound.push("_");
  }
}
function guessLetter() {
	let guess = prompt ("what letter do you want to guess?");
	let guessedAny = 0;
  while (guess.length != 1) {
  	guess = prompt ("what letter do you want to guess?");
  }
	for (let i = 0; i < word.length; i++) {
  	if (word.charAt(i) == guess) {
    	lettersFound.splice(i, 1, guess);
	guessedAny = 1;
    }
  }
	if (guessedAny == 0) {
	lives = lives - 1;
	} else {
	guessedLetters.push(guess);
	}
	if (lives != 0) {
	setTimeout(guessLetter, 100);
	}
}
function render() {
	let i = 0;
	ctx.clearRect(0, 0, 1000, 1000);
  ctx.beginPath();
  ctx.rect(0, 0, 500, 500);
  ctx.fillStyle = "#000000";
  ctx.fill();
  ctx.closePath();
  playersLetters = "";
  for (i = 0; i < word.length; i++) {
    playersLetters = playersLetters + lettersFound[i];
    if (playersLetters.charAt(i) == lettersFound[i]) {
    	if (playersLetters.charAt(i) == 'm') {
      	ctx.beginPath();
        ctx.font="20px Roboto Mono";
        ctx.fillStyle = "#ffffff";
        ctx.fillText(playersLetters.charAt(i), 180 + (i * 20), 234);
        ctx.closePath();
      } else  if...