Conway's Game of Life in HTML5 | Hacker News Reader

Conway's Game of Life in HTML5

simon.lc

26 pointssimonlc22 comments

To the author: have you tried making the board wrap around instead of having an impenetrable border? In my experience it looks better and keeps interesting things happening longer :)

Sounds like it could be fun, I'll try it out and push the change if it works well. Ultimately I would like to add a way to have an 'infinite' field, but this might be easier to implement. Thanks for the feedback.

Neat! :D

Minified JavaScript :(

But from one Simon (canvas lover) to another I decided to chewing through the plastic bars of minification to see what was going on. In your loop you're doing:

    beginPath()
    arc()
    fill()

You could get away with nothing but arc() and moveTo() in your loop instead and make it a bit more efficient on slower (mobile) devices, because only one new path has to get created.

Your moveTo's x coordinate is going to need to be offset by the radius since thats where each starts. So it would look something like this:

    s.beginPath()
    loop start
        s.moveTo(10 * b + 5 + 4, 10 * c + 5)
        s.arc(10 * b + 5, 10 * c + 5, 4, 0, 2 * Math.PI, d)
    loop end
    s.fill()

I didn't try out the code, just typing in the open air here, but it should work.

Hi fellow Simon, I do link to the code on github, for anyone that wants to look at it in full. Here it is again: https://gist.github.com/3889013

That's a great tip! I love little optimizations like that, thanks for the input. :)

I just tried this, and it doesn't work as expected. With a stroke it might, but with fill, it leaks.

It would be easier, if clicking and dragging filled all the cells in the mouse-path with life. Without this, it is very cumbersome to initiate the cells.

Great work, btw! Now everyone can play the game of life! :)

I tried making this initially but had trouble. I will try to revisit it soon though.

As per some feedback, I've added a random button, and some initial life, for those that don't know what to create. I'm still working on some of the other things people have suggested:

  - Saving the state of the 'creation stage' 
    and resetting it when the player clicks a restart button. 
    So you can experiment without having to redraw everything.
  - Wrapping cells around border (think Super Mario Bros 2.)
  - Easier drawing, using click and drag.

For those that have already tried it will likely need to clear their cache with ctrl+f5.

Another one we discussed a while ago:

http://willbailey.name/conway/index.html

The discussion: http://news.ycombinator.com/item?id=2555071

The annotated source: http://willbailey.name/conway/docs/conway.html

The methuselahs[1] always amazed me in Conway's Game of Life. If anyone's interested, here's the population growth (number of live cells in a given state) of the R-pentomino: http://i.imgur.com/lR3i9.png

[1] http://en.wikipedia.org/wiki/Methuselah_(cellular_automata)

A random button would be a fun way to get started.

I think I'll add a 'Create Life' button that adds a random known pattern.

Hey I was promised HTML5! What's with all this Javascript?!

As a side note, posted on HN the other day: https://www.google.com.au/search?hl=en&q=conways%20game%...

My own attempt: http://www.julianpulgarin.com/canvaslife/

That's really cool! Can't stare at it for too long though, the colors are too bold for me. I like the amount of presets you have, I'm new to this game, it's very cool to see all these things.

I have a few ideas that I want to try and implement next week, hopefully to differentiate the game's everyone's been sharing.

A couple of fun patterns:

    .**
    **.
    .*.


    .*.
    ..*
    ***

  ***.
  *..*
  .*.*
  ..**

If you put the second one directly next to itself some cool stuff happens

doesn't work here with firefox 16.0.1 on linux (adblock and noscript is disabled)

I'm on the same version, I haven't tested on Linux. Could the problem be that you aren't creating the initial cells? Try drawing this pattern in the center before clicking start:

    |0|0|0|
    |0|_|0|
    |0|_|0|

    |_|0|_|
    |_|_|0|
    |0|0|0|

It's somewhat unintuitive. I also had just pressed play at first. Then I read the text and added a bunch of unconnected dots. Nothing. Only after reading your comment above have I understood how it works.

Yes, I'm working on an update that adds something interesting from the start, and a better explanation of how to play. Thanks for the feedback. :)

Reply on news.ycombinator.com