argebe - A fun and unique browser game smaller than 3kb (uncompressed, without comments)

index.html

<canvas style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);"></canvas>
<script>
    /*
        w - The width of the canvas in pixels.
        h - The height of the canvas in pixels.
        s - The size of the character in pixels.
        c - The canvas element.
        t - The graphics context.
        u - The available colors.
        q - The player's current colors.
        v - Flag indicating if the game has started.
        f - Flag indicating if the game is currently running. Used to fix a bug where the alert would appear twice.
        n - The player's score.
        d - The document element.
        g - The current speed of the bars.
        m - The position of the player.
        k - An array of the active bars.
        a() - Bar prototype.
        d.onmousemove() - Locates the cursor's horizontal position relative to the canvas. Used to change the color of the player.
        i() - Renders the helper bars in the background.
        $ - Literally just the string "Click to Start"
        z() - Updates the score. Saves it as well if it is higher than the previous high score.
        c.onclick() - Starts the game.
        lambda in setInterval() - spawns a new bar each second and increments the player's score.
        p() - Renders all objects (bars, player, score, background helper).
    */
    [ w, h, s ] = [ 360, 600, 35 ]
    c = document.querySelector('canvas')
    t = c.getContext('2d')
    c.width = w
    c.height = h
    u = [ 'red', 'green', 'blue' ]
    q = 'green'
    v = f = n = 0;
    (d = document).body.style.background = 'black'
    g = 2
    m = h - 100 - s / 2

    k = []
    function a() {
        this.y = 0
        this.c = u[ Math.floor(Math.random() * 3) ]
    }

    d.onmousemove = e => {
        x = e.clientX - c.offsetLeft + w / 2
        if (x < w / 3) q = 'red'
        else q = x > 2 * w / 3 ? 'blue' : 'green'
    }

    (i = _ => {
        t.fillStyle = '#757eff'
        t.fillRect(0, 0, w, h)
        t.fillStyle = '#66ff82'
        t.fillRect(0, 0, 2 * w / 3, h)
        t.fillStyle = '#ff8585'
        t.fillRect(0, 0, w / 3, h)
    })()

    t.font = '30px sans-serif'
    t.fillStyle = 'black';
    $ = 'Click to Start'
    t.fillText($, w / 2 - t.measureText($).width / 2, h / 2)
    t.font = '90px sans-serif'

    z = _ => {
        if (++n > (+localStorage.b || 0)) localStorage.b = n
    }

    c.onclick = _ => {
        if (v++) return
        setInterval(_ => {
            k.push(new a)
            z()
        }, 1000);

        (p = _ => {
            if (f) return
            i()
            t.fillStyle = 'black';
            t.fillText(n, w / 2 - t.measureText('' + n).width / 2, h / 2)
            g = [ 15, g + 1 / 400 ][ +(g < 15) ]
            k.map(e => {
                if (e.y > h) delete e
                t.fillStyle = e.c
                t.fillRect(0, e.y, w, 10)
                e.y += g;
                if (e.y + 10 > m && e.y < m + s && e.c != q)
                    alert(`Game Over! Your score was ${ n }. ${ n == +localStorage.b ? 'New high score!' : ('Your high score is ' + localStorage.b) }`) + f++ + location.reload()
            })
            t.fillStyle = q
            t.fillRect(w / 2 - s / 2, m, s, s)
            requestAnimationFrame(p)
        })()
    }
</script>