JS13K

Posted by Astryl on Aug. 19, 2016, 3:19 p.m.

Nopykon's comment in Jani's Goofy4Art blog alerted me to the existence of this.

Why didn't I know this was a thing sooner?

So I'm going to start a JS13K thread. Post your development progress, tricks/workarounds and tips.

What is JS13K?

A JavaScript coding competition where the goal is to create a game based on a theme.

The twist: The final (zipped) game needs to fit within 13KB, and may not load external resources/libraries: It needs to work offline and standalone.

Of course, this severe limitation inspires creative workarounds, and you'll tend to dig deeper into the language in order to understand how to get things done.

My own goal with this is to use it as an excuse to actually learn JavaScript properly instead of putting it off and stumbling through.

Go visit the JS13K site here: http://js13kgames.com/

You should join, even if you don't plan on completing something. The fun is in the challenge.

Comments

Astryl 8 years, 4 months ago

To kick things off, I've got my little game going quite nicely already. Started it this morning after spending a few couple of days studying JavaScript in-depth.

A great way to do that is to watch a bunch of Douglas Crockford's videos on the language., not to mention his book, JavaScript: The Good Parts.

I had a bit of a "Oh, now I get it" moment thanks to his material. See, my big problem for years is that I was treating JavaScript like a C or Java style language. Or a 'classical' language to use the phrase Mr Crockford uses.

The second I realized it wasn't, and stopped trying to do things the C/C++/Java/OOP-in-general way, I suddenly found myself writing myself into fewer corners and actually getting stuff done.

Case in point:

The game is, contrary to the initial appearance, a strategy/tactical game. There isn't going to be much in the way of animation or action, mostly orders being issued via the UI, and messages popping up to inform you of the results of your actions. Leaves me worrying less about cramming art into the game.

I have a working game screen. The buttons are functional (Though don't exactly do much at this point). The status line at the top changes its text as you hover over buttons, describing what they do… the starfield doesn't do anything, but I might change that given time (I just dotted those in randomly for now. I'd like to do a 3D Stars effect, but that's all dependent on time).

The interface is mostly PNG images at the moment, but I'm considering just swapping it out for a simple Bresenham line implementation and a polygon rasterizer, since I'm dealing in mostly-simple geometry anyway.

A little cheat I'm using to keep my code clean and not require setting up commonjs/requirejs/etc is that I'm using the C Pre-processor on my source. Everything 'builds' into a single JS script ready for minification, and I get to use things like evil macros, preprocessor constants, #include and include guards.

I can also #define out portions of debugging code if necessary, which is pretty handy.

Nopykon 8 years, 4 months ago

Yes folks, you should join in!

JS13K is the only month of the year I use js. Well, maybe once or twice otherwise for a website or so, I'm not good at it. I am missing the pre-processor, maybe I should do that as well.

Last friday I started with a triangle renderer ( sigh, another one :P ), in 2D. You can get webGL for under 1k, but it's not as fun. Since then I've added the rest of the basic pipeline, fresh in memory from my other project it took very little time. Man, did I spend much time on this last year. xD.

Right now, packed and zipped, all the 3D stuff (render.js, not main.js, so to say) is down to 900 bytes. Not entirely finalized part of the code, but I'm certain I can keep it around that size if I try. Since js use doubles, there are shortcuts to be made, and I've not yet though about how to make it smaller really.

Instead I'm worried about 3D-data. A seemingly VERY low poly model, packed and zipped, still manages to take more space than the renderer. Current idea for levels, is to use a few models scaled and so on, over and over, hand placed. I don't think I will have time to write good proc-gen stuff. And I don't have a plan for audio. I want music. But no plan. Pics and updates to come.

Jani_Nykanen 8 years, 4 months ago

This does sound fun, however, I'm not sure do I have time for this (since I failed one algebra exam, I have about one week time to learn programming in R and pass the exam not to have to pay back my student allowance)…

EDIT: Just learned that I don't have to do that course anyway. Oh, and the course actually had ended in July 31th…

Astryl 8 years, 4 months ago

I needed to have some animation. So:

Nopykon 8 years, 4 months ago

How many planets are there? I won't play anything with less than 18 quintillion. :<

JK, looks sweet so far. Are you thinking about doing Elite style graphics, or more towards star fox? :P

I did the pre-processor thing. The annoying thing is that the src has to be "compiled" before I can test small changes. i.e. can't do that thing were you just type, save and C+r to see the results, because the #-lines are errors in the browser if not removed.

I'm thinking it wouldn't take too long to write a custom pre-processor with a format, like:

//#if MINIMIZE

//#endif

including the '//'s …which would work in a browser even if it is not yet processed. Skipping things is the only thing I need from it, code generation is kinda the opposite. :P But maybe you have a better solution?

Astryl 8 years, 4 months ago

Oh yes, I've got an auto-rebuild going, and I'm leveraging WSL to use sed and remove the lines starting with #. Just this basically for the core 'compile':

while true; do
    gcc -E -x c -o game.dist.js main.js
    sed -i '/^#/d' game.dist.js
    # Other steps like minification, etc. 
    sleep 2;
done

I'd have that be smarter, using inotifywait, but the WSL doesn't have proper support for FS events yet (Though it's already slated for fixing soon). So dumb once-every-two-second loop will have to do.

As for graphics, I'm only using a bare minimum. Basically a static image that will slide in from the bottom of the viewport for a planet, scaled image for a station, etc. Nothing major.

You're not free-moving in this. To get from planet/object to another one you click on SYSTEM MAP, then you'll get a view of your current system and its planets. Clicking on one of those will give you info and the option to travel there.

EDIT: I suddenly decided to get browser-sync working. Now the minor problem is that modules like browser-sync aren't working too well on WSL without tweaking, so I just 'cheated' to implement an auto reload (With the build script running under Bash on Windows and browser-sync running under Node.js for CMD - convoluted as hell).

watch.sh
while true; do
    rm game.bak.js
    mv game.dist.js game.bak.js
    gcc -E -x c -o game.dist.js main.js
    sed -i '/^#/d' game.dist.js
    cmp --silent game.bak.js game.dist.js || touch build.txt
    sleep 1;
done

browser-sync
browser-sync start --server --files "index.html, build.txt"

This reloads the page only when a new change is made to the source tree. I don't even know why I bothered, I should have just set up a Node server for testing my game. Too late to turn back now though!

Nopykon 8 years, 4 months ago

Woah, that's a neat setup. # u #

I have this script for now:

gcc math.js -E -x c | grep # -v > min.js

gcc mdl.js -E -x c | grep # -v >> min.js

gcc 2d.js -E -x c | grep # -v >> min.js

… and so on for all files

Luckily, 'compile'-time is fast (so far), Hit compile button, reload page. Not too annoying.

EDIT:

I managed to generate icosphere.

Not sure what to use it for.

Gift of Death 8 years, 4 months ago

Got me interested but I have maybe 6-10 days to scrap something together.

Maybe if I get an idea for one. This would be great training for JS.

twisterghost 8 years, 4 months ago

If I wasn't already pretty maxed out, I'd take a stab at this. I dunno how much qualifies as a game, but I have a few ideas. Maybe when I find time I'll do it off-timeline.

Astryl 8 years, 4 months ago

I have a bunch of empty screens ready to accept gameplay related stuff. Working on combat encounters at the moment. Basically you'll see a ship appear in your viewport, and will be given engagement options (Using weapons, allocating energy, escaping, etc). So kind of like a turn based RPG in space.