index.html

<html>
<head>
    <title>Game of Life</title>
    <link rel="icon" href="glider.gif" type="image/gif" >
    <style>
        /* inline css for maximum performance ( ͡° ͜ʖ ͡°) */
        body {
            margin: 0;
            padding: 0;
        }
        #canvas {
            height: 100%;
            position: absolute;
            width: 100%;
            z-index: 1;
        }
        #control {
            background: white;
            border-bottom: 1px solid black;
            border-left: 1px solid black;
            min-height: 72px;
            padding: 12px 0;
            position: absolute;
            right: 0;
            text-align: center;
            width: 490px;
            z-index: 2;
        }
        #control button, #control input {
            height: 28px;
            margin-bottom: 12px;
            vertical-align: middle;
        }
        #control input {
            padding-left: 2px;
            width: 60px;
            text-align: center;
        }
        #start {
            padding-bottom: 3px;
        }
        #pause {
            padding-top: 3px;
        }
        #performance {
            right: 12px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="control">
        <button href="#" class="pattern-btn" data-pattern="block">Block</button>
        <button href="#" class="pattern-btn" data-pattern="blinker">Blinker</button>
        <button href="#" class="pattern-btn" data-pattern="toad">Toad</button>
        <button href="#" class="pattern-btn" data-pattern="beacon">Beacon</button>
        <button href="#" class="pattern-btn" data-pattern="pulsar">Pulsar</button>
        <button href="#" class="pattern-btn" data-pattern="glider">Glider</button>
        <button href="#" class="pattern-btn" data-pattern="lwss" title="Light-weight spaceship">LWSS</button>
        <button href="#" class="pattern-btn" data-pattern="gun" title="Gosper glider gun">Gun</button>
        <button href="#" id="clear" disabled>✖</button>

        <br />

        <button href="#" id="start" disabled>▶</button>
        <button href="#" id="pause">⏸</button>
        <button href="#" id="faster">«</button>
        <input type="text" id="speed" disabled value="350ms" title="Evolution time"/>
        <button href="#" id="slower">»</button>

        <input type="text" id="performance" value="" disabled>

        <br />

        <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life" target="_blank">
            Conway's Game of Life
        </a>
    </div>

    <canvas id="canvas"></canvas>

    <script src="script.js"></script>
    <script>
        canvas = document.getElementById('canvas');
        control = document.getElementById('control');
        manager = new Manager(canvas);
        control = new Control(control, manager);

        /* add some known patterns */
        var pattern = patterns['blinker'];
        for(var j=0; j<3; j++) {
            for(var i=0; i<3; i++) {
                manager.addPattern(i*5 + 2, j*5 + 2, pattern);
            }
        }

        var pattern = patterns['toad'];
        for(var j=0; j<3; j++) {
            for(var i=0; i<3; i++) {
                manager.addPattern(i*5 + 2, j*5 + 16, pattern);
            }
        }

        var pattern = patterns['beacon'];
        for(var j=0; j<3; j++) {
            for(var i=0; i<2; i++) {
                manager.addPattern(i*7 + 3, j*6 + 32, pattern);
            }
        }

        var pattern = patterns['block'];
        for(var j=0; j<4; j++) {
            for(var i=0; i<4; i++) {
                manager.addPattern(i*3 + 2, j*3 + 49, pattern);
            }
        }

        var pattern = patterns['lwss'];
        for(var j=0; j<1; j++) {
            for(var i=1; i<9; i++) {
                manager.addPattern(i*12 + 4, j*10 + 6 + (i % 2 == 0), pattern);
            }
        }

        var pattern = patterns['pulsar'];
        for(var j=0; j<3; j++) {
            for(var i=0; i<1; i++) {
                manager.addPattern(i*20 + 25, j*20 + 20, pattern);
            }
        }

        var pattern = patterns['glider'];
        for(var j=0; j<3; j++) {
            for(var i=1; i<9; i++) {
                manager.addPattern(i*8 + 30, j*8 + 30, pattern);
            }
        }

        var pattern = patterns['gun'];
        for(var i=0; i<2; i++) {
            manager.addPattern(i*40 + 55, 18, pattern);
        }

        var pattern = patterns['man'];
        for(var i=0; i<1; i++) {
            manager.addPattern(110, 38, pattern);
        }
    </script>
</body>
</html>