diff options
| author | Chun Li <chunli.developer@gmail.com> | 2018-12-21 23:33:11 -0500 |
|---|---|---|
| committer | Chun Li <chunli.developer@gmail.com> | 2018-12-21 23:33:11 -0500 |
| commit | 823a946e8aa04df74dcafd09ceb9bb6492b7d0c8 (patch) | |
| tree | 93f062e140c35bced41c05a786e3c267d7f3d417 | |
| parent | f629fbb43b9d64e4bcd401941e49f5bdf8351179 (diff) | |
| -rw-r--r-- | index.html | 57 | ||||
| -rw-r--r-- | life.js | 127 |
2 files changed, 139 insertions, 45 deletions
@@ -2,17 +2,56 @@ <html> <head> <meta charset="UTF-8"> - <link rel="stylesheet" type="text/css" href="theme.css"> + <style> + body { + margin: 0; + } + + #controls { + position: absolute; + bottom: 30px; + left: 50px; + } + button { + padding-top: 5px; + margin-right: 10px; + } + + .text-btn { + position: relative; + bottom: 5px; + } + + .label { + font-weight: bold; + line-height: 2.4em; + } + </style> + <script src="https://unpkg.com/feather-icons"></script> </head> <body> - <canvas id="canvas"></canvas> - <br /> - <button onClick="startGame()">Start</button> - <button onClick="randomize()">Randomize</button> - <button onClick="cleanGame()">Clear</button> - <button onClick="glider()">Glider</button> - <button onClick="update()">Next</button> - <button onClick="stopGame()">Stop</button> + <canvas id="canvas">This requires HTML canvas to view.</canvas> + <div id="controls"> + <button onClick="toggleRun()"> + <i id="start-pause-icon" class="icon" data-feather="play"></i> + </button> + <button onClick="update()"> + <i class="icon" data-feather="arrow-right"></i> + </button> + <button onClick="randomize()"> + <i class="icon" data-feather="shuffle"></i> + </button> + <button onClick="cleanGame()"> + <i class="icon" data-feather="trash"></i> + </button> + <button class='text-btn' onClick="glider()"> + <span class="label">Glider</span> + </button> + <button class='text-btn' onClick="gun()"> + <span class="label">Gun</span> + </button> + </div> <script src="life.js"></script> + <script>feather.replace()</script> </body> </html> @@ -2,18 +2,17 @@ let canvas = document.querySelector("#canvas"); var ctx = canvas.getContext("2d"); -var running = false; +// undefined if not running, otherwise is some object +var running = undefined; var UPDATE_INTERVAL = 100; // time between updates in ms var CELL_SIZE = 10; // 10x10px cell size // game grid size -var WIDTH = 100; -var HEIGHT = 50; -var CANVAS_WIDTH = CELL_SIZE * WIDTH; -var CANVAS_HEIGHT = CELL_SIZE * HEIGHT; -canvas.width = CANVAS_WIDTH; -canvas.height = CANVAS_HEIGHT; -var BACKGROUND_COLOR="#ffffff"; -var CELL_COLOR="#427df4"; +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; +var WIDTH = Math.floor(canvas.width/CELL_SIZE); +var HEIGHT = Math.floor(canvas.height/CELL_SIZE); +var BACKGROUND_COLOR="#681b3c"; +var CELL_COLOR="#baab23"; // 2d array containing cells // 0 is dead, 1 is alive @@ -44,22 +43,6 @@ function cleanGame() { paint(); } -// Puts a random glider in somewhere -function glider() { - let start_row = getRandomInt(HEIGHT-5) + 2; - let start_col = getRandomInt(WIDTH-5) + 3; - let glider = [[start_row, start_col], - [start_row+1, start_col+1], - [start_row+1, start_col+2], - [start_row, start_col+2], - [start_row-1, start_col+2]]; - for (i in glider) { - let coords = glider[i]; - grid[coords[0]][coords[1]] = 1; - } - paint(); -} - function initGrid() { let arr = new Array(HEIGHT); for (let i = 0; i < arr.length; i++) { @@ -127,17 +110,13 @@ function update() { } grid = new_grid; - // paint to canvas + // paint to canvas and set next timeout paint(); - - if (running === true) { - setTimeout(update, UPDATE_INTERVAL); - } } function paint() { ctx.fillStyle = BACKGROUND_COLOR; - ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); + ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = CELL_COLOR; for (let i = 0; i < grid.length; i++) { @@ -149,11 +128,87 @@ function paint() { } } -function startGame() { - running = true; - setTimeout(update, UPDATE_INTERVAL); +// Starts or stops the game (toggles running) +function toggleRun() { + let icon = document.getElementById('start-pause-icon'); + if (running === undefined) { + icon.setAttribute('data-feather', 'pause'); + running = setInterval(update, UPDATE_INTERVAL); + } else { + icon.setAttribute('data-feather', 'play'); + clearInterval(running); + running = undefined; + } + feather.replace(); } -function stopGame() { - running = false; +// Puts a random glider in somewhere +function glider() { + let start_row = getRandomInt(HEIGHT-5) + 2; + let start_col = getRandomInt(WIDTH-5) + 3; + let glider = [[start_row, start_col], + [start_row+1, start_col+1], + [start_row+1, start_col+2], + [start_row, start_col+2], + [start_row-1, start_col+2]]; + for (i in glider) { + let coords = glider[i]; + grid[coords[0]][coords[1]] = 1; + } + paint(); +} + +// Puts a random glider gun in somewhere +function gun() { + let gun = [ + // first square + [5, 1], + [5, 2], + [6, 1], + [6, 2], + // C shape + [3, 13], + [3, 14], + [4, 12], + [5, 11], + [6, 11], + [7, 11], + [8, 12], + [9, 13], + [9, 14], + // arrow shape + [6, 15], + [4, 16], + [8, 16], + [5, 17], + [6, 17], + [7, 17], + [6, 18], + // "frog" shape + [3, 21], + [4, 21], + [5, 21], + [3, 22], + [4, 22], + [5, 22], + [2, 23], + [6, 23], + [1, 25], + [2, 25], + [6, 25], + [7, 25], + // second square + [3, 35], + [4, 35], + [3, 36], + [4, 36], + ]; + + let start_row = getRandomInt(HEIGHT-10) + 1; + let start_col = getRandomInt(WIDTH-43) + 1; + for (i in gun) { + let coords = gun[i] + grid[start_row + coords[0]][start_col + coords[1]] = 1; + } + paint(); } |