diff options
| -rw-r--r-- | html/broughlike/about.html | 28 | ||||
| -rw-r--r-- | html/broughlike/index.html | 46 |
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> |