Processing 2048 game

2015-10-14 2048 game

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.13/processing.min.js"></script>
<canvas></canvas>

CSS

</style> <script type="text/javascript"> window.addEventListener('load', function() {
    var scripts=document.body.getElementsByTagName('script');
    var canvases=document.body.getElementsByTagName('canvas');
    new Processing(canvases[0], scripts[0].text);
}
, false);
 // Here prevent javascript in body from throwing error </script> <style>

JavaScript

/*
 sqqddqdztitle: 2048 Game
 date: 2015-10-14
 */

int[][] b = new int[4][4], pp[] = new int[4][4][3]; //size(len,len) is better but js no support
int f = 4, pd = 20, bs = 100, len = pd * (f + 1) + bs * f, sc = 0, aS, aL = 10, dead = 1, w, h, bb = color(0), C = CENTER;
void setup() {
    size(800, 600);
    restart();
    textFont(createFont("Helvetica", 42));
    noStroke();
}
void restart() {
    b = new int[4][4];
    spawn();
    dead = sc = 0;
    w = width;
    h = height;
}
void spawn() {
    ArrayList < Integer > xs = new ArrayList < Integer > (), ys = new ArrayList < Integer > ();
    for (int j = 0; j < f; j++) for (int i = 0; i < f; i++) for (int k = 0; k < 1 && b[j][i] == 0; k++, xs.add(i), ys.add(j)) {}
    int r = (int) random(xs.size()), y = ys.get(r), x = xs.get(r), z = b[y][x] = random(-(pp[y][x][0] = -1)) < .9 ? 2 : 4;
}
void draw() {
    background(255);
    rectt(0, 0, w, h, 10, color(150));
    fill(200);
    float grs = 0, txv = 35;
    for (int j = 0; j < f; j++) for (int i = 0; i < f; i++) rect(pd + (pd + bs) * i, pd + (pd + bs) * j, bs, bs, 5);
    for (int j = 0; j < f; j++) for (int i = 0; i < b[j].length; i++) {
        float fC = frameCount, xt = pd + (pd + bs) * i, yt = pd + (pd + bs) * j, x = xt, y = yt, val = b[j][i], tm = (fC - aS) * 1.0 / aL;
        if (fC - aS < aL && pp[j][i][0] > 0) { //idea based off http://gabrielecirulli.github.io/2048/
            int py = pd + (pd + bs) * pp[j][i][1], px = pd + (pd + bs) * pp[j][i][2];
            x = (x - px) * tm + px;
            y = (y - py) * tm + py;
            if (pp[j][i][0] > 1) {
                val = pp[j][i][0];
                textt("" + pp[j][i][0], xt, yt + txv, bs, bs, bb, 40, C);
                rectt(xt, yt, bs, bs, 5, color(255 - (log(val) / log(2)) * 255 / 11, (log(val) / log(2)) * 255 / 11, 0));
            }
        }
        if (fC - aS > aL || pp[j][i][0] >= 0) {
            if (pp[j][i][0] >= 2) {
                float gr = abs(0.5 - tm) * 2;
                if...