alvov / the-monsters-vault-game

3d horror game made with CSS 3d transforms

The monster's vault game

Story

You find yourself locked in some sort of a creepy dungeon in the pitch darkness. You don't remember how you got here (because I'm too lazy to make up this part of the story). Anyway, the only way out is through this metal door ahead of you, and you need to find out how to open it.

And by the way, what's inside those boxes?..

How to play

Push down the levers to open doors. You can guess where the opened door is by the sound it makes (use your headphones).
Don't get caught by the monster! You can also guess its position and direction by the sound it makes.

Play the game (you need a desktop browser, Chrome would be the best choice at the moment of writing this)

Controls

Keyboard

W — move forward
S — move backward
A — move left
D — move right
Mouse/Touchpad — look around
SHIFT — run
E — interact with stuff
Q — quit to main menu

Gamepad (Xbox 360/One, wired)

Left stick — move around
Right stick — look around
Right trigger — run
X — interact with stuff
Back — quit to main menu
A — select item in menu
B — go up one level in menu

Motivation

• Make a 3d (well, more like 2.5d) horror game with CSS 3d transforms only
• Use React/Redux/Webpack 2/Tape stack
• Try out various web APIs and interfaces like:
  • Pointer Lock events
  • Web Audio API
  • Gamepad API
  • Service Workers
  • KeyboardEvent Interface
• Use SVG lighting filters for textures (also as a test of my laptop's cooling system)

Features

• No canvases
• 3d positioned audio (use your headphones)
• Gamepad support
• Offline support (after first launch)
• Level generator:
  

Credits

• Inspired by — the famous CSS 3d scene by @keithclarkcouk

• Textures — https://freestocktextures.com/ by @PinkOnHead and @PawelWoz

• Sounds effects

  • http://www.littlerobotsoundfactory.com/
  • http://www.bigsoundbank.com/
  • http://opengameart.org/

• Xbox controller driver for MacOs — 360Controller on GitHub