JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<canvas id="gameboard" width="500" height="300">Please use a modern web browser.</canvas>

CSS

#gameboard {
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 2px 2px 5px rgba(135, 135, 135, 0.5);
}

JavaScript

(function Scramblr ($) {
    var canvas = document.getElementById('gameboard'),
        context = canvas.getContext('2d');
    
    var guesses = 0,
        message = 'Guess The Letter From a (lower) to z (higher)',
        letters = 'a b c d e f g h i j j l m n o p q r s t u v w x y z'.split(),
        today = new Date(),
        letterToGuess = '',
        higherOrLower = '',
        lettersGuessed,
        gameOver = false
    
    if (!canvas || !context) {
        Error('There was a problem accessing the canvas element.');
    }

    function eventKeyPressed (e) {
        var letterPressed = String.fromCharCode(e.keyCode);
        letterPressed = letterPressed.toLowerCase();
        guesses++;
        lettersGuessed.push(letterPressed);
        
        if (letterPressed == letterToGuess) {
            gameoOver = true;
            }
            
    }
    
    function initGame() {
        var letterIndex = Math.floor(Math.random() * letters.length);
        
        letterToGuess = letters[letterIndex];
        guesses = 0;
        lettersGuessed = [];
        gameOver = false;
        
        $(window).bind('keyup', eventKeyPressed, true);
        
        drawScreen();
    
    
}(jQuery));