https://github.com/takaneichinose/dungeon-maze-puzzle
This is a simple maze or dungeon escape game, with its functionality made entirely in CSS.
https://github.com/takaneichinose/dungeon-maze-puzzle
8-bit 8bit aseprite css css-only css3 game game-development html html5 maze no-javascript pixel-art pug puzzle puzzle-game retro retrogaming sass scss
Last synced: 2 months ago
JSON representation
This is a simple maze or dungeon escape game, with its functionality made entirely in CSS.
- Host: GitHub
- URL: https://github.com/takaneichinose/dungeon-maze-puzzle
- Owner: takaneichinose
- License: mit
- Created: 2021-11-17T11:48:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-17T13:47:42.000Z (over 3 years ago)
- Last Synced: 2025-02-15T05:25:22.828Z (4 months ago)
- Topics: 8-bit, 8bit, aseprite, css, css-only, css3, game, game-development, html, html5, maze, no-javascript, pixel-art, pug, puzzle, puzzle-game, retro, retrogaming, sass, scss
- Language: SCSS
- Homepage:
- Size: 99.6 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS Only Retro Dungeon Maze Puzzle
## Description
This is a simple maze or dungeon escape game, with its functionality made entirely in CSS.
The main goal of this game is to of course find the finish line.
The main rule of this game is to click the horizontal or vertical tile beside the character. You may not click diagonally.
My tips for you in playing this game; Move slowly, you might get the key without noticing.
## Instructions
This setup is designed to be editable, and to become something like a game engine. As of now, there are only few types of tile may be inserted into the game map. Those are the below, and its usage.
- S -> The starting point.
- F -> Escape door.
- K -> Key to open the locked door.
- L -> Locked door. How to input: L_x-y where x is the x index (of array)
of K, and y is the y index. Array is declared as 2 dimensional array.
- W -> Wall. You can't pass here.
- T -> Tree. You can't pass here.
- B -> Barrel. You can't pass here.
- M -> Monster. Don't go here, you'll lose.
- space -> Tile where you can walk.
I made the images using Aseprite. I've been practicing a lot in creating an 8-bit or pixel art image for a game.
## Resources
[Aseprite](https://www.aseprite.org)
[Creepster Font](https://fonts.google.com/specimen/Creepster)
## Building the program
For my future reference, below is the way in how to build the program.
1. Clone the repository
2. Optional: Install [yarn](https://yarnpkg.com/) as package manager
3. Install the dependencies using yarn ``` # yarn ``` or using npm ``` # npm install ```
4. Build the main program using yarn ``` # yarn build ``` or using npm ``` # npm run build ```
5. At the step above, the distributed program will be produced, and _dist_ folder will be generated. The step from here will be optional if you want to run the program on the localhost.
6. Create a local virtual server using yarn ``` # yarn start ``` or using npm ``` # npm start ```.
7. After building, usually it can accessed at [http://localhost:1234/](http://localhost:1234/).