Hacker News new | past | comments | ask | show | jobs | submit login
Conway's Game of Life in HTML5 (simon.lc)
26 points by simonlc on Oct 14, 2012 | hide | past | favorite | 22 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.


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.


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.


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%...



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|
or

    |_|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. :)




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: