Dark Bit Factory & Gravity
GENERAL => Projects => Topic started by: combatking0 on March 27, 2007
-
Another project I'll start (but probably not finish) is an online version of the tank portion of Atari Combat on the 2600.
Players get to build a tank, and then program it every 20 seconds during a battle.
It will be turn based, but it's going to be great!
-
What are you going to write this in CK? I remember the original, it was good fun :)
-
And, try to keep it simple but try to finish your project. There is a vast difference
between starting a project and finishing it ( I guess you know ). But finishing a
project is really satisfying ... so I would keep the outline of the game in the be-
ginning as small as possible so that it gets easier to achieve that ...
Anyway, good luck with it ...
-
It will be a mix of PHP, MYSQL and JavaScript.
Getting the JavaScript to work exactly the same on different platforms (as it calculates the velocity/position of everything on each user's machine independantly, so a difference of 0.000001 could mean the difference between a collision being detected or not on one machine, and not on another during the same battle) is going to be the most tricky problem.
I could assign one client as the master, which would send the results of all of the calculations to the server, which then pushes them out to the other clients.
The gameplay will revolve around sending a series of commands to the tank, for example
f10;r+45;s1;
could mean
Foreward for ten seconds; Rotate 45 degrees clockwise; Shoot weapon one;
besides the basic battles, there could be flag capture, tank football, etc, but I'll get the basic game working first.
-
I never played the original but it sounds like a good idea, as Benny said keep it simple, at least at fires so it gets done. I know the feeling of having many unfinished projects :)
-
@combatking0:
Didn't know the original game either. Nevertheless, it sounds very interesting.
About the JavaScript part working the same on different platforms I am a bit
confused. Don't have any information that there exists differences. Do you
have any certain information about this ?
Nevertheless, I am of course willing to help / test the scripts on my platform
for testing reasons.
Keep us informed how the game evolves ...
-
Sounds Nice!
Good luck with it all. If you need testing, you know where the crew are to do it for you!!! hahaha.
-
@benny
Unfortunately different browsers handle JS slightly differently.
I'd like to see how different the results would be for users of Windows:MSIE, Windows:FireFox, Mac:MSIE and Mac:Safari
I'll try to avoid mobile platforms, as the game will require a "large" minimum screen resolution of at least 640 by 512 pixles.
-
The following will test the tank game movement system.
Please may users of non Windows XP with MSIE 6 test this on their browsers and see what happens.
Simply unzip it, open the index.htm file, and click on the tank.
I have the facilities to test it under WinXP+MSIE 6, WinXP+MSIE 7, WinXP+FireFox, MacOSX+Safari and MacOSX+MSIE (not sure of the version on the Mac browsers).
Please reply with any error messages you get.
[edit]
I have added the first of the command features to the game - I'll post the new version shortly
[/edit]
-
Sorry. I am with XP, too ... cant help here!
-
Tests complete:
WinXP+MSIE6 - working
WinXP+FireFox - working
MacOSX10.4+Safari - working
Tests not performed:
WinXP+MSIE7
Any other combination of OS and browser version not listed above
It turns out that MSIE is no longer available for Mac OS, so I won't be supporting it.
-
Works on win 2000 with
firefox 2.0.0.3
opera 9.02
and internet explorer 9.0.2600.0000IS
-
Thanks for testing everyone.
I have made a few changes, and now it supports foreward movement and rotation.
To make the tank move, type f followed by the number of seconds you want it to move.
To make it rotate, type r followed by the number of degrees you want it to rotate by (limited to between -180 and 180).
You may type in multiple commands if you seperate them with a ; symbol.
DO NOT USE SPACES as JavaScript appears to lack the trim command, so I'll work that one out when it comes to using PHP with it.
example:
r-20;f3;r50;f2
All other commands will be ignored. All commands are case sensitive, so F5 won't work, but f5 will.
Once you have typed in your commands, click on the Transmit button.
Transmission will be automatic in the final version - you'll see a countdown instead of this.
I have a feeling tha tanks will be smaller too.
-
I have just tested the new version on Safari, and there's a minor display problem.
Other than that, it's still OK.
-
That sounds good, CombatKing0.
I think I got the idea now of this game - I am really looking forward to see it
in action and to play it live versus some other player via the internet !!!
-
That we will be able to play against each other makes this cool.
It works well here btw.. Only suggestion I'd make is that I don't really like the clunky rotations of the sprite. a 2D vector would be much better, the forumla is easy.
XR = COS (THETA) * X1 - SIN (THETA) * Y1
YR = COS (THETA) * Y1 + SIN (THETA) * X1
-
@SW:
Hmm ... drawing lines with JavaScript is not that easy IMHO. At least it is
not supported natively in JS. Hmm ... SVG or the following libs would come
to my mind :
http://www.c-point.com/javascript_vector_draw.htm (http://www.c-point.com/javascript_vector_draw.htm)
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm (http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm)
-
PHP supports drawing lines and other stuff, so in theory, I could run a load of images of tanks off (180 of them all facing different directions) using a PHP batch process.
Because the results will be GIFs, the total of up to 1440 images between 8 players shouldn't take too long to preload.
The images in use currently have been drawn in a graphic editor program.
I'll have to find a more reliable host for it first, but I could run the test versions from right here at work.
-
Cool. The tanks would look much better smoothly rotating, it will fit in perfectly with the smooth movement of the tanks.
-
I have had a go, but the first tank drawn is visible under the second tank, and the first two under the third, etc.
I'll have to find a way to blank the image each time a new tank is drawn.
-
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.
-
benny & al: Drawing lines in JavaScript is fast and easy (http://www.p01.org/articles/DHTML_techniques/Drawing_lines_in_JavaScript/). 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.
-
@p01:
K++ ... stretching images. This is what I never think
about ? Really clever and cool results. Thanks a lot.
Very interesting to read.
-
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.
-
combatking0: ??? a ZIP file for that ? Now, that's over-engineering for you.
No really, just go Canvas tag (http://developer.mozilla.org/en/docs/Canvas_tutorial), or use CSS sprites (http://www.alistapart.com/articles/sprites) or if you need zooming the good old ( but unequalled ) Canvas sprite technique (http://www.3dtomb2.com/technical_infos.php#sprites_rendering_and_animation).
-
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.
-
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.
-
....
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 ?
-
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 :)
-
....
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.
-
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 :)
-
or Opera ;)
You want filled triangles, here it comes.
HTML<!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)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
-
*bump*
-
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.
-
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.
-
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
-
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.
-
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 (http://www.alistapart.com/articles/sprites) ( positionned background images ) to display them.
-
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.