An Infinite Forest

by Ondřej Žára

HTML

<!--
    @ = you
    size = 254 bytes
    terrain = random & infinite (reload for a new one)
    interaction = click black area to focus, use arrow keys
    author & contributors = @0ndras, @balazs_kutil, @aemkei, @jakubvrana
-->

<body id=b onkeyup=for(u=v=s="",n=589,p=31,c=event.which,c&&(c%2?u=c-38:v=c-39);n--;s+="".link(c))i=n%p-15,j=(n/p|0)-9,k=(i+x-u)/9+19*(j+y-v),c="abcde"[k*(k*p+S)&15]||"a",i|j||(c=="a"||Q,c="z");x-=u,y-=v,innerHTML=s onload=S=Date.now(x=y=0);b.onkeyup(b)>

CSS

html {
    background-color: #000;
}

body {
    font-family: monospace;
    font-size: 200%;
    word-wrap: break-word;
    width: 31.5ch;
    margin: auto;
    background-color: #efa;
    border-radius: 10px;
    box-shadow: inset 0 0 10px 3px #000;
}

a {
    color: #090;
    text-decoration: none;
    cursor: default;
}

a[href=a]::after { content: "."; color: #ca8; }
a[href=b]::after { content: "*"; color: #555; }
a[href=c]::after { content: "#"; color: #933; }
a[href=d]::after { content: "♣"; }
a[href=e]::after { content: "♠"; }
a[href=z]::after { content: "@"; color: #622; }

JavaScript

return;

/* Code explained: */

body.onkeyup = function() {
    for (
        u=v=s="",                     // movement offsets, string with map data
        n=589,                        // number of visible chars - 31*19
        p=31,                         // useful prime constant
        c=event.which,                // pressed key
        c && (c%2 ? u=c-38 : v=c-39); // convert key code to movement offset
        n--;                          // for loop condition
        s+="".link(c)                 // add generated HTML tag to string
    )
        i = n%p-15,                   // X viewport coord
        j = (n/p|0)-9,                // Y viewport coord
        k = (i+x-u)/9+19*(j+y-v),      // player's position in one number
        c = "abcde"[                  // template of available chars
            k*(k*p+S)&15              // trivial noise modulo 16
        ] || "a",                     // fallback char when out of range
        i|j ||                        // collision detection: if the player
            (c=="a" || Q,             //   does not stand on a dot, throw
            c="z");                   //   else force @ char
    x-=u,                             // adjust player's position
    y-=v,
    innerHTML=s                       // display map
}

body.onload = function() {
    S=Date.now(x=y=0),                // random seed, initialize player position
    b.onkeyup(b)                      // initial draw
}