Preserved Topic: Augut 20lines Javascript Contest - Save the Princess - comments

This month, the goal is to make a game in which we'll have to "Save the Princess".
You can make any kind of game : action, reflexion, rpg, rts, ...
The comments must be posted in this thread, and the entries in Augut 20lines Javascript Contest - Save the Princess - entries

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.

---

Hope we'll all have fun with this topic.



(Edited by poi on 08-01-2004 23:16)

Can we use duct tape, too?

http://www.people.virginia.edu/~bwk7j/Princess.htm



Dan

I have a question regarding the 20 lines competition...

Can I assume that this acceptable as one line of code:

if (expression) execFunction();

rather than having to split it up into two lines?

Thanks!
Dan

BillyRayPreachersSon: Personnaly I tend to think it must be written on 2 lines. But we've never been really strict and the rules are a bit fuzzy ( thus your question ). On the other hand you could write your code using a ternary operator like:

(expression)?execFunction():void(0);

Just one more question... Although I think I already know what the answer will be, but just thought I'd check anyway

When accessing object properties, I can do this:

obj.property1 = foo;

obj.property2 = bar;

and I can also do this:

obj = {property1:foo, property2:bar }

Is the second method valid as one line of code? It's no biggie if not, it would just mean my code going from 20 to 19 lines

Thanks!
Dan

I would say so; it's an assignment, and a single assignment is a single line.

Of course, I'm a newcomer to the 20lines stuff too.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

Unfortunately, according to most interpretations of the rules, the "," is not allowed to be used to allow more than one assignment on one line.
Fortunately, its only a bit of fun, so it really doesnt matter .

Great entry though BRP! It's really fun. I can just complete level 11, but beyond there....I suck . Oh well, Im still trying to think of what to do. I was considering doing a mario type thing unsurprisingly. THen it occured to me that borders on the impossible in 20 lines. Now site back and watch poi make one

Good luck everyone!

Wrayal

Go to kimber-ja.demon.co.uk and click on the link to the raytracer!

Originally I had the Princess in the top-left corner, but it was far too easy

After about level 13, the enemy sticks pretty close to you, but there is a lazy knack to it that should get you to at least level 25 (I got bored then

I'm looking forward to seeing the other entries too - if nothing else, I can play games at work under the guise of "learning some advanced javascript techniques"

Dan

If we stay stricly in the rules, which don't really do whatever, the syntax below seems OK :

obj = { property1:foo, property2:bar }

Objects without methods are equivalent to Arrays, thus the use of Objects simply provides an aesthetic touch to the scripts

*bump*

Please, for the sack of clarity, can we all try to keep the Augut 20lines Javascript Contest - Save the Princess - entries clean with just the entries, and discuss here. Thanks in advance.

Sorry to throw a spanner in the works so soon after arriving, but I've made a start on my entry and realised that allowing the object notation above (or even just literal arrays, for that matter) opens up the way to some quite blatant cheating:

var dummy = {foo1: myDiv = document.createElement('div'), foo2: myOtherDiv.appendChild(myDiv), foo3: ...}

Unfortunately I can't see how we can make a rule against this without making the whole thing hopelessly restrictive - even completely outlawing commas won't help, as there are similar tricks that could be done with && / || and the ternary ?: operator.

Anyway, I'll crack on with my entry, but now it feels not so much like "let's see how much I can fit into 20 lines", as "let's see how little cheating I need to do what I want in 20 lines"

Simple solution: don't cheat.

Glad to see you're trying it, I'd love to see what you come up with.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

quote:

---

Iron Wallaby said:

Simple solution: don't cheat.

---

Fair enough, as long as it can stay as simple as that - but there's a fine line between creative problem-solving and outright cheating, and it's a matter of opinion where that line is...

Anyway, my entry came in at 18 reasonably sensible lines, and I reckon I could reduce it to about 12 without doing anything that I'd consider a real cheat (combining all global variables into a single object, embedding the assignments in lines 9 and 12 into the lines that follow them), but I achieved what I set out to do, so I'll leave it alone for now at least.

Nice - I've not seen that 3D perspective used since my 8-bit Atari days... So a quick nostalgia trip for me

I'm interested to know about your choice of image file formats - did you choose PNG specifically because of the GIF / UniSys royalties "issue", or was there another reason?

Dan

It's mainly just that I like to do things according to W3C standards, of which PNG is one, even if it means waiting for A Certain Popular Browser to catch up in its support. To me, continuing to use GIF to accommodate IE is a bit like insisting that all your DHTML stuff must work in Netscape 4.

But then again, it's partly because I do graphics in Gimp, which doesn't save to GIF (in the version I've got, anyway) due to the Unisys patent restrictions - so in the end that does play an indirect part.

I like solutions that work in whatever browser (for whatever logical reason) I am forced to use. I hear your comments about PNG use - but to then go ahead and submit an entry which doesn't work in "the most used browser in the world" just because your version of GIMP doesn't support it... well... I call that laughably short-sighted and petty.

Let me know if this kind of "self justified" elitism is something the rest of the board endorses. If it is... I'm out.

Jeff

Jeffy: I really doubt that's any kind of elitism. Actually many people here feel concerned about web standards and accessibility, but for these little contests we generally focus on the features and consider the standards compliancy as the cherry on the cake. And after all we all have at the very least one version of each major browser available on our OS. It's not a huge pain to paste an URL in another browser or simply right-click and click on "OPEN IN XYZ BROWSER".

Whatever, I'll be glad to see more standard compliant entries in the 20 lines monthly contests. Feel free to submit some.

Poi...

I'm one of those people that push accessability and standards as much as the next person - it's what I do for a living. But I certainly do consider this to be elitism:

quote:

---

To me, continuing to use GIF to accommodate IE is a bit like insisting that all your DHTML stuff must work in Netscape 4.

---

I also hope to see more cross-browser working entries in the 20 line contest... since they not only reflect a creative talent, but show a depth of knowledge in a technology that most people assume is only for rollovers.

Actually many entries in the 20 lines contests are cross browser. But the intenssive CPU usage implied by the previous themes put IE ( and its not easily crawling rendering engine ) in a predominant position. But I'm a FireFox freaks too and always try my best to make my stuffs work in both IE and FireFox.

Since this PNG vs GIF thing isn't something I'm sufficiently bothered about to get into an argument over:

http://www.west.co.tt/matt/js/ant_invasion/index_gif.html

Except that for some reason, this version seems to be completely unusable here in Mozilla - it's about half the speed, and the ants are invisible. Go figure (It's fine in Safari, and I'm assuming it'll be OK in IE too...)

Im really sorry to say this, but Im probably not going to be able to enter anything again. Unfortunately, Im being taken on a boat tomorrow. Im going to spend my birthday and the day I get my GCSE results away from my family, and without any form of computer or TV, so I wont really get a chance to program?

Also, this basically marks the end of my participation in this forum.

My programming has become stagnant, and Im sick of some of the characters on this forum. check the service pack 2 thread on the "ozone" forum of all places if u want to know more.

Thanks for all you guys have given me, its been a real pleasure to share code with you all. I might drop back in from time to time, but thats about it.

Later all,

Wrayal

Go to kimber-ja.demon.co.uk and click on the link to the raytracer!

kastner,

Nice game - is it actually possible to get past level 2?

Dan

Sure thing ... to do level 2, you have to use your ghost (hit space bar).

there are 7 levels right now, as soon as I can beat level 7 on the page I was "inspired" from, I will be adding level 8.

I really wish I could figure out the smooth scrolling... document.getElementById("c_4") (my Hero) returns "HTML Image Element" or some such, but getElementById("c_4").style.top is empty (and setting it does nothing).

the other way I thought to do smooth (but not AS smooth) would be to call draw() every time the movement loop happens, but that seems to do nothing.

Ok, just finished http://oos.moxiecode.com/examples/d_star/index.html, and I finished copying the boards, so unless I missed a unit (up to 7 are 100% known good), then ALL the levels are beatable. Its wierd, I think the origional game had like 4 levels, and they are MUCH harder then the rest of them. I think the OOS guy added them. They're still fun tho!

kastner: love that game!

and have a look at It's getting crowded in here. (Inmate 5000!) - they're talking about you.
(great way to start at the asylum, btw)

so long,

->Tyberius Prime

kastner: Your game is really cool. If you could change a bit the sprites to match the topic, it'd rock.

To answer your question about the if statements : YES, they count as they really do something ( compared to a function declaration or trapping an event ). But don't worry, we won't bite if you exceed 20 lines.

You also asked some tips about optimization. A simple trick in the declaration of your variables can shrink 3 lines. Turn the following code:

/* 01 */	var level = 1;

/* 02 */	var width = 12;

/* 03 */	var height = 9;

/* 04 */	var board = [

				0, // ...

into this

/* 01 */	var board = [

				0+0*(level=1)+0*(width=12)+0*(height=9), // ...

There's also a trick with Strings variables. To nest the declaration in another statement we need is to "nullify" the value of a string. Since there's all the chances that the string do not represent a numerical value we can't use a parseFloat() to convert the string before multiplying it by zero. But we can use the isNaN() function and then multiply the result by zero

Hope that helps

Woah... thanks for the tips, I did the first on you mentioned, and that gives me 3 lines to try and get some of the other features in (reset will be in there soon)

I'm far from an artist, so I just copied the graphics I saw as best I could, I will see what I can find for a princess

that string tip will probably make a little more sense to me when I get some sleep!

Thanks for the great welcoming to the site, I'm glad people are liking the game!

p01 - I've seen your work on the other contests and I'm *very* impressed - your fire and plasma effects are amazing!

I feel like my keyboard handling could be a little tighter, I basicaly used shingebis's for the basis, and adapted it (poorly).

Who would have thought graphics would make it more fun!, I shamelessly ripped of some mario sprites, let me know what you think. I think the only usability aspect missing is the smooth motion animation!

Kastner - I just get loads of JS errors in IE now.

Dan

Yea, I see that....
p01, it looks like the loading trick you showed me (in the array), isn't working in i.e. here is the assignment:
/* 01 */ var board = [
(0+0*(level=1)+0*(width=12)+0*(height=9)+0*(reset = [])),

the ie error is "width is undefined", the first time I access it....
what am I doing wrong?

kastner:Yep, we may say what we want, but the graphism have a real impact of the fun factor and thus on the gameplay. As for the problem in IE, have you tried to "nullify" the declaration of the array instead of that of the other variables ? ATM I don't really know, I tried :

var board = [ (4+0*(level=1)+0*(width=2)+0*(height=3)), 5, 6, 7 ]

alert( board +"\n"+ level +"\n"+ width +"\n"+ height )

in FireFox 0.8 and IE 6.0.2800, and in both the ouput was:
4,5,6,7
1
2
3

So it should be ok in your game. Sorry to be of little help, I'm still at work ( the one that pay the bills )

Ok, I figured it out, I shouldn't have asked until after I played around - turns out that the line
//p01's trick - thanks
was causing the problem I changed it to:
// p01s trick - thanks
and all is good in the world again.

Dan, it should be fine in IE now...

p01: yea, the graphics make a huge imact, my world is shaken!

I think the game is done unless I get an inspired idea to fix the animation, I added the board reset, so I don't know what else there is todo (aside from move counting) EDIT: move counting is done, but I introduced a bug whereby if you move into a wall, it increments the move counter ...

(Edited by kastner on 08-25-2004 18:23)

I've seen a page listing many syntaxes for comments that were all valid SGML, but failled in IE. Unfortunatelly I can't find it out.
BTW, I saved the princess in 456 moves.

Woah, 456??? I didn't finish my own verison yet, but the flash one took me 980 or so!
wow...

yea, IE is a strange beast... I was thinking about starting another 20 liner, I had so much fun with that one!

any hint on what sept's theme will be - it will probably be the last one I can particiapte in until jan (holidays at work are killer)

I started another game, not sure if I want to finish it as its already like 10 lines without any board data / game logic...
I kinda did it as a "lets see if I can get this to work"
it works in I.E. but they arrows don't work - so d = -> and a = <- for some reason onkeypress doesn't seem to capture the arrows for me.

here's the url, please please let me know what you think!
http://mine.metaatem.net/20_lines/princess2/

Oh, and the left directioin works, you just have to wait for the image load after you hit it (I need to preload, but not sure how to do it in one line for multiple images)

and a much "heavier" version (about 26 lines by now), space or "up" is the other control
and arrows should be fixed in ie now, but not sure...

http://mine.metaatem.net/princess2/index2.html
* this is the current dev version, so if its really wacky, just wait a minute and reload, I'm probably working on it.

and please, if you look at it, tell me what you think!

current level: 10 - 871 moves
princess saved.
Great game.

Good Job, Hugh
did you like the game?

I think I'm gonna move this discussion, b/c this is nowhere NEAR 20 lines

but I'm stuck.. or more accuratly, NOT stuck
I really don't know how to implement the hit testing - the hero sprite is 1.5 blocks high...
and I'm doing my movement in a "draw" function that is broken up by jumping/falling and left/right.... ug... if someone could give me a hint, I'd apprecate it...

Oh, I'm talking about
http://mine.metaatem.net/20_lines/princess2/index2.html

thanks

(Edited by kastner on 08-26-2004 06:39)

kastner,

Have you been modifying your original 20 liner entry? I just tested it under IE6 on a Win XP (Home) SP2 system, and the screen (painfully) redraws after every move, making the game totally unplayable

Dan

Hum... thats VERY interesting... my friend at work had a REALLY tough time playing my newer game - and he has sp2 - maybe I should check out that SP2 thread in this forum. - I really don't think I changed the game much (just graphics iirc)

EDIT: just checked it here - this is an xp running in vmware, with only 512mb ram to share (382 allocated to xp), i.e. 6
sp 1... and it flies....
also the "SP2" thread, didn't help too much - if anyone has any ideas, I'm all ears

(Edited by kastner on 08-29-2004 21:32)

BillyRayPreachersSon: It seems the problem comes from either XP or the SP2 as I've no problem with IE 6.0 and Win2K.

kastner: I've improved my score, and just saved the princess in 354 moves.

Jeeze, I'm gonna have to try again...
how many moves are you finishing level 1 and 2 in? I'm doing 1 in 13 and 2 in just under 40 I thik

I'll try to make an entry tomorow. Obviously other entries are welcome. And it's not forbidden to submit several entries

kastner: I just played again and noted the number of moves displayed at the end of each level :
level 1 -> 9 moves
level 2 -> 50 moves
level 3 -> 70 moves
level 4 -> 99 moves
level 5 -> 145 moves
level 6 -> 192 moves
level 7 -> 220 moves
level 8 -> 246 moves
level 9 -> 274 moves
level 10 -> 318 moves



(Edited by poi on 08-30-2004 03:47)

I think I am seriously missing out on something, since I just get a Mario on a standard-looking Mario level that continues into infinity... so I can walk forever but nothing interesting happens...

And sorry Poi, no entry this month for me. Been too busy.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

The entries so far are:

• Save The Princess by BillyRayPreachersSon
• Ant Invasionby Shingebis
• D-star by kastner
• Mario Bros 2 remake ( unfinished ) by kastner

Iron Wallaby: too bad you have no time this month. The game your tried is the Mario Bros 2 remake, but the score I anounced are for the D-star game.

p01: WOW, thats crazy - I guess you're all about making things smallers - even if its number of moves

Right now my computer is down at home (mine.metaatem.net). I'm going to host it elsewhere, but change dns. so it should be back up tonight

Well - I figured out how to sto it redrawing the screen after each move.

My Internet settings for IE caching were set to check for new content "Every visit to the page". Changing this to "Automatically" fixed this issue.

Strange!

Dan

Hi all.

First time I post here but some of you might know me from the javascript-games.org forum as Henrik.
I saw this post a few weeks ago and decided to see what was possible in 20 lines...
My first idea when I learned about this month's theme was of course a SMB clone in just 20 lines.
The problem was that I didn't have the time nor the graphic skills to make it perfect
Kastner came close but he seems to have a problem with collisions.
Since I couldn't do the graphics I was going for the physics instead and managed to (atleast partially)
solve the problem in a sketch version of my entry with some moving squares.

However, things came up and I had to stop coding long before I felt happy about the result

Here's the sketc: www.geocities.com/therulers3000/filer/sketch.htm
It's not 20 lines since it's not finished but I wanted to show Kastner that it can be done quite easily. (This is just one way of doing it btw)
Credit goes to Poi for his superb kayboard handler, would never have thought about that lol.

I did start on a 'final' version but it looks completely different and has a huge object structure with all the game data in it on a single line
and it will take a lot of time to complete.
Neither of the versions were meant as entries to this months competition since I'm not sure the rules would allow execssive use of isNaN() in anonymous functions within multidimensional arrays to put eveything on a single line.

The main problems I have left to solve is actually research related. I've been unable to find/make good sprites so I would need a graphics artist or some really good sprites.
And, I've not been able to work out the details in the SMB 'physics engine', like how fast Mario jumps/falls/runs.
(I even hooked up my NES to the comp to record it and analyze it in slowmotion, but the video quality was too poor.)
If anyone has this info I'd really appreciate if they would share it, maybe then I'll finish the final version of JavScript Super Mario Bros in 20 lines.

(Edited by TwoD on 08-31-2004 18:48)

TwoD: WOW, awesome job. I did get some collision detection working, but never got around to implementing it - or optimizing it. I really think it would be super hard to make what I have so far into 20 lines...

here is as far as I got:
http://mine.metaatem.net/20_lines/princess3/

Also - I got all my sprites online - just did a search for "mario sprites" in google, then went to "images"...

Well done, TwoD. Collision detection of that sort is very tricky to get working.

The only improvements I can think of for your engine are A) proper gravity (so he accellerates as he falls), and B) a parabolic shape to his jumping, so he doesn't seem to simply warp higher really fast, but rather jumps in a parabolic shape.

I do have to say, though, very nice work.

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

Thank you

The other version has better gravity but it's hard to make it match the original game...
I don't know how to do parabolic jumping (I'm pretty bad at english maths but I assume parabolic has something to do with a curve) and I'm not sure that's what Nintendo used.
Mario knows some pretty hard moves...

Kastner, nothing seems to happen after the level loads. I have IE6 on winXP (not SP2).
The sprites i found online were incomplete and of poor quality
If I only could rip them from the actual game cartridge lol

I think almost any game could be compressed to 20 lines if you use the same tricks with huge objects I used for the other version of my clone.

TwoD: Welcome in the Asylum. Glad to see you here. Btw, do you have any news from Scott Porter ? That's really sad that javascript-games.org disappeared.

Your SMB clone is well done. Afaik, the jumps in the 2 first opus(es?) of the Mario Bros serie have no physic. The player goes up at a constant speed, till a certain relative position, as long as the button is pressed, then falls down at the same constant speed.

Regarding the collision detection, in february 2003 I wrote a script handling the collision of squares of arbitrary size ( shame on me, it's IE only and have some preloading problems ). It should be fairly easy to make a platform game with it.

Now, I have to move my *ass* and code/design an entry in 3.5 hours
And again, any new entries are welcome.

Yea, I had to clean up the sprites I used... feel free to steal mine
http://mine.metaatem.net/20_lines/princess2/sprites.gif
or
http://mine.metaatem.net/20_lines/princess2/sprites.zip

I didn't test my collision on ie - I kind of abondend the whole thing :/

(Edited by kastner on 08-31-2004 22:41)

I would if I could kastner, seems to be a problem with the links...

I'm not so sure about that Poi, the lowest jump height in Mario seems to be 1 block (16px) but the height is not increased by 16px all the time and you can 'hang' for a while near the maximum jumnp height (4 blocks/64px). However, this height is increased slightly when running which means you can for example crush the ceiling on level 1-2 when running on the coinboxes but not when standing still...
Then again, it's a bit hard to determine the exact height since Mario is standing 1px below the floor and doesn't hit a box above him until his whole
hand is on it. (Been playing a lot of NES 8bit and GameBoy Color lately lol)

Thanks for the link, I think I've seen that script before on javascript-games.org so I know what it looks like but I couldn't get it running now...
I'm sorry to say that there's been no news from Scott...
I spoke to Brent Silby a while ago and he said Scott probably got tired of it. Brent was planning on buying the domain name, and he even placed a bid on it I think, to resurrect the site.
Brent is on www.def-logic.com btw.

/TwoD

Very sorry TwoD, I edited the first post, here they are again:
http://mine.metaatem.net/20_lines/princess2/sprites.gif
http://mine.metaatem.net/20_lines/princess2/sprites.zip

I'm *really* looking forward to both of your entries, and next months theme!

*rolling drums* Augut 20lines Javascript Contest - Save the Princess - Winner(s)