Lunar/Martian Rover Tank battle

[combatking0]

I know it has been a while since I last worked on this one, but I have learned how to draw the tanks in PHP, and here's something I cooked up yesterday lunch time.

To start the game, open the index.htm file.
To operate the tank, type in any of the following commands in the bottom frame, and click send.
f,#; where # is an integer number representing the number of frames during you wish to apply forward power.
r,#; where # is an integer number representing the number of frames during you wish to rotate clockwise.
l,#; where # is an integer number representing the number of frames during you wish to rotate anti-clockwise.

You may type in multiple commands, such as f,50;l,45;f,100;r,270;f,150;
but each command must end with a ; symbol.

Since learning that I have 50 minutes instead of 30 for my lunch times, I might be able to finish this without having to buy my own computer parts.

BTW, the javascript code might not be pretty, but it's a work in progress.

[p01]

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.

[benny!]

@p01:

K++ ... stretching images. This is what I never think
about ? Really clever and cool results. Thanks a lot.
Very interesting to read.

[combatking0]

Intersting stuff, but I'll stick with the pre-rendered tanks for the time being.

I might issue the game as a download to be "installed" (just a zip file to be extracted to a certain location), and then all of the tank images are available on each host machine.

[p01]

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.

[combatking0]

There'll be more to it than that - there will be a plethora of tank options which affect the colouration and shape of the tank. All of these may need to be pre-rendered.

The canvas tag looks interesting, but if it isn't supported by MSIE yet, then that's at least 50% of my audience out of the picture already.

CSS sprites look cool. I'll give that a try. I won't need zooming, but the CST looks good as well.

A strip of 44px by 15840px might take up less disk space than a collection of 360 44px by 44px images, but it may be slower for the browser to render. I'll experiment to find out which method will be most efficient.

[p01]

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.

[benny!]

....
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 ?

As I said before - I never heard about canvas before.
But this sounds like a logical improvement to web
development which is past-due.

Besides, I still do not understand why techniques like
SVG / VRML are not wider supported ?

[Shockwave]

Intersting stuff, but I'll stick with the pre-rendered tanks for the time being.

I might issue the game as a download to be "installed" (just a zip file to be extracted to a certain location), and then all of the tank images are available on each host machine.

Luddite

You should calculate tanks real-time, p01 gave you a nice link to show that you can draw the lines quick enough and 2D rotation is a very simple formula, I can't think of any good reason at all why you wouldn't use it.

Good luck with the game anyway

[p01]

....
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.

[combatking0]

I see what you mean about the use of resources, especially where using a pre-rendered gif is concerned.

The canvas tag intrigues me somewhat. I'm not going to use it in this game until I know what I'm doing with it though. If I can get it to draw filled polygons, customised tanks should be possible.

I'll put a cheeky message in asking users of non-compliant browsers to install the latest version of FF or Safari

[p01]

or Opera 

You want filled triangles, here it comes.

HTML

Code: [Select]

<!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]

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

[p01]

*bump*

[combatking0]

Sorry for my late reply. I've been off work this week, and I'm using a relative's connection.

I'll download the tutorials and your examples. The new parts for my PC will arrive later this week, so development should speed up soon.

[combatking0]

I have tested the canvas tag, and I must say I'm quite impressed.

It's just a shame it runs very slowly when the canvas is 640 by 512 pixels though, so I'm using individual canvases for each sprite, and moving them with DIVs.

I have created a "demo" of sorts which draws a tank at various angles. It works only in a canvas complient browser, so users of MSIE will be unable to see it.

[p01]

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

[combatking0]

Nice to hear.

set the Canvas in display:block; and position:absolute;

Are these style properties? I'll give them a try. I'll also see how much further I can hybridise the canvas / CSS system.

[p01]

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.

[combatking0]

I'll have to read up on toDataURL(), but that sounds useful also.

I have set up an incomplete demonstration of the game at http://barcodebattler.co.uk/mars_tank/
the commands are the same as before, eg

f,100;l,68;f,278;r,35;f,105; etc

Just hit the Submit button (no logon details are required yet). Both tanks will recieve the same commands, but will use them independantly.

I hope to cut the command typing time down from 60 to 30 seconds, with a 5 second delay from posting to receiving commands from the database.