Messages

Neat.
Would be fun to see the cubes squash a bit when they hit the ground.

[edit] :p just saw that Hellfire suggested that too [/edit]

Shockwave: correct :p

However I just ran the code through a de-obfuscater and it's "ok", and not so long that it should remain manageable if you are a bit curious. I also added a couple of comments:

Code Select Expand

// main
function N()
{
    t++;
    C = '#000';
    //    if player still alive, move it if need be
    if (h = p.h)
    {
        p.A += (K[39] - K[37]) * P / 96 + P * 2;
        while (p.A > P)
        {
            p.A -= P * 2;
        }
        p.U(K[38] - K[40], K[67] - K[88])
    }
    p.t += I =- 1;
    U[32] &= m * p.t * p.h < 0;
    z = p.h ? P / 3 : P / (3 + Math.cos(t / 5) / 3);
    A = p.A - z / 2;
    n = p.x - p.c * 64;
    o = p.y - p.s * 64;
    a = 4 * 64 * 64 * Math.tan(z / 2);
    //    do the floor casting
    for (Z = x = 0; x < 50; x++)
    {
        r = a / Math.cos(A - p.A);
        u = Math.cos(A) * r;
        s = Math.sin(A) * r;
        A += z / 50;
        i = 130;
        d = (c = x * 52) + 52;
        do
        {
            d--;
            v = n + u / i;
            w = o + s / i;
            k = q[(w >> 3 & 56) + (v >> 6)];
            if (k >> 8 || (v | w) &- 512)
            {
                break;
            }
            if (H[d].style.backgroundColor != Q[b = T[k + (v & 56) + (w >> 3 & 7)]])
            {
                H[d].style.backgroundColor = Q[b], H[c].style.backgroundColor = Q[b + 1];
            }
            c++
        }
        while (i -= 5);
        with (W[x].style)
        {
            left =- ((v^w) & 56) - (v & w & 64);
            top = W[x].t = 130 - i;
            W[x].parentNode.style.zIndex = height = i * 2
        }
        if (x == 25)
        {
            Z = i;
        }
    }
    //    process the entities
    for (j = 0; j < 6 + L / 2; j++)
    {
        X = E[j].x - n;
        Y = E[j].y - o;
        A = Math.atan2(Y, X) - p.A + P * 2;
        while (A > P)
        {
            A -= P * 2;
        }
        i = Math.round(Math.sqrt(a / Math.cos(A) * a / Math.cos(A) / (E[j].d = d = X * X + Y * Y)));
        i *= i < 130;
        A *= 400 / z;
        //    close to the player then point towards it
        if (d < 16 * 64 * 64 && p.h)
        {
            E[j].A = p.A;
        }
        E[j].A += (((Math.random() * 3) & 3) - 1) * P / 8;
        with (W[j + 51].parentNode.style)
        {
            left = 200 + A - i;
            top = 130 - i;
            width = zIndex = height = i * 2
        }
        //    living entity ->
        if (E[j].h)
        {
            x = Math.round(25 + A / 8);
            if (--E[j].t < L * 2 && W[x] && 130 - i < W[x].t)
            {
                E[j].t = 48, C = '#600', p.h -= p.h > 0;
            }
            W[j + 51].style.left =- (E[j].k + ((j * 4 + E[j].t) & 4 ? 1 : 0)) + '00%';
            E[j].U(-2, 0);
            if (U[32] && (Math.abs(A) | Z) < i && (I < 0 || E[I].d > d))
            {
                I = j;
            }
        }
        //    pick up entity if it's close
        else if (d < 64 * 64)
        {
            $ += (E[j].k - 1 ? 1 : 10), E[j].k ? m += 5 : p.h += 2, E[j].x =- d;
        }
    }
    //    firing
    if (I + 1 && !--E[I].h)
    {
        W[I + 51].style.left = '-200%', $ += E[I].k - 3 ? 10 : 5;
    }
    //    hud
    W[50].style.left = p.h ?- 112 * U[32] :- 224;
    m -= U[32];
    p.t += U[32] * 8;
    U[32] = 0;
    B.style.backgroundColor = C;
    S.innerHTML = p.h + '<br>' + m + '<br>' + L + '<br>' + $;
    //    oh noes! you just died
    if (!p.h & h)
    {
        M.src = $ + '<br>' + (prompt('your name ?', ''));
    }
    //    bottom right of the map -> next level
    if (p.x > 464 && p.y > 384)
    {
        l();
    }
}
//    Entity class
function O(v, w, h)
{
    i = q[(v >> 6) + (w >> 3 & 56)] >> 8;
    W[j + 51].style.left =- h + '00%';
    this.x = v;
    this.y = w;
    this.A = 0;
    this.k = h;
    this.t = this.h = h > 1 ? h : 0;
    //    move() method
    this.U = function (X, Y)
    {
        this.c = v = Math.cos(this.A);
        this.s = w = Math.sin(this.A);
        e = (v * X - w * Y) * this.k / 3;
        u = (w * X + v * Y) * this.k / 3;
        v = this.x + e;
        w = this.y;
        if (q[(w >> 3 & 56) + (v >> 6)] >> 8)
        {
            v -= e;
        }
        w += u;
        if (q[(w >> 3 & 56) + (v >> 6)] >> 8)
        {
            w -= u;
        }
        this.x = v;
        this.y = w;
    }
}
//    initLevel()
function l()
{
    Q = '#10,#21,#32,#43,#54,#b9,#ca,#db'.split(',');
    for (i = 0; i < 3 * 64; U[i] = K[i++] = 0)
    {
        Q[i] += (i + L % 3) >> 1;
        T[i] =+ '000000000000000000000000000000000000000000000000000000000000000000000000001111000122221001222210012222100122221000111100000000000000000000000000005555000005500000000000055555500055550000055000'.charAt(i) + eval('(i' + '^+|-*&%/'.charAt(L & 7) + '(i>>3))/4&1');
        q[i] = ((b = '5555555520000005500000055000000550000005500000055000000255555555'.charAt(i)) > 1 ? b : Math.random() * 9 > 5 ? Math.random() * 9 > 5 : 9) * 64
    }
    i = 54;
    while (i > 1)
    {
        q[i] = (n = Math.random() * 9 > 5) * 64, i -= (i & 7) - 1 ? (i >> 3) - 1 ? 1 + 7 * n : 1 : 8;
    }
    m = 50;
    L++;
    for (j = 0; j < 6 + L / 2; j += i < 1)
    {
        p = new O(32, 96, 10), E[j] = new O(Math.random() * 512, Math.random() * 512, j < 2 + L  / 6 ? (j < L  / 9 - .5 ? 1 : 0) : (j < 1 + L  / 2 ? 5 : 3));
    }
    p.k = 3;
    N();
    alert('START LEVEL ' + L)
}
// global stuff
H = [];
W = [];
K = [];
U = [];
q = [];
E = [];
T = [];
P = Math.PI;
//    create the markup for the rendering area, the entities & player
for (t = $ = i = j = L = p = m = Q = x = 0; x < 50; x++)
{
    with ((d = document.createElement('div')).style)
    {
        width = 8;
        height = 260;
        left = x * 8
    }
    y = 0;
    while (y < 260)
    {
        with ((H[i] = document.createElement('div')).style)
        {
            width = 8;
            height = 5;
            top = y
        }
        d.appendChild(H[i++]);
        y += 5
    }
    (W[j] = document.createElement('img')).src = 1;
    with (W[j].style)
    {
        width = 128
    }
    d.appendChild(W[j]);
    R.appendChild(d);
    j += 50;
    with ((d = document.createElement('div')).style)
    {
        width = 112;
        height = 143;
        top = 117;
        zIndex = 512;
        left = 143 + x * 512
    }
    (W[j] = document.createElement('img')).src = x ? 0 : 2;
    with (W[j].style)
    {
        width = (x ? 7 : 3) + '00%';
        height = '100%'
    }
    d.appendChild(W[j]);
    R.appendChild(d);
    j -= 49
}
//    init the first level
l();
//    let the be light
setInterval(N, 9)Have fun.

FWIW they're called relative URLs/paths/links, not relational :p

Although w3schools may be nice to begin with, but it's really not up to date and contains some errors.  e.g. on the very page Benny linked to, they omit the required attribute alt in the IMG tags.

This may be a little hardcore at first, but checking the DTD and specificationre/commandation is definitely the best way to go to learn which tag and attribute goes where and to know the purpose of the tags and attributes. Get these and you're all set.

[bar]

You could also look at Mandelbrot Rotozoom, a 256b intro I wrote in JavaScript, which does what it says on the tin.

The code is small, but not too small to be completely unreadable, and all the JavaScript you need to know is that setInterval(foo,delay) is a loop, bar.innerHTML=baz simply dumps the "image" in the element bar in the page, and the < br > is like a \n\r in text mode.

Code Select Expand



<pre id=B><script>setInterval("for(d='p01‡*Ãâ€":,~.    ',C=Math.cos(n-=88),S=Math.sin(n),Y=m=1+C,z=2048;z;Y-=m/16)for(d+='<br>',X=m;--z&63;X-=m/32,d+=d.charAt(k))for(r=i=k=0;++k+r*r+i*i<13;i=t)t=2*r*i-X*C+Y*S,r=r*r-i*i-X*S-Y*C+C-1;B.innerHTML=d",n=9)</script>



HTH

Being a standards-nazi, I would advice against DreamWeaver.

In my book it's like those MicroSoft certifications. Any one can do it, so there's no added value. No offence intended.

I know DreamWeaver can produce okay code, but it doesn't encourage/enforce it.


If you want to go into web design/development, I encourage you to learn the real deal : (x)THML and CSS. It's not difficult. One very efficient way to get started on the right track is to :

Take a couple of days, download the specs/recommandations, and make a few pages web site as best as you can by looking up to the specs every time your are unsure about something, anything. It's a tedious process but it pays off. A lot!


If you're interested I could point you to the specs you need and some web sites listing best practices.

HTH

30 and a few days now.

No life changing revelation so far.

Make sure your object is centered around its own origin when you rotate it.

In your case, it is NOT since you add centerX and centerY during the initialization of the lineN.xM and lineN.yM variables. Remove these additions and voila.

The centerX and centerY variables are just an offset for where/when you want to draw on screen. They have nothing to do the calculations themselves.

Thanks a lot mates !!!

Yes. It's CSS properties.

Basically, what I'm suggesting is to precalculate the rotations of the various parts making the tanks/vehicles into a PNG image thanks to the toDataURL() method of Canvas, then use CSS sprites ( positionned background images ) to display them.

Nice to hear.

Btw, you don't need to wrap the Canvases in a DIV. Keep your DOM tree clean and set the Canvas in display:block; and position:absolute;

Another thing you could do, is use CSS sprites generated with Canvas. This way you have the flexibility and low file size cost of Canvas + the speed of CSS.


HTH

Also the shading looks strange on the sphere. I think it'd look better in 2D, as it is in Yoomp.

side note, I've considered to port Yoomp to JavaScript. But I should probably work on something original.

s/ranking/Ã,µ

:p

ranking Ã,µ = ( number of thumbs up - number of thumbs down ) / ( number of thumbs up + number of thumbs down + number of piggy votes )

*bump*

or Opera 

You want filled triangles, here it comes.

HTML

Code Select Expand

<!doctype html>
<html>
<head>
    <script type='text/javascript' src='myScript.js'></script>
</head>
<body>
    <canvas id='myCanvas' width='320' height='240'>If you can see this, your browser suck</canvas>
</body>
</html>

JS (myScript.js)

Code Select Expand

window.addEventListener
(
    'load',
    function()
    {
        var canvas = document.getElementById( 'myCanvas' ),
            context = canvas.getContext( '2d' );

        context.clearRect( 0, 0, canvas.width, canvas.height );
        context.fillStyle = 'pink'; // could be "#fcc" or "#ffcccc" or "rgb(255,192,192)" or "argb(1,255,192,192)"

        context.beginPath();

        context.moveTo( Math.random()*canvas.width, Math.random()*canvas.height );
        context.lineTo( Math.random()*canvas.width, Math.random()*canvas.height );
        context.lineTo( Math.random()*canvas.width, Math.random()*canvas.height );

        context.closePath();

        context.fill();

    },
    false
);



HTH

....
I see and understand your 50% of audience point,
but if this means borking your code to no end. Nay.
You're doing this for fun aren't you ? so why spoilling
it by wasting your time and people's resource by
supporting an obsolote browser ?
...

I totally agree what you say. But looking for some
other field of interest - what do you think - will the
canvas technique be supported by other browsers
esp. IE in future ?

ALL major browsers ( Opera, Gecko based browsers, WebKit based browsers ) except IE already support Canvas. It's now part of HTML 5, a spec. in progress, so any browser who want to support the web tomorow will have to implement Canvas.

As for SVG and VRML, well the specs are huge and complex. Implementation is tricky and the fact that IE never supported it natively didn't help. Adobe kinda nailed SVG when they stopped supporting the SVG plugin. Why should they support an open format when they have a proprietary technology they make money with : Flash. But SVG is "big" on mobile phones.

Surely you don't need 360 images for the rotations. 64, or 128 should be enough.


You could exCanvas, the Canvas-VML wrapper.

Canvas would make things a LOT easier since you would not need to precalculate the rotations, and you could composite and possibly recolour the sprites in real time. No problem.


I see and understand your 50% of audience point, but if this means borking your code to no end. Nay. You're doing this for fun aren't you ? so why spoilling it by wasting your time and people's resource by supporting an obsolote browser ?


Really, give Canvas and exCanvas a try. From what I understand of your use case, it's the best approach I can think of.

Thanks. It's cool to such feedback, esp. from some crazy optimizers.

[combatking0:]

combatking0:  a ZIP file for that ? Now, that's over-engineering for you.

No really, just go Canvas tag, or use CSS sprites or if you need zooming the good old ( but unequalled ) Canvas sprite technique.

[benny & al]

benny & al: Drawing lines in JavaScript is fast and easy. Trust me

Also I have NEVER heard of significant difference WRT to Numbers in JavaScript. The EcmaScript 3 spec says they should should be handled in Double ( 64 bits IEEE floating point numbers ). The only platform I can imagine this is not be the case in practice in the Nintendo DS, but I seriously doubt having Floats ( 32bits ) instead Doubles would break anything. At worst, upscale the values to avoid any precision problem. Problem solved.