diff --git a/README.md b/README.md index 992b022..d01d317 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,51 @@ # Doom Nukem CSS -3D shooter written with HTML/CSS/Typescript that renders via CSS transforms, no canvas 😅 +3D shooter written with HTML/CSS/Typescript that renders scene using HTML and CSS, no canvas 😅 -## Control +![main](documentation_assets/main.gif) +[Live demo](https://yurkagon.github.io/Doom-Nukem-CSS/) -`WASD (or arrows)` - to move +Its not playable like a normal game, the whole level is empty but anyway I guess it should be an interesting thing :) -`QE (or mouse)` - to rotate the camera +## Features -`Mouse left button` - to shoot +- Doom-like menu 😎 +- Camera +- Player movement +- Levels +- Collision (for player or enemies) +- Sprites +- Enemies +- Weapons (only 2 ones: pistol and shotgun) +- Shooting +- Health +- Night level +## Technologies used + +The Doom like menu is built by React + +To manipulate with the 3D level I use only JQuery + +### Rendering + +Everything you see is built by HTML5 \
+ +![div-structure](documentation_assets/div-structure.png) + +![wall-example](documentation_assets/wall-example.png) + +### Night level + +![night-level](documentation_assets/night-level.gif) + +## Also + +- [Check my Raycasting engine written in HTML using React](https://github.com/yurkagon/ReactCasting) + +## Contributors + + + + diff --git a/documentation_assets/div-structure.png b/documentation_assets/div-structure.png new file mode 100644 index 0000000..7280693 Binary files /dev/null and b/documentation_assets/div-structure.png differ diff --git a/documentation_assets/main.gif b/documentation_assets/main.gif new file mode 100644 index 0000000..6b21013 Binary files /dev/null and b/documentation_assets/main.gif differ diff --git a/documentation_assets/night-level.gif b/documentation_assets/night-level.gif new file mode 100644 index 0000000..88ec3fd Binary files /dev/null and b/documentation_assets/night-level.gif differ diff --git a/documentation_assets/wall-example.png b/documentation_assets/wall-example.png new file mode 100644 index 0000000..b390e56 Binary files /dev/null and b/documentation_assets/wall-example.png differ diff --git a/src/classes/Settings/Settings.ts b/src/classes/Settings/Settings.ts index bc7b9cd..923daeb 100644 --- a/src/classes/Settings/Settings.ts +++ b/src/classes/Settings/Settings.ts @@ -2,9 +2,13 @@ import { observable } from "mobx"; import { LevelName } from "classes/Level"; class Settings { - public productionMode = false; + public productionMode = true; + + /* + disabled because of low speed + */ + @observable public wall_shadow = false; - @observable public wall_shadow = true; @observable public backgroundMusic = true; @observable public noclip: boolean = true; @@ -13,7 +17,7 @@ class Settings { @observable public enemy_ai: boolean = true; public skipMenuOnLoad: boolean = true; - public developmentAutoLoadLevel: LevelName = "level_2"; + public developmentAutoLoadLevel: LevelName = "level_1"; public positionDebugger: boolean = false; public savePosition: boolean = true; diff --git a/src/classes/Sprite/style.scss b/src/classes/Sprite/style.scss index 653a46e..6dfcb3f 100644 --- a/src/classes/Sprite/style.scss +++ b/src/classes/Sprite/style.scss @@ -1,4 +1,6 @@ .sprites { + transform-style: preserve-3d; + .sprite-cont { transform-style: preserve-3d; diff --git a/src/classes/Wall/style.scss b/src/classes/Wall/style.scss index 9635be5..2cda651 100644 --- a/src/classes/Wall/style.scss +++ b/src/classes/Wall/style.scss @@ -1,3 +1,7 @@ +@mixin pseudo-shadow { + filter: brightness(0.5); +} + .wall { transform-style: preserve-3d; } @@ -9,7 +13,7 @@ backface-visibility: hidden; - image-rendering: initial; + image-rendering: pixelated; } .wall__face--front { @@ -17,6 +21,7 @@ } .wall__face--right { transform: rotateY(90deg) translateZ(50px); + @include pseudo-shadow; } .wall__face--back { transform: rotateY(180deg) translateZ(50px); @@ -25,6 +30,8 @@ .wall__face--left { transform: rotateY(-90deg) translateZ(50px); background-position-x: 51px; + + @include pseudo-shadow; } // textures