smashable

A super simple, yet addicting game. Can you smash the fastest?

by psycketom

HTML

<div id="overlay">
    <div id="menu">
        <h2>How to play</h2>
        <p class="information">Press the key you see on screen as fast as you can.</p>
        
        <div id="starter">
            <p>Press <kbd id="start" class="space">space</kbd> to start!</p>
        </div>
        
        <p class="warning">WARNING: All keyboard operations will be hooked to the game after the game start. Press <kbd>Esc</kbd> to stop.</p>
    </div>
</div>

<div id="game">
    <div id="score">0</div>
    <div id="time">0.00</div>
    <div id="keys">0/0</div>
</div>

CSS

body
{
    font-family: sans-serif;
    font-size: 18px;
}

#overlay
{
    width: 100%;
    height: 100%;
    
    background-color: rgba(0, 0, 0, 0.3);
    
    position: fixed;
    
    left: 0;
    top: 0;
    
    z-index: 100;
}

#menu
{
    width: 400px;
    height: 240px;
    
    background-color: white;
    
    position: absolute;
    
    top: 50%;
    left: 50%;
    
    margin-top: -140px;
    margin-left: -220px;
    
    padding: 20px;
}

h2
{
    font-weight: bold;
    
    font-size: 2em;
    
    padding-bottom: 10px;
    margin-bottom: 10px;
    
    border-bottom: dotted 1px black;
}

#starter
{
    text-align: center;
    margin: 10px;
}

.warning
{
    font-size: 0.8em;
    
    color: red;
    
    margin-top: 20px;
}

kbd
{
    border: solid 1px #ccc;
    
    border-radius: 3px;
    
    display: inline-block;
    
    text-align: center;
    line-height: 40px;
    
    height: 40px;
    width: 40px;
    
    font-size: 0.9em;
    
    color: black;
    
    background-color: white;
    box-shadow: 1px 1px 2px black;
}

kbd.space
{
    width: 180px;
}

kbd.large
{
    border-width: 3px;
    border-radius: 10px;
    
    height: 160px;
    width: 160px;
    
    font-size: 36px;
    
    line-height: 160px;
    
    margin-top: 20%;
}

kbd.space.large
{
    width: 500px;
}

#game
{
    position: absolute;
    
    width: 100%;
    height: 100%;
        
    left: 0;
    top: 0;
    
    text-align: center;
}

#score
{
    position: absolute;
    
    left: 20px;
    top: 20px;
}

#time
{
    position: absolute;
    
    left: 20px;
    
    top: 60px;
}

#keys
{
    position: absolute;
    
    left: 20px;
    
    top: 100px;
}

JavaScript

/**
 * Button smashing game
 * @version 0.1a
 * @author Toms "scriptroop" Seisums
 */

$(function() {
    
    var keys = {
        ESCAPE : 27,
        
        F1 : 112,
        F2 : 113,
        F3 : 114,
        F4 : 115,
        F5 : 116,
        F6 : 117,
        F7 : 118,
        F8 : 119,
        F9 : 120,
        F10 : 121,
        F11 : 122,
        F12 : 123,
        
        INSERT : 45,
        DELETE : 46,
        PGUP : 33,
        PGDN : 34,
        HOME : 36,
        END : 35,
        
        TILDE : 192,
        
        1 : 49,
        2 : 50,
        3 : 51,
        4 : 52,
        5 : 53,
        6 : 54,
        7 : 55,
        8 : 56,
        9 : 57,
        0 : 48,
        
        A : 65,
        B : 66,
        C : 67,
        D : 68,
        E : 69,
        F : 70,
        G : 71,
        H : 72,
        I : 73,
        J : 74,
        K : 75,
        L : 76,
        M : 77,
        N : 78,
        O : 79,
        P : 80,
        Q : 81,
        R : 82,
        S : 83,
        T : 84,
        U : 85,
        V : 86,
        W : 87,
        X : 88,
        Y : 89,
        Z : 90,
        
        '[' : 219,
        ']' : 221,
        '\\' : 220,
        ',' : 188,
        '.' : 190,
        '/' : 191,
        ';' : 186,
        '\'' : 222,
        
        PLUS : 187,
        MINUS : 189,
        
        BACKSPACE : 8,
        
        TAB : 9,
        
        CAPSLOCK : 20,
        
        SHIFT : 16,
        CTRL : 17,
        ALT : 18,
        
        SPACE : 32,
        
        LEFTARROW : 37,
        UPARROW : 38,
        RIGHTARROW : 39,
        DOWNARROW : 40,
        
        RETURN : 13,
        ENTER : 13,
        
        NUM_0 : 96,
        NUM_1 : 97,
        NUM_2 : 98,
        NUM_3 : 99,
        NUM_4 : 100,
        NUM_5 : 101,
        NUM_6 : 102,
        NUM_7 : 103,
        NUM_8 : 104,
        NUM_9 : 105,
        
        NUM_DELETE : 110,
        NUM_PLUS : 107,
        NUM_MINUS : 109,
        NUM_STAR :...