summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.html57
-rw-r--r--life.js127
2 files changed, 139 insertions, 45 deletions
diff --git a/index.html b/index.html
index f206848..ef98e2e 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/life.js b/life.js
index 81077e4..086175d 100644
--- a/life.js
+++ b/life.js
@@ -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();
}