Topic awaiting preservation: May 2005 - 20 lines JavaScript contest - Asteroids

This month, the goal is to make an Asteroids game, or Asteroid-like game.

Small games are really fun and challenging to make so I hope you won't bother to make another one. Hopefully the gameplay of Asteroids is addictive.

quote:

---

A code monkey said once:
As usual, the main rule is to make your script in 20 lines of (effective) code.
Comas shouldn't be used to execute several instructions on the same line
See the code sample below to illustrate the basic rules :

code:

---

<script type="text/javascript">



/* .. */    document.body.onclick = function()

/* .. */    {

/* 01 */        val = prompt( 'enter a number' );

/* 02 */        for( i=0; i<10; i++ )

/* .. */        {

/* 03 */            alert( stupidFunction( val, i ) )

/* .. */        }

/* .. */    }



/* .. */    function stupidFunction( a, b )

/* .. */    {

/* 04 */        return a>b?a:b; // I said it was a stupid function

/* .. */    }



</script>

---

The document.body.onclick = function() does not count as a line as it's not some effective code and the function call could be put in the BODY tag ( or anyother HTML tag ).
The declaration of the stupidFunction() does not count either for the same reasons.
The coma in the line /* 03 */ is ok, since it simply separates the parameters of a function.

---

Lets' warp into hyperspace and blast those menacing asteroids and UFOs.



(Edited by poi on 05-03-2005 23:32)

Coolness, great topic, though a little tricky for a 20-liner. Especially the idea that I have.

I'll do what I can though and try to come up with something cool.

---
Website

Glad you like the topic ... and have an ambitious idea.
Don't worry if it takes few more lines.

I should definitely code something else, but I think I'll make an entry too. That's the good occasion to make and use a specialized version of my line drawing technique in JS. It gonna be hard to fit a vectorial game in 20 lines, but that's the kind of challenges and I do enjoy.

Vectors in 20 lines? No problem... but combined with asteroids gameplay, I'd say that's a challenge!

/TwoD

http://www.embege.com/asylum/starfield.html

[recylced]

Just to clarify, there's no obligation at all to do something vectorial. The theme is Asteroids. That's better if it takes the form of a game but that's pretty cool too if it "simply" takes the form of an animation. The more the better.

Note to self : before coding something new move you arse and make more levels to your previous entry. ... and work a bit on the things for which you have a firm deadline. Damn it! *sigh* that's the story of my whole coder's life.



(Edited by poi on 05-07-2005 16:20)

GRUMBLE: I get a problem with your script in IE6. window.innerHeight is undefined. Probably same with innerWidth but I didn't check that..

/TwoD

It's funny you should mention that TwoD, I've been working on a project with just that issue in IE. Does anyone know the alternative to innerWidth and innerHeight?

[quiclReply] Blaise: offsetWidth and offsetHeight should do the trick [/quickReply]

thanks for noting that.
ill fix it in the near future... hopefully the browser checker still fits into 20 lines.

I tried self.offsetWidth and window.offsetWidth and it doesn't seem to work for me poi, I'll take a look into it and let you know how I get along, unless you or Grumble get there first.

Cheers,

Al.

That's what I have in IE in 1280x1024 with a maximized browser window.

document.body.clientWidth = 1263
document.body.offsetWidth = 1280
document.body.scrollWidth = 1263

document.body.clientHeight = 858
document.body.offsetHeight = 862
document.body.scrollHeight = 1584 ( the page was long )

Hope that helps,

I settled with this in the end

if(self.innerWidth){

  x=self.innerWidth;

  y=self.innerHeight;

} else {

  x=document.documentElement.offsetWidth;

  y=document.documentElement.offsetHeight;

}

Thanks for the advice!

Cheers,

The DTD and resulting rendering mode can affect the function/behaviour of window width/height attributes.

Depending on the browser as well, it may be any of the following (width):

document.documentElement.clientWidth
document.body.clientWidth
document.body.scrollWidth
window.innerWidth

Well from what I read the innerWidth property is the width inside the chrome, so this doesn't include the scrollbars and border of the window etc. From my (small and hasty) testing clientWidth seemed to include the chrome where as documentElement,offsetWidth was the offsetWidth of the documentElement object which is either the body or the html tag right (both inside the chrome)?

I have a some thoughts about how we can improve the way these Javascript 20-liner topics are introduced... in such a way that we may actually see more entries.

For a start off, why don't you post some suggestions of the sorts of javascript things that YOU want to develop or see developed in 20 lines. Fun stuff, serious stuff, educating stuff. But stuff that interests you. Provide some descriptions giving ideas or variations that people might implement (or not). Assist those "creatively challenged" amongst us by providing some suggestions on what might be created or some links to resources that are inspirational.

What is wrong with setting a topic that can be achieved in 8 lines (say) and include some suggestions on "extras" that could add to the solution (and make it more useful/fun/etc) and would be a REAL challenge to those that enjoy serious obfuscation in their code?

See... I think that too many times we end up with a challenge that is percieved as either impossible or just doesn't hold any interest. If we work to write better challenges (that actually provide scope for many levels of programmers) then we will get more participants.

And I think more work should be done by the monthly judge to provide feedback to the entrants as well. A lot of time goes into the code - we owe it to the entrants to provide something a little more constructive than "... and the winner is..."

If I've stepped on any toes - bite me. Anyone with any thoughts on this, or am I the only one?

Jeff

BabyJeffy: Thank you for these inputs. They do make sense. Stepping on any toes is some times necessary.

I did not gave a lot of links to let the inmates free to choose which direction to choose. But they are probably too free and don't know what to do around the topic.

Do you think the current topic is of the impossible kind or of the no interest one ? don't worry I won't bite.

Anyway, here comes some infos and hints :

• First of all, you can treat the Asteroids theme as you want. Pick something of the original game ( it may be the asteroids themeselves, the graphic style, the gameplay, the concept of spliting the enemies/obstacles in 2 ... ) and make something of it. For instance an animation with some asteroids moving around would be really cool ( replace the white dots in GRUMBLE's script with some asteroids and you have a great entry matching the theme. ... Add a crosshair to shoot the asteroids like in a Duck Hunt game and the resulting entry rocks ), a vectorial animation ( no need to render everything in realtime, you can precompute the animations in PhotoShop and use a CSS sprites technique ).
  
  
• If you need to refresh your memory and see what was the gameplay, you can try a Java remake of Asteroids
  
  
• when I want to do something related to a game, I try to find some ports or screenshots on limited platforms such a GameBoy or older hardware. Search also for some other games sharing some ideas. It helps to see different ways to interpret and render the game. Ultimately it could even lead you to create a new variation on this famous theme.
  
  
• Design takes an important part. Your entry may not be technically stunning ( I don't ask you to code a physic engine including the gravity of the asteroids and what not ) but a nice design always help and gives a good impression. As I said above, the asteroids can be precomputed. That's the perfect place to put some nice sprites. A nice background cost nothing too.
  
  

I Hope that will help the inmates to see some possible variation on the Asteroids theme.

Oh and when the time has come I'll try to elaborate a bit on the entries to let everybody know what I liked and liked less in all the entries. ( if some inmates dare to submit an entry )



(Edited by poi on 05-15-2005 17:01)

http://www.rpi.edu/~laporj2/art/dynamic/javascript/asteroidstribute/index.html

Not 20 lines yet, and doesn't have all the features I wanted yet.

But it's a start!

Works in all browsers, but slow and flickery in Firefox. (Best viewed in MSIE or Opera)

[edit] Updated a bit more, code size reduced slightly too

---
Website

(Edited by Iron Wallaby on 05-16-2005 17:35)

(Edited by Iron Wallaby on 05-16-2005 20:37)

double post sorry.

(Edited by GRUMBLE on 05-16-2005 20:21)

now thats pretty awesome iron!

care to explain how you draw the polys? i only see a div tag there.

btw: i found a cool asteroids version here:
http://www.guimp.com/asteroids_flash.html

Certainly.

function poly (points, color) {

	var render = "";



	function interpolate (a, b, t) { return a + (b - a) * t; }



	if((points[1][0] - points[0][0]) * (points[2][1] - points[1][1]) - (points[1][1] - points[0][1]) * (points[2][0] - points[1][0]) > 0) {

		points.sort(function (a, b) { return a[1] - b[1]; });



		for(var i = points[0][1]; i < points[2][1]; ++i) {

			var	w = Math.round(interpolate(points[0][0], points[2][0], (i - points[0][1]) / (points[2][1] - points[0][1]))),

				x = Math.round((i < points[1][1])

					? interpolate(points[0][0], points[1][0], (i - points[0][1]) / (points[1][1] - points[0][1]))

					: interpolate(points[1][0], points[2][0], (i - points[1][1]) / (points[2][1] - points[1][1])));



			render += '<div class="polygon" style="left: ' + Math.min(w, x) + 'px; top: ' + i + 'px; width: ' + Math.abs(w - x) + 'px; background: ' + color + ';"></div>';

		}

	}



	return render;

}

Points is an array of arrays. The main array contains 3 small arrays (one for each vertex of the polygon), and each small array has two members (one for the x value, and one for the y). First, we define a rendering buffer (to hold all the div's we're going to create), and define an interpolation function (pretty straightforward).

The huge if statement is basically calculating a dot product of 2 vectors (the vector of point 0 to point 1, and point 0 to point 2). If the dot product is positive, then that means that the polygon is facing towards us and we will render it. If it's negative, then it is facing away from us and therefore is not filled.

So, if the polygon is facing towards us, we then sort the incoming vertices by y value. This is so we can iterate through each row vertically (it's a technique known as scan-converting).

Now, if you look at a triangle, there are 3 segments - a long one stretching from the topmost vertice to the bottommost vertice, and two more connecting the topmost with the central, and the central to the bottommost. W holds the x-value of the long edge at height y (using linear interpolation), and X holds the x-value of the short edge we are currently on (this is found easily, since we know the current y-value and the y-value of the centerpoint). We don't know which is on the left, and which is on the right, however! It could be either. So, to find the left, we simply take the min of the two; and to find the width of the segment, we take the distance between the two. We render a single div for each row of the polygon, and voila!

A tutorial: http://freespace.virgin.net/hugo.elias/graphics/x_polysc.htm

---
Website

Iron Wallaby: Insane entry.

It seems you're quite into OO code since the last few weeks.
I prefered when the space craft was spinned around several axes
With few more lines you could simulate a double buffering using 2 DIVs. One that is displayed, the other to render the next frame and when it's done you swap the 2 DIVs.

I don't know if it's made on purpose, but the colors makes me to the really cool StarFox on N64

GRUMBLE: Check the for( var i = points[ 0 ][ 1 ]; i < points[ 2 ][ 1 ]; ++i ) loop. Iron goes from the top most vertex of the triangle to the bottom most one. And linearly interpolates the X coordinates between these two vertices, and between the 2 pairs of vertices ( top most -> middle, then middle -> bottom most ) to render some horizontal lines he stacks. That's the oldschool polygon method I mentionned in Interesting drawing/animation technique : that is to consider that a triangle is made of 2 triangles sharing an horizontal basis.

*: Don't let Iron Wallaby's entry intimidate you. As I said, the design plays an important role on the overall feeling.

ps: gosh too late


(Edited by poi on 05-16-2005 21:06)

thanks for explaining, but actually i meant THE WAY you draw the polygons using HTML+JS not the whole 3d part.
so you are drawing 1px high and x px wide divs on top of each other to create a poly.
thanks.

well, seems as if i can stop workin on my entry now. if you fit it in 20lines its a pretty sure winner.

The thing is, I'm not yet sure if it's possible to fit it in 20 lines.

[edit again] I added a few asteroids. I think I'm done with the content, now to clean up (speed up :[) the code.

---
Website

(Edited by Iron Wallaby on 05-16-2005 23:09)

GRUMBLE (and anybody else): Don' stop working on your entry. If you think you can't "compete" on the technicity, remember that you have more strings at your bow. The design, the gameplay, the smoothness to name some. That's incredible what one can do with just some sprites, and cherry on the cake it requires almost no code.

Iron Wallaby: Optimizing the speed and cleaning up the code at the same time seems really hard.

After much debating about how far to take this (feature-wise), I've settled for this game.

It is based on an old Atari 800XL game called "Meteor", which had meteors scrolling right-left, and you had to navigate between them. I've added some health packs, but unfortunately had to drop the catchy 4-channel soundtrack of the original

Onto the game. The aim: Survive the oncoming asteroid storm.

You start each level with 100 energy units. These decrease as you collide with asteroids. You can pick up health packs which boost your energy. When your energy drops to 0, you die.

With each level, the playing field increases in length, the number of asteroids grows, and they speed up, too. Of course, it's not all doom and gloom - there are 7 random backgrounds to look at

At the end of each level, your remaining energy gets added to your score.

I've left some comments in place, as it might be desirable to modify some of the level constants to enhance gameplay on your browser. It's fine for me in IE, and only marginally slower in Firefox. Firefox on the Mac is definately slower, Safari isn't too bad, and it doesn't work in Opera at all (any OS), due to the use of .style.cssText support.

One space-saving technique I used probably more than I should have is to typecast results of operations as strings, and then use substr(0, 0) to return an empty string. This is quite a handy trick to perform multiple operations without splitting them over multiple commands with ; or ,. However, it's not a technique that would lend itself to tight loops, so I tended only to use it to set level variables, or clear timer handles, etc.

http://www.soterm.com/dan/20liners/asteroids/

Of course, the gameplay is only half the entry. BabyJeffy created all the fabulous graphics for me.

Enjoy!

Dan

Would I be out of place to comment on the gameplay as a non-participant?

Great stuff. It's fun to try to weave your way through the asteroids. I also liked the different backgrounds. That was a nice touch.

My only complaint would be that it's too easy. I think the increase in difficulty is too gradual. I eventually stopped on level 20 with a score of 2775 points, and I think I only ended three of those levels with under 100 energy. I ended lvl 20 with a bang: 216.

So, my suggestions for making it more difficult would be to make the difficulty curve steeper and reduce the number of health packs (and possibly reduce the number of energy points they give you). I found that flying straight through a large asteroid was well worth it to get the health packs. In fact, flying through three asteroids would probably even out with one health pack.

Random idea that might be too difficult to implement in 20 lines: have the asteroids move at different speeds, thus changing the dynamics of the game.

Don't take this negatively, though. I'm only making the comments because I think it is a really neat little game. Sorry if I'm out of line here. Great job!



___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

Cool entry BRPS, I wish I could play it but the ship gif doesn't want to load in IE6... I saw a quick flash of it just when the game started but then it went invisible. (However that didn't matter much since I didn't seem to lose much health when it was gone lol )

/TwoD

TwoD,
I found that too. To get around it, I changed my cache settings from "Check every time" to "Automatically", and the problem went away with a refresh.

Suho1004,
No problem - great feedback. I agree with the difficulty thing. I had to find a balance between those browsers where gameply was smooth, and those where it was not (and thus harder to survive). I already took 10 energy units from the bonus the health packs gave - and reduced their frequency. I was tempted to adjust them even more until I saw it play in FF on a Mac ;o)

Dan

I'll try to make an entry, just for fun, tonight.

And as requested I'll try to make justice to the entrants and put some efforts in the results post. I'll do this tomorow. So the deadline is somewhat postpone by 1 day.

BillyRayPreachersSon: cool entry. Still too easy, but fitting the gameplay and various levels in 20 lines is quite an achievement.

Cool Poi, then I might be able to finish my last-minute entry too

/TwoD

Iron Wallaby,

I have to say (and not wanting to bias the judge in any way ) that I really liked your polygon demo. Very neat indeed.

A quick question on the polygon drawing (deciphering complex routines always drives me crazy )... Do you dissect the total area into the smallest number of squares possible, or do you use another method?

Dan

(Edited by BillyRayPreachersSon on 06-01-2005 20:52)

BillyRayPreachersSon: Check the explanation given by Iron Wallaby here, and the explanation I gave right below his post.

In short, each polygon is made of horizontal lines, and thus is scanned vertically and the left and right edges are interpolated.

TwoD: Great! I haven't had dinner yet, and still have to work on my entry, so I'll certainly "judge" the entries late tonight.

first of all, here comes the script I made.

It's neither optimized nor finished, but you get the idea:
Asteroids alpha



Now, the results are :
*rolling drum*

1. BillyRayPreachersSon with his full featured game,
2. Iron Wallaby with a stunning script,
3. GRUMBLE for a cool, though recycled, idea

And my "in depth" view of the entries is :

1. That's an achievement to have done a full-fledged game ( with several levels, difficulty, items, HUD ) in 20 lines. Well actually it's more than 20 lines, but using some nasty tricks it fits. The design is rather good. It's enjoyable that the sprites of the asteroids have no problem of antialising ( when 2 asteroids overlap, the edges of the one above still look ok ). To increase the difficulty, the asteroids could hurt more badly. Finally to make you code Opera-friendly, on the line 19, you have to replace the document.getElementById('shipCanvas').style.cssText = ... by document.getElementById('shipCanvas').setAttribute( 'style', ... )
   
   
2. It's not exactly 20 lines, but who cares ? The script is simply awesome. The code is clean and makes good use of Object Oriented design and some JavaScript features such as the Array.sort( ) method to sort vertically the vertices of each triangle, and the polygon themselves. For sure you could shrink the code to 20 lines, and maybe less, but at the cost of some obfuscation. It's nice to use a little function to display the correct age of the original Asteroids game. The overall design is neat. The fake asteroids in the background image tricked me till this night Excellent work. The only thing I miss is an ounce of interactivity.
   
   
3. It's already nice, but IMHO with 2 refinements it could have rocked. Replacing the dots with some sprites of asteroids, and using the window.onmousemove event to let the user dodge the asteroids. To do so you'd have to shrink the code a bit, which is possible by using a setInterval( drawi, 10 ) instead of calling the function once then using a setTimeout( ), getting rid of the array a, initializing more "brutaly" the array S, and ultimately by replacing the star class by a 3 records array.

Congratulations to the entrants, and thanks to the people who contributed in this thread too.


ps: gosh! I have to wake up in 4h



(Edited by poi on 06-02-2005 03:21)

Meh, didn't make it... Too bad I had to get up early for my job, otherwise I could have finished my entry in time.
Poi: Your code is scary, looks almost like mine... although I have a slightly different approach. I'll put it online when it's finished even if I'm not officially in the contest.


Congrats to the winners! I'm looking forward to the next theme!

/TwoD

Congrats to BRPS, I was impressed with being able to cram a game into that little space. I tried to, but found myself unable (the utility functions I'd have needed took up about 12 lines, meaning I'd only have 8 for a full game... I'd have to work hard to fit it in). Looking forward to next months, hope I can participate in that one too.

---
Website

Here's my entry, or atleast what should have become my entry if it had been fully playable at the end of May.
Thought I'd post it here so it finds the right context.
Ateroids Tribute

/TwoD