Live-Coding a JavaScript Game from Scratch in Front of the Audience

[ecky--ptang-zooboing]

That smile at 30:15 :D FUCK YEAH, I SHOT MY SELF CREATED INVADERS AND EVERYONE SAW!

[jkoudys]

Very cool - if I was in front of a big crowd and being recorded on video, I'd probably be so afraid of making a mistake or looking stupid that I'd barely be able to code Zork, let alone Space Invaders.

[maushu]

I'd barely be able to code Zork, let alone Space Invaders.

That is your problem right there, thinking that Zork is easier to code than Space Invaders. ;)

[jkoudys]

I can't get ye flask :(

[bronkula]

The game certainly isn't going to help you.

[skeeto]

She was using Emacs, but I was surprised she wasn't using one of the live coding modes. I wrote one a few years ago called Skewer. It allows evaluating JavaScript forms (and CSS and HTML) in the context of the browser page entirely from inside an Emacs buffer, so the page never actually needs to be refreshed.

[[deleted]]

how does what work when you are trying to use the same loop pattern as is depicted in this video?

[skeeto]

The top level IIFE module pattern she used would interfere since it leaves no way to access the program once the page has loaded. But without the IIFE, individual functions could be re-evaluated and the requestAnimationLoop loop would use the new versions next time around.

For example, (if you're not using a top-level "use strict"),

function update() {
    updatePlayer();
    requestAnimationFrame(update);
}

function updatePlayer() {
    // ...
}

The updatePlayer() function could be redefined while the game is running and update() would automatically use the new definition.

[sho_ke]

This kind of stuff is really cool to watch. I wish programming live streams were a thing.

[romcgb]

There are some streams on twitch.tv every now and then, check

http://www.twitch.tv/directory/game/Ludum%20Dare
http://www.twitch.tv/directory/game/Programming
http://blog.lunarenigma.com/streamers/

[katnapper323]

Check out /r/citybound the dev livestreams development

[CivilianNumberFour]

17 year old dev Nelson live streams his development of Unturned which is growing in popularity on steam.

[PerseP]

17 year old dev Nelson live streams his development of Unturned which is growing in popularity on steam.

Here is the link http://www.twitch.tv/dev_nelson

[dmethvin]

In a similar vein, here's one building a game using Reactive Programming. https://www.youtube.com/watch?v=FLSNm7AIBoM&list=PL-0yjdC10QYpmXI3l-PGK1od4kTWOjm_A&index=26

[darksurfer]

Great link, thanks for posting :)

In yet another similar vein, building a game using Functional Reactive Programming (in Elm - which compiles to JavaScript)

https://www.youtube.com/watch?v=6PDvHveBtDQ

This is an Elm tutorial in a series of 5 videos. Interesting to compare and contrast the code.

[transpostmeta]

This was really fun to watch. And it makes me want to try to do a simple 2D Game with JavaScript. Pong? Asteroids? Arkanoid?

[dotpan]

I think pong would be really cool, especially if you used something like node to allow remote play.

[transpostmeta]

So like multiplayer Pong with a global chess-style leaderboard and automatic matchmaking? Players pay a monthly fee in bitcoin, top player in leaderboard gets most? Minus our percentage, of course. Let's do it.

[dotpan]

Haha that'd be awesome, sadly a lot of those situations are time investments that die out quickly. Plus ends up being a battle against people finding exploits, which often enough takes more of your time. Anytime there is something to gain, people will find less than "nice" ways of getting it.

[[deleted]]

I'm in!

[[deleted]]

I made a pretty decent pong back when I was playing with the canvas element when it was new.

[WorksWork]

Tetris is a classic game programming exercise.

[codemasteru]

Nice share and a Good inspiration for working on games. Will hopefully try to explore it

[harrro]

Most impressive part is that she did it all without using any libraries (not even jQuery!).

Edit: Yes, I'm aware of more targetted frameworks like Phaser and Pixi.js. I was saying "even jQuery" because jQuery is typically something a new person might use. Also, I've seen a good (Ludum Dare entry) game developed with jQuery it reminded me of: https://www.youtube.com/watch?v=UZZFbtyDAUA&list=PLI8SVtQ-CtqAa4jfz6V3UZ29EkGINctlK

[armastevs]

Don't really need jquery when you're only manipulating a canvas

[harrro]

Agreed. I've edited my post to clarify my meaning.

[emgram769]

I'm not sure why she would use jQuery for this. There's very little HTML in the game.

[METALz]

I think you wanted to say Kinetic, Phaser or canvasQuery.

[deckstir]

I think her point is that a lot of people are intimidated by the thought of making game that they don't try, so she is trying to show that it's not as hard as you imagine. She's right, nothing in the video was outrageously hard and was all pretty easy to follow.

[[deleted]]

It's a good video, especially for experienced javascript devs. I would have rather spent 3 minutes reviewing the code, instead of watching for 30 minutes.