Home > conway.js

conway.js

Conway.js is a project mainly written in JavaScript, based on the MIT license.

Conway's game of life implementation using javascript and canvas.

Conway.js

What?

A implementation of Conways Game Of Life in javascript with a html5 canvas renderer and hopefully a pure css renderer soon.

Why?

I wrote it in C ages ago and decided to spend a few hours porting, might make a cool background for my website.

Demo

demo

Usage

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="conway.js"></script>
    <script type="text/javascript" src="conwayui.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        /* Create and init pool. */
        var pool = new Pool(250, 150);
        pool.locked = true;
        pool.init_pool_rand();

        /* Bind some event buttons to interact with it. */
        $('#startbutton').click(function() {
            if(pool.locked) {
                pool.locked = false;
                $('#startbutton').html('stop');
            } else {
                pool.locked = true;
                $('#startbutton').html('start');
            }
        });
        $('#clearbutton').click(function() {
            pool.init_pool_clear();
        });
        $('#randbutton').click(function() {
            pool.init_pool_rand();
        });

        /* Update text box every pool comp cycle. */
        pool.CompDone = function() {
            $('#genbox').html('Generation: ' + pool.generations);
        };

        /* Call the jquery plugin to render it. */
        $('#display').conway(pool, 50, "rgb(255,180,0)");
    });
    </script>
</head>
<body>
    <div id="header"><img src="logo.png" alt="conway.JS"/></div>
    <canvas id="display" width="1000" height="600"></canvas>
    <div>
        <div id="genbox">Generation: 0</div>
        <button id="startbutton" type="button">start</button>
        <button id="randbutton" type="button">rand</button>
        <button id="clearbutton" type="button">clear</button>
    </div>
</body>
</html>