index.full.html

<script>
/*
        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 $ _
upper | * *   * * *   *     * * * * * * *       * * * * * * * *
lower | * * *   * *   * * * * *       *   * *   * * * * * *
*/

// scale and cell size = 8x8
// i,j,x,y - counters

W = 80, H = 48, // field-size [width x height]
w = 79, h = 47, // limit offset of field-size (W - 1 and H - 1)

_ = [], // px-cache ["x,y" => [R,G,B], .., ..],

X = Y = // users coords [X,Y]
V = // users view vector: 0,1,2,3 - left,up,right,down
M = // bool "user now moves"
U = // prev (U) and current (u) user px.data
T = // total-profit
P = // curr-profit (sum of free-square)
p = // %-profit
D = // lifes
$ = // canvas 2D-context (and bool "game is run")

// enemies
// E = [e1, e2, .., eN]
// e = {x: x-coord, y: y-coord, v: view-vector}
// v: 0-up+right, 1-bot+right, 2-bot+left, 3-up+left
E =

0,

// colors rgb(R,G,B)
B = "0,0,0",     // background
F = "0,168,168", // free
K = "168,0,168", // track
N = "168,0,0"    // enemy
;

onkeyup = function(e){
    // new view, 37(left) -> 0, 38(up) -> 1, 39(right) -> 2, 40(down) -> 3
    V = e.which % 37 % 4;

    if (
        // user doesn't move ..
        !M &&
        // .. but can go
        (
                !V && X     || // tries move to left (V = 0) AND can do it (X > 0)
            V == 1 && Y     || // tries move to up           AND can do it (Y > 0)
            V == 2 && X < w || // tries move to right        AND can do it
            V >  2 && Y < h    // tries move to down (V = 3) AND can do it
        )
    ) {
        M++;
    }

    if (!$) {
        $ = z.getContext("2d");
        $.font = "20px TrueType";
        init(2);
        D = 3;
        setTimeout(step, 50);
    }
}

function initUser(){
    X = Y = 1;
    U = $.getImageData(8, 8, 8, 8); // X*8, Y*8
}

function init(e){
    // mian border + background
    rgb(F);
    $.fillRect(0, 0, 640, 384); // W*8 = 640, H*8 = 384
    rgb(B);
    $.fillRect(
        16,  // 2*8
        16,  // 2*8
        608, // (W - (2+2))*8
        352  // (H - (2+2))*8
    );

    initUser();

    // cache
    for (x = W; x--;) {
        for (y = H; y--;) {
            // W - 2 = 78, H - 2 = 46
            _[[x,y]] = x > 1 && x < 78 && y > 1 && y < 46 ? B : F;
        }
    }

    // enemies
    for (E = [], i = e; i--;) {
        E.push({x: 3+rnd(70), y: 3+rnd(40), v: rnd(3)});
    };
}

function boom(){
    if (!--D) {
        return alert("Game over!");
    }

    // remove user and track
    M--;
    L(X, Y, B);
    for (y = 2; y < 46; y++) { // H - 2 = 46
        for (x = 2; x < 78; x++) { // W - 2 = 78
            _[[x,y]] == K && L(x, y, B);
        }
    }
    initUser();

    setTimeout(step, 900);
}

// random from 0 to max
function rnd(max){
    return ~~(Math.random() * ++max);
}

function step(){
    // enemies move
    for (i = E.length; i--;) {
        e = E[i];

        /**
         *  .---.---.---.
         *  | 7 | 0 | 1 |
         *  .---.---.---.
         *  | 6 | U | 2 |
         *  .---.---.---.
         *  | 5 | 4 | 3 |
         *  .---.---.---.
         */
        x = e.x, y = e.y, v = e.v % 4;
        Z = [
            y              ? [    x, y - 1] : 0, // 0: up
            x < w && y     ? [x + 1, y - 1] : 0, // 1: up+right
            x < w          ? [x + 1,     y] : 0, // 2: right
            x < w && y < h ? [x + 1, y + 1] : 0, // 3: bot+right
            y < h          ? [    x, y + 1] : 0, // 4: bot
            x     && y < h ? [x - 1, y + 1] : 0, // 5: bot+left
            x              ? [x - 1,     y] : 0, // 6: left
            x     && y     ? [x - 1, y - 1] : 0, // 7: up+left
        ];

        /**
         *      v = 0           v = 1           v = 2           v = 3
         *  .---.---.---v   .---.---.---.   .---.---.---.   v---.---.---.
         *  |   | l | f |   |   |   |   |   |   |   |   |   | f | r |   |
         *  .---.---.---.   .---.---.---.   .---.---.---.   .---.---.---.
         *  |   | U | r |   |   | U | l |   | r | U |   |   | l | U |   |
         *  .---.---.---.   .---.---.---.   .---.---.---.   .---.---.---.
         *  |   |   |   |   |   | r | f |   | f | l |   |   |   |   |   |
         *  .---.---.---.   .---.---.---v   v---.---.---.   .---.---.---.
         *   l=0,f=1,r=2     l=2,f=3,r=4     l=4,f=5,r=6     l=6,f=7,r=0
         *
         *  l(left)=v*2, f(front)=v*2+1, r(right)=v*2+2
         */
        k = v*2, l = Z[k++], f = Z[k++], r = Z[k % 8];

        if (_[l] == K || _[f] == K || _[r] == K) {
            return boom();
        }

        l = _[l] != B, f = _[f] != B, r = _[r] != B;

        /**
         * change view
         * (. - black, # - wall, v = 0)
         *
         *  .12
         *  .U3
         *  ...
         *
         * 1 = l(left), 2 = f(front), 3 = r(right)
         *
         *    lfr
         *    123
         *  1|000 +0  I  II III
         *  2|001 +3: +1    +2
         *  3|010 +2: +1 +1
         *  4|011 +3: +1    +2
         *  5|100 +1: +1
         *  6|101 +2: +1 +1
         *  7|110 +1: +1
         *  8|111 +2: +1 +1
         *
         *   1    2    3    4    5    6    7    8
         *  ...  ...  ..#  ..#  .#.  .#.  .##  .##
         *  .U.  .U#  .U.  .U#  .U.  .U#  .U.  .U#
         *  ...  ...  ...  ...  ...  ...  ...  ...
         */
        // 2-8:
        if (l || f || r) {
            e.v =
                v
                + 1             //   I: 2-8
                + (f && l == r) //  II: 3,6,8
                + 2*(r && !l);  // III: 2,4
        // 1: else move
        } else {
            L(x, y, B);

            e.x += v < 2 ? 1 : -1; // "v < 2" eq.: "v == 0 || v == 1"
            e.y += v % 3 ? 1 : -1; // "v % 3" eq.: "v == 1 || v == 2" (0,1,2,3 % 3 => 0,1,2,0)

            L(e.x, e.y, N);
        }
    }

    // user move
    if (M) {
        // clear current user-position
        $.putImageData(U, X*8, Y*8);
        // draw track over background
        Q(U, B) && L(X, Y, K);

            !V &&     X && X--; // V = 0 AND X > 0     THEN move left
        V == 1 &&     Y && Y--; // V = 1 AND Y > 0     THEN move up
        V == 2 && X < w && X++; // V = 2 AND X < W - 1 THEN move right
        V >  2 && Y < h && Y++; // V = 3 AND Y < H - 1 THEN move down

        // get data of new user-position
        u = $.getImageData(X*8, Y*8, 8, 8);
        // move to track? - boom!
        if (Q(u, K)) {
            return boom();
        }

        // closed track? - fill new free area
        if (Q(U, B) && Q(u, F)) {
            fill(M--);
        }
        U = u;
    }

    // info panel
    rgb(B);
    $.fillRect(0, 384, 640, 16); // H*8 = 384, W*8 = 640, 2*8

    // user
    L(X, Y, "168,168,168"); // + call rgb(gray)

    $.fillText("Score: "+(T + P), 0, 399); // H*8+15 = 399
    $.fillText("Xn: "+D, 224, 399); // H*8+15 = 399
    p = 100*P/3344; // 3344 = (width - (2+2)) * (height - (2+2)); 2 - width (height) of init border
    $.fillText("Full: "+~~p+"%", 322, 399); // H*8+15 = 399
    // win!
    if (p > 75) {
        T += P, P = 0;
        init(E.length + 1);
        setTimeout(step, 900);
        return;
    }

    setTimeout(step, 40);
}

/**
 * colors equal
 */
function Q(
    a, // color A = {data: [R,G,B]}
    b  // color B = "R,G,B"
){
    return (a = a.data) && ""+a[0]+","+a[1]+","+a[2] == b;
}

/**
 *  fill cell (8x8)
 */
function L(
    a, // x
    b, // y
    c  // color
){
    rgb(c);
    $.fillRect(a*8, b*8, 8, 8);
    _[[a,b]] = c;
}

function rgb(c){
    $.fillStyle = "rgb("+c+")";
}

function fill(){
    // A - areas to fill
    for (A = [], y = 2; y < 46; y++) { // H - 2 = 46
        for (x = 2; x < 78; x++) { // W - 2 = 78
            k = _[[x,y]];
            // track
            if (k == K) {
                L(x, y, F);
                P++;
            }
            // background
            if (k == B) {
                P += (s = recursiveFill(x, y, "1")); // "1" ~ rgb(1,1,1) - temporary color
                A.push([x, y, s]);
            }
        }
    }

    for (i = A.length; i--;) {
        j = A[i];
        recursiveFill(j[0], j[1], j[2] ? F : B);
    }
}

function recursiveFill(
    a, // x
    b, // y
    c  // color
){
    k = _[[a,b]], // replaceable color
    f = [a,b], // stack
    s = // square
    m = // bool "enemy found in area"
    0;

    while (b = f.pop()) {
        a = f.pop();
        r = _[[a,b]];
        // eq.: if(!m && e){m=true;}  ->  m = m || e;  ->  m ||= e;  ->  m += e;
        m += (e = r == N); // bool "enemy found in point"
        if (r == k || e) {
            L(a, b, c);
            s++;
            f.push(
                a-1, b, // left
                a, b-1, // up
                a+1, b, // right
                a, b+1  // down
            );
        }
    }

    return m ? 0 : s;
}
</script><body><canvas id=z width=640 height=400>