Implement colors, and let the user kill a random walker

index.html

@@ -9,8 +9,9 @@
   <p>as in i am repeatedly breaking stuff all the time</p>
   <p>code modified from <a href="https://jackmckew.dev/interactive-random-walkers-with-javascript.html">https://jackmckew.dev/interactive-random-walkers-with-javascript.html</a></p>
 
-  <button id="button-new-walker">make a new one</button>
+  <button id="button-create-walker">make a new guy</button>
-  <button id="button-reset">kill them all :(</button>
+  <button id="button-destroy-walker">kill one :(</button>
+  <button id="button-reset-walkers">kill them all D:</button>
 
   <div id="canvas-container">
   <canvas id="walker-canvas"></canvas>

walkers.js

@@ -2,23 +2,43 @@
  * Buttons that interact with the UI                                        *
  ****************************************************************************/
 
+// a rainbow-adjacent set of colors for the walkers to cycle through
+var walker_colors = [
+  "#33FF00", // green, also from https://superuser.com/a/1206781
+  "#0033ff", // blue
+  "#a553fc", // purple
+  "#FF2E00", // red
+  "#FFB000", // amber, also from https://superuser.com/a/1206781. this is the default color used, so it is last in the array.
+];
+var color_idx = 0;
+
 function create_new_walker() {
   var my_row = Math.floor(Math.random() * n_rows);
   var my_col = Math.floor(Math.random() * n_cols);
-  // TODO: CHOOSE COLOR, ONLY DO IT IN SEQUENCE FROM A LIST OF KNOWN-GOOD
+  var my_color = walker_colors[color_idx];
-  // COLORS. THE SEQUENCE WILL BE FINE.
+  // TODO: ADD SPEED TO THIS WHOLE DEAL
-  var my_color = "#FFB000";
   walkers.push({row: my_row, col: my_col, color: my_color});
+  color_idx = (color_idx + 1).mod(walker_colors.length);
 }
 
-function reset() {
+function destroy_random_walker() {
-  // kill all the walkers and trails
+  // destroy a random walker.
-  walkers.splice(0, walkers.length);
+  // we can't get the trail, that'll have to fade on its own
-  trails.splice(0, trails.length);
+  var choice = Math.floor(Math.random() * walkers.length);
+  var removed = walkers.splice(choice, 1);
+
+  // hide where the walker used to be
+  draw_grid_square(removed[0].row, removed[0].col, "black");
+}
+
+function destroy_all_walkers() {
+  // kill all the walkers, but not their trails -- i like the look better
+  var removed = walkers.splice(0, walkers.length);
 
   // draw black everywhere on the canvas to hide the dead bodies D:
-  ctx.fillStyle = "black";
+  for (var i = 0; i < removed.length; i++) {
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
+    draw_grid_square(removed[i].row, removed[i].col, "black");
+  }
 }
 
 /****************************************************************************
@@ -185,11 +205,16 @@ var ctx = canvas.getContext('2d')
 canvas.width  = window.innerWidth;
 canvas.height = window.innerHeight;
 
-// find the UI buttons and give them click handlers to activate
+// find the UI buttons and give them click handlers to activate our functions
-var reset_btn = document.getElementById("button-reset");
+document
-var new_walker_btn = document.getElementById("button-new-walker");
+  .getElementById("button-create-walker")
-reset_btn.addEventListener("click", reset);
+  .addEventListener("click", create_new_walker);
-new_walker_btn.addEventListener("click", create_new_walker);
+document
+  .getElementById("button-destroy-walker")
+  .addEventListener("click", destroy_random_walker);
+document
+  .getElementById("button-reset-walkers")
+  .addEventListener("click", destroy_all_walkers);
 
 // compute the initial rows and columns
 var cell_size = 22;