about summary refs log tree commit diff stats
path: root/html/broughlike
diff options
context:
space:
mode:
authorelioat <elioat@tilde.institute>2024-10-20 19:17:36 -0400
committerelioat <elioat@tilde.institute>2024-10-20 19:17:36 -0400
commit8ae93000597f0d14503d7af42e3d6f5e9c15632e (patch)
tree66394fca31081da9530ca383775ec5938443c352 /html/broughlike
parente89532c25f94ebe2860f3912d562556694df57e3 (diff)
downloadtour-8ae93000597f0d14503d7af42e3d6f5e9c15632e.tar.gz
*
Diffstat (limited to 'html/broughlike')
-rw-r--r--html/broughlike/about.html28
-rw-r--r--html/broughlike/index.html46
2 files changed, 60 insertions, 14 deletions
diff --git a/html/broughlike/about.html b/html/broughlike/about.html
new file mode 100644
index 0000000..0811f77
--- /dev/null
+++ b/html/broughlike/about.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Eli's Broughlike</title>
+    <meta description="A Broughlike, or something like Flatland.">
+    <style>
+        body {
+            background-color: #f0f0f0;
+            padding: 1em 2em;
+        }
+    </style>
+</head>
+<body>
+    <h1>How to play</h1>
+    <ul>
+        <li>You are the hexagon.</li>
+        <li>Your goal is to reach the triangle. When you reach the triangle you'll be brought to the next level.</li>
+        <li>Enemies are circles. Run into them to battle. Be warned, you'll also take damage.</li>
+        <li>Diamonds add 3 to the amount of damage you can do to an enemy for the level.</li>
+        <li>Pentagons heal you a little bit.</li>
+        <li>You can tell your or an enemy's health by the opacity of the shape. Darker means more health.</li>
+        <li>Arrow keys, WASD, or VIM movement keys to move on a thing with a keyboard, swipe up, down, left or right to move on something with a touchscreen.</li>
+    </ul>
+    <p><a href="index.html">Play the game!</a></p>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/broughlike/index.html b/html/broughlike/index.html
index fa0894b..335fa89 100644
--- a/html/broughlike/index.html
+++ b/html/broughlike/index.html
@@ -3,7 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Broughlike</title>
+    <title>Eli's Broughlike</title>
+    <meta description="A Broughlike, or something like Flatland.">
     <style>
         body {
             background-color: #f0f0f0;
@@ -21,6 +22,7 @@
     </style>
 </head>
 <body>
+    <p><a href="about.html">About</a></p>
     <canvas id="gameCanvas"></canvas>
     <script>
 
@@ -46,7 +48,7 @@
         const WALLS_MIN = 5;
         const WALLS_MAX = 20;
         const ITEMS_MIN = 0;
-        const ITEMS_MAX = 2;
+        const ITEMS_MAX = 3;
         const DOTS_PER_HIT = 5;
 
         const canvas = document.getElementById('gameCanvas');
@@ -59,7 +61,6 @@
             health: PLAYER_HEALTH,
             score: 0,
             damage: PLAYER_BASE_DAMAGE,
-            bonusDamageTurns: 0,
             totalDamageDone: 0,
             totalDamageTaken: 0,
             cellsTraveled: 0
@@ -118,7 +119,10 @@
 
                 if (
                     (wallX === player.x && wallY === player.y) ||
-                    (wallX === exit.x && wallY === exit.y)
+                    (wallX === exit.x && wallY === exit.y) ||
+                    enemies.some(enemy => enemy.x === wallX && enemy.y === wallY) ||
+                    (wallX === 0 && wallY === 0) || // Don't block the player spawn
+                    items.some(item => item.x === wallX && item.y === wallY)
                 ) continue;
 
                 if (!walls.some(wall => wall.x === wallX && wall.y === wallY)) {
@@ -280,8 +284,7 @@
             if (collectedItem) {
                 if (collectedItem.type === 'diamond') {
                     player.damage += 3;
-                    player.bonusDamageTurns = Math.floor(Math.random() * 6) + 5; // Between 5 and 10 turns
-                    console.log("Collected diamond! +3 damage for " + player.bonusDamageTurns + " turns.");
+                    console.log("Collected diamond! +3 damage on this level.");
                 } else if (collectedItem.type === 'pentagon') {
                     const healAmount = Math.floor(Math.random() * 2) + 1;
                     player.health = Math.min(player.health + healAmount, PLAYER_MAX_HEALTH);
@@ -362,7 +365,7 @@
         }
 
         function handleDamage(player, enemy) {
-            const enemyMisses = Math.random() < 0.2; // 1 in 5 chance to miss
+            const enemyMisses = Math.random() < 0.2; // 1 in 5 chance the enemy misses you
             const cellX = player.x;
             const cellY = player.y;
 
@@ -375,7 +378,7 @@
                 console.log("Enemy missed!");
             }
 
-            enemy.health--;
+            enemy.health = enemy.health - player.damage;
             player.totalDamageDone++;
             addCombatDots(cellX, cellY, COLORS.combatDotEnemy); // Add dots for enemy damage
             console.log("Player hit! Enemy health: " + enemy.health);
@@ -402,32 +405,39 @@
             player.y = 0;
             combatDots = {};
             generateExit();
-            generateWalls();
             generateEnemies();
             generateItems();
+            generateWalls();
             render();
         }
 
         function checkPlayerAtExit() {
             if (player.x === exit.x && player.y === exit.y) {
                 player.score += 1;
-                console.log("Next level! Score: " + player.score);
+                player.damage = PLAYER_BASE_DAMAGE;
+                console.group("Level complete! " + player.score);
+                console.log("Score: " + player.score);
+                console.log("Current health: " + player.health);
+                console.log("Distance Traveled: " + player.cellsTraveled);
+                console.log("Total Damage Dealt: " + player.totalDamageDone);
+                console.log("Total Damage Received: " + player.totalDamageTaken);
+                console.groupEnd();
                 combatDots = {};
                 generateExit();
-                generateWalls();
                 generateEnemies();
                 generateItems();
+                generateWalls();
                 render();
             }
         }
 
         function render() {
             drawGrid();
-            drawWalls();
             drawExit();
             drawItems();
             drawEnemies();
             drawPlayer();
+            drawWalls();
             drawCombatDots();
         }
 
@@ -436,6 +446,14 @@
             ArrowDown: [0, 1],
             ArrowLeft: [-1, 0],
             ArrowRight: [1, 0],
+            w: [0, -1],
+            s: [0, 1],
+            a: [-1, 0],
+            d: [1, 0],
+            h: [-1, 0],
+            j: [0, 1],
+            k: [0, -1],
+            l: [1, 0]
         };
 
         document.addEventListener('keydown', (e) => {
@@ -480,7 +498,7 @@
             }
 
             render();
-        }, { passive: false }); // TIL you can use passive set to false to help make preventDefault work
+        }, { passive: false }); // TIL you can use passive set to false to help make preventDefault actually work? Feels like superstition
 
         const resizeCanvas = () => {
             const rect = canvas.getBoundingClientRect();
@@ -495,9 +513,9 @@
 
         // Initial level setup
         generateExit();
-        generateWalls();
         generateEnemies();
         generateItems();
+        generateWalls();
         render();
     </script>
 </body>