Topic: 20 Liners - January 08 - Dynamics (Page 3 of 4)

(very quick one : ALL browsers with Canvas violate the spec in one or many ways, see tech notes of a very nice Canvas game engine called "canvex")
(off to enjoy flowers of the beautiful Swiss spring - walking flowers at that)

Fixed. The code is still as generic as before and it's a bit cleaner.

argo navis: Of course, but some parts of the specification, including fillStyle, are pretty solid and haven't changed for many months. Also the fail conditions of fillStyle are really simple and common.

Theory confirmed.

true?(([1,2,alert("asd")])[3]):alert("bla");

This code displays an alert with message: "asd".

false?(([1,2,alert("asd")])[3]):alert("bla");

This code displays only one alert with message: "bla".

So poi: this little "j<3?(" and "):false" may actually save you a little bit of processing time :P

edit: hehe too late

(Edited by Arthurio on 01-28-2008 19:22)

So any more entries ? Come on guys, the clock is ticking. Liorean, Argo Navis, Wrayal, Iron Wallaby, MaGnA, any one ?

3-4 days to go ... plenty of time ... don't be shy

quote:

---

wrayal said:
Who else are we going to see scripts from? I'm hoping to get a nice little one done soon (just inside the deadline if I flog myself...), but nothing too serious, hopefully there'll be something more fun from me next month!Liorean? Argo?

---

Well, most of your 20 liners seem to have something to do with graphics. I'm not a graphics guy. In fact, I know pretty much nothing about rendering and image manipulation. I can write a state machine parsing code into a tree structure (probably needing more than 20 lines unless the grammar is dead simple, though , and a code generator transforming it to byte code, and an interpreter executing the byte code, but I wouldn't know where to start, what to do or how to do it when it comes to rendering something. And even if you had a challenge that fit me, it's not likely I would have the time to cook something up and polish it.

--
var Liorean = {
abode: "http://liorean.web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

obviously not for the challenge ... just fooling around

Is there a good/quick way for sorting/ordering polygons in such a simple scene? Right now I just sum the z-s and sort by that but it doesn't work too well... I know very little about z buffering and 3D is all too new to me ...

liorean: well then this is a great opportunity to get more familiar with some js graphics :P but I don't think it says anywhere in the rules that is has to be visual ...

(Edited by Arthurio on 01-28-2008 22:18)

No need for Zbuffer. Just sort the polys based on their furthest vertex.

True, the presentation doesn't have to be shiny. Great code shine by itself.

poi: You mean like Math.max(z1, Math.max(z2, z3)) or something else?

edit: because that I've tried and it didn't work ... maybe I'm doing something wrong
link
link

(Edited by Arthurio on 01-28-2008 22:56)

like Math.max( z1, z2, z3 ) oh and you should have some backface culling.

OK, here's my first contribution to something like this, ever

Rockford the Invincible

It's a half-assed Boulder Dash implementation in 26 lines. I didn't exactly get a hang of how you guys count lines yet, so I may be miscounting. I'm not familiar with all the JavaScript code obshortification techniques that you guys know about. How can I improve this to shave 6 lines?

I used a single GIF image I found on a website for the graphics. They are the original Boulder Dash sprites. I may crop & reorder them to optimize the CSS a bit. Also, the colors are a bit too dark...

<crappy-signature>magnetiq.com</crappy-signature>

(Edited by MaGnA on 01-29-2008 06:55)

(Edited by MaGnA on 01-29-2008 07:16)

Definitely something original in the context of 20 liners! Doesn't look too dark to me.
Some user interaction would be nice

Use inline if instead of normal if statement.
condition?statement_a: statement_b;
or
variable = condition?expression_a: expression_b;

Neat.

Hum, since an expression can be executed in the case statements, I'm tempted to count them too.
But I'm almost sure it can be shrinked to 20 lines. It might take to reorder the sprites and use proper array for the map instead of juggling with className and slices.


The week I got my first laptop, I made a Boulder Dash while commuting in the trains it was pretty cool way to spend time. Will try to put my hands on it. The code was not so big, about 4-5 kb for the markup + game logic and a few more kb for a few levels.

poi: thx, backface culling did it

link

quote:

---

Arthurio said:
Use inline if instead of normal if statement.
condition?statement_a: statement_b;
or
variable = condition?expression_a: expression_b;

---

That's not quite how it works, I'm afraid. The conditional expression always looks like this:

conditionexpr ? truthypathexpr : falsypathexpr

If you try to use statements of any kind in any of the expressions, you will find the code gives a syntax error.

--
var Liorean = {
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

try

true?alert("asd"):alert("bla");

or

var a = 0;
1==2?alert("true"):(a=2);
alert(a);

Arthurio: which is the normal behavior of the ternary operator, as Liorean said:

condition?expressionIfTrue:expressionIfFalse;

Of course expressionIfTrue and expressionIfFalse can include function calls and even code blocks, but it must be a single statement/expression ( which can include , ).



(Edited by poi on 01-29-2008 12:59)

Arthurio: Thanks for the suggestion about the ternary conditional operator instead of ifs. Is there a way I could capture mouse position without wasting too many lines?

poi: I've ditched the switch-case and replaced it with a for-in, for your temptation to count the case labels

I don't know how switching to a normal array would reduce the # of lines; it would eliminate the "className" references but the # of lines would be the same. Am I perhaps missing something?

Re-ordering the sprites would also just help optimize the CSS and I wouldn't gain any JS lines from that.

Implementing BD clones is a hobby of mine as well I have so far had one 68000 implementation on Amiga, one on Delphi and another (more complete) one in JS. Seems like the first thing I do when I get my hands on a new language is to implement a BD clone, instead of a "Hello World!"

The code is now down to 15 lines and now I'm tempted to add more elements

Features:

* Boulders and diamonds obey gravity
* Boulders and diamonds slide over walls and other boulders or diamonds
* Boulders prefer to slide left when balancing on another boulder or diamond
* Diamonds prefer to slide right when balancing on another boulder or diamond
* Butterflies are left-hand followers
* Rockford has a mind of his own

<crappy-signature>magnetiq.com</crappy-signature>

(Edited by MaGnA on 01-29-2008 18:34)

Make that 16; I should probably have counted the "g = { ..." as well.

<crappy-signature>magnetiq.com</crappy-signature>

quote:

---

MaGnA said:

Make that 16;

---

great! keep up the good work

MaGnA: Nice optimizations.

I see you're using the JS 1.6+* Array.prototype.every method which is a Mozilla invention. To make your code cross browser, you can add this 2 liner

Array.prototype.every = Array.prototype.every||function( callback, that )
{
	for( var i=0; i<this.length && callback.call( that||this, this[i] ); i++ );
	return i==this.length;
}

This at least makes the script work in Opera 9.5, but thows in IE7. Will try to figure why.


Regarding mouse capturing, for line optimized things, you can do it in 2 lines.

element.onmousemove = function( event )
{
	var event = window.event||event;
	window.mouse =
	{
		x:event.offsetX||event.pageX,
		y:event.offsetY||event.pageY,
		b:event.which||event.button?true:false
	}
}

Where element is an overlayed element on top of the area you want to capture the mouse.

HTH

As for my saying about using an array instead of classNames, I don't know for sure. It's more a gut feeling. OTO the functions hash table technique is really compact.



*: wouldn't be great if there was a standard body for JavaScript instead of browser vendords adding whatever they want with no discussion. I'm really looking forward to ES4



(Edited by poi on 01-29-2008 20:39)

Got it. IE7 doesn't like:

foo( undeclaredVariable=expression )

To get the script to work, declare k, ci and d or place them in the g global game object to not loose any line



(Edited by poi on 01-29-2008 21:11)

quote:

---

Arthurio said:
true?alert("asd"):alert("bla");

---

Which consists of three expressions. A function call is not a statement, it's an expression.

To show you an example of what happens when you actually try to use statements in it:

true?true:return false;

As opposed to

if(true)
    true;
else
    return false;

--
var Liorean = {
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

quote:

---

poi said:

MaGnA: Nice optimizations.I see you're using the JS 1.6+* Array.prototype.every method which is a Mozilla invention.

---

And on ES4 track, and supported by WebKit.

quote:

---

Array.prototype.every = Array.prototype.every||function( callback, that ){ for( var i=0; i<this.length && callback.call( that||this, this[i] ); i++ ); return i==this.length;}

This at least makes the script work in Opera 9.5, but thows in IE7. Will try to figure why.

---

Strange. It works well enough in IE7 when trying to analyse it like this:

var a=[];
alert(1+' '+Array.prototype.every);
Array.prototype.every = function( callback, that ){
    alert('every!\n'+this.length);
    for( var i=0; i<this.length && callback.call( that||this, this[i] ); i++ );
    return i==this.length;
}
alert(2+' '+Array.prototype.every);
[0,1,2,3,4,5].every(function(x,y){alert([x,y]);a.push(x+':'+y);return true;});
a.join('\r');

quote:

---

*: wouldn't be great if there was a standard body for JavaScript instead of browser vendords adding whatever they want with no discussion.

---

JavaScript being Mozilla's version of ECMAScript, I'd say Mozilla is the standardising organisation. They're driving the ES4 process, too, so expect JavaScript1.6-1.9 additions to be included in the ES4 standard library.

quote:

---

I'm really looking forward to ES4

---

You're not alone.

--
var Liorean = {
abode: "http://liorean.web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

The lack of every method was not the only breaking in IE7. IE7 also chocked on undeclared variables. See my previous post.

Allright, Mozilla == Netscape == the creators of LiveScript aka Javascript. Sort of.
Beside they are not the only driving ES4, which is a good thing. More people playing the game means better, proper, standards. But well, I'm longing for ES4.



(Edited by poi on 01-29-2008 22:11)

liorean: ok thx for the explanation

btw 105. post in this thread ... we haven't seen a js thread burn this bright (pointing at the flaming pill) for ages

(Edited by Arthurio on 01-29-2008 22:30)

Liorean: Sorry I realized my " This at least makes the script work in Opera 9.5, but thows in IE7. Will try to figure why. " was misleading. I meant that the entire script threw, not the Array.prototype.every method itself. My bad.

Bad Frenchy.

quote:

---

poi said:

MaGnA: Nice optimizations.

I see you're using the JS 1.6+* Array.prototype.every method which is a Mozilla invention.

---

poi: Thanks for the compliments! Aww... I didn't realize that every() wasn't a widely supported method

Extending the prototype like you did is a good idea! I may employ it if I have any lines left to make my application x-browser.

And thanks for the mouse event code; I'll try to incorporate that

I have added two more features without increasing the line count. Rockford now blinks, taps his foot and looks towards where he's going. I've also added the firefly. I'm still at 16 lines (if everybody agrees to my counting method):

link

<crappy-signature>magnetiq.com</crappy-signature>

Coolio. FWIW I agree with your counting method

quote:

---

Extending the prototype like you did is a good idea! I may employ it if I have any lines left to make my application x-browser.

---

Meanwhile I added the Array.prototype to my userjs

Still just fooling around...
link
hmm ... this starts to remind something I've seen before ... I wonder what that could be ... hmm hmm :P

poi: I've incorporated your every() and (uninitialized = expr) fixes. The code size gone up to 19 lines now. I guess I won't bother trying to add mouse support now

Here's the final thing:

http://magnetiq.com/bd20/

Tested on FF2, IE6, Opera9, Swift0.2. IE6 runs like a turtle ensnared by a Zerg queen.

Arthurio: looks like you're having fun. Keep going

MaGnA: Moot points, but the Array.prototype is an extension to non-Gecko browsers, not an IE fix. Also I thought the declaration itself didn't count, just like function delcarations don't count. The default|| part is just there to keep the native/previous implementation if there is one. Therefore I counted it as 2 lines. If it is so, you have the 2 lines required to add mouse support


Oh and nice signature.

I've been following this thread fervently guys, it's been one of the best 20 liners in Years! Well done all.

1 day left ... plenty of time

quote:

---

poi said:
Moot points, but the Array.prototype is an extension to non-Gecko browsers, not an IE fix.

---

poi: Got you. I removed those redundant comments from the code.

It's still 15:38 ETA here so I guess I have time for one final version before the deadline:

Rockford the Invincible - now with mouse support!

Does anybody know why it's so darn slow on IE6? How's IE7 behaving?

Cheers

I believe we have a winner.

The speed seem fine in IE7.

IE is kinda stupid WRT background image swap. AFAIK it does not fetch them from the disk/memory cache.

Some browsers try to be clever and do not load images put into an element in display:none;, therefore for preload I usually use:

#preload
{
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
	width:0;
}

This way the content to preload is not visible but browser still load the resources in the children elements.

BTW thanks to your page I finally realized the logic of the monsters. Never really thought about it before. The monsters were moving randomly in my boulder dash. Just found the source code. Yuk the files are from 2002 and the code is fugly

What about a trip to Castle Wolfenstein in 14 lines ?

Features & notes :

• move with the arrows
• click on the map editor to toggle the walls
• collision detection
• you start in the upper left corner. Destroy the wall if you're stuck at the beginning
• the code is based on the very first draft of 3D TOMB II, circa 2002. The technique is not perfect but it's quite compact
• sorry I haven't bothered to make it work in IE ( yet ? ).

Hope you enjoy your journey.
The plan for the next 2 hours is to cook, eat and try to add some entities in there. We'll see how it turns out.

Looking forward for last updates/entries from all of you guys.



(Edited by poi on 01-31-2008 22:23)

*poking server* what is the time?

edit: ahh 1h39m left :/

btw GREAT entry poi

(Edited by Arthurio on 01-31-2008 22:23)

poi: Just as I was planning to add keyboard support... Tsk tsk tsk... Even if I add VR helmet support, mine won't approach the coolness of what you've got here. Awesome last minute entry!

As for the image caching you've suggested, I had tried a similar thing but to no avail. Maybe I did something wrong...

And yeah, I had figured that those monsters just follow this simple algorithm:

if (can move left)
move left, also turning towards left
else if (can move forward)
move forward
else
turn towards right, in place

Congrats again! We wouldn't expect anything less form you, poi.

(BTW it's hogging FF. Are you rendering even when there's no new keypress?)

Poi -- Very compact and quite speedy too -- wish we could get rid of that fisheye, though! (I'd poke it myself, but I never quite have the time XD) I need to download Opera to try your other entry...

Magna -- beautiful work! It's very cute and runs great in Safari.