❄️ FrozenPaths

FrozenPaths is a fun, interactive map editor and maze game set in a chilly, snowy world. Design your own maze, place tiles, and test your pathfinding skills.

Live site: https://frozenpaths.netlify.app

---

✨ Features

• Custom Map Editor: Create your own square maps with ease
• Tile Palette: Drag-and-drop different tiles including ice, rocks, trees, and start/end points
• Flexible Map Size: Set the number of tiles per side to fit your desired challenge
• Save & Load Maps: Download your custom maps as .txt files and reload them anytime
• Expandable Tiles: Add new tiles by placing more images in assets and updating the tileMapping dictionary in js/utils.js

---

🎮 How to Play

FrozenPaths is a top-down maze game where you guide your character from the Start to the End while avoiding obstacles.

Controls

• Arrow Keys – Move your character up, down, left, or right.
• Mouse – Use in the map editor to place tiles.

Objective

• Start at the Start Tile (marked 99).
• Reach the End Tile (marked 98) without colliding with obstacles like rocks, trees, or bears.
• If you reach the end, you win! 🎉
• To play again, reload the site.

Map Editor

You can create and customize your own maps:

1. Open the Map Editor modal.
2. Enter the size of the map (width = height).
3. Use the tile palette to paint tiles onto the canvas.
4. Start (99) and End (98) tiles are required and only one of each can exist.
5. Click Save Map to download your custom map.

You can add more tiles by adding new images and their paths to js/utils.js under tileMapping.

---

🛠️ Technologies

• HTML5 Canvas – For rendering the map and game
• JavaScript ES6 Modules – Clean modular code (map-editor.js, game.js, etc.)
• CSS3 – Modern styling with flexbox, grid, and gradients

---

🧩 Adding More Tiles

To expand the game:

1. Add your tile image in assets/
2. Add a corresponding entry in js/utils.js under tileMapping:

export const tileMapping = {
  1: 'assets/tiles/frozenflowers/frozenflower1.png',
  2: 'assets/tiles/frozenflowers/frozenflower2.png',
  3: 'assets/tiles/icecracks/icecrack1.png',
  ...
  15: 'assets/tiles/snowman.png',
  98: 'assets/bear/bear1.png', // end tile
  99: 'assets/map-editor/startTile.png' // start tile
  // Add more tiles here (key = two digit number, value = path of img relative to root of project)
};

🚀 Deployment

This project can be deployed anywhere static files are hosted. Currently live on Netlify