JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="pendu"></div>

CSS

.letter {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    text-align: center;
    line-height: 20px;
    margin-right: 2px;
}

.letter.used {
    background-color: red;
}

.keyboard {
    margin-top: 10px;
}


}

JavaScript

var currentValue;
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"];
var used;
var word;
var lifes;
launch();

function launch() {
    $("#pendu").html('<div id="word" class="word"></div><div id="keyboard" class="keyboard"></div><div id="lifes" class="lifes"></div><div id="man"></div>');
    used = [];
    lifes = 6;
    start();
}

function start() {
    word = getWord();
    currentValue = Array(word.length).fill("_");
    replaceLetter(" ")
    replaceLetter("-")
    displayKeyboard();
    displayLifes();
    displayMan();
    $("#keyboard").on("click", ".letter", function() {
        if (!$(this).hasClass("used")) {
            tryLetter($(this).text());
        }
    });
}

function getWord() {
    var _0xfe9a = ["\x72\x61\x63\x65", "\x77\x6F\x72\x6B", "\x6F\x70\x74\x69\x6D\x61\x6C", "\x73\x74\x69\x74\x63\x68", "\x61\x73\x68\x61\x6D\x65\x64", "\x67\x69\x66\x74\x65\x64", "\x77\x65\x6C\x6C\x2D\x6F\x66\x66", "\x61\x77\x61\x72\x65", "\x70\x65\x72\x66\x6F\x72\x6D", "\x73\x6F\x72\x74", "\x63\x75\x74\x65", "\x69\x6E\x63\x6F\x6E\x63\x6C\x75\x73\x69\x76\x65", "\x68\x69\x73\x74\x6F\x72\x79", "\x63\x68\x61\x6E\x67\x65", "\x73\x74\x65\x65\x70", "\x73\x68\x69\x70", "\x73\x6B\x69\x6C\x6C\x66\x75\x6C", "\x77\x61\x6C\x6C", "\x63\x6C\x75\x6D\x73\x79", "\x70\x75\x6D\x70"];
    var words = [_0xfe9a[0], _0xfe9a[1], _0xfe9a[2], _0xfe9a[3], _0xfe9a[4], _0xfe9a[5], _0xfe9a[6], _0xfe9a[7], _0xfe9a[8], _0xfe9a[9], _0xfe9a[10], _0xfe9a[11], _0xfe9a[12], _0xfe9a[13], _0xfe9a[14], _0xfe9a[15], _0xfe9a[16], _0xfe9a[17], _0xfe9a[18], _0xfe9a[19]]
    return words[Math.floor(Math.random() * words.length - 1)];
}

function tryLetter(letter) {
    if (used.indexOf(letter) === -1) {
        used.push(letter);
        displayKeyboard();
    }
    if (word.indexOf(letter) === -1) {
        updateMan();
    } else {
        replaceLetter(letter);
    }
}

function replaceLetter(letter) {
    for (var...