Description:
In the history of computer games, some games have created and carried whole companies on their shoulders. One of those games is certainly Mario Bros. The Mario character first appeared in the game Donkey Kong and became very famous within its own game series starting with the original Mario in a 3D-pixel grid. in 1983. Nowadays a lot of spin-offs and 3D jumps and runs are being produced centering the Mario character. In this article, we will develop a very simple Super Mario clone, which is easily extendible with new items, enemies, heroes, and of course levels.
The code of the game itself will be written in object-oriented JavaScript. Now that sounds like a trap since JavaScript is a prototype-based scripting language, however, there are multiple object-oriented patterns possible. We will investigate some code that will give us some object-oriented constraints. This will be very useful to stay in the same pattern throughout the whole coding.
HTML:
<!-- sorry if your browser blew up -->
<div scene style="--size: 50vmin">
<div rotation animate="true">
<div center-z>
<div grid style="--dimension: 16">
<!--l: layers counted from bottom to top -->
<!--r: row counted from back to front -->
<!--c: column counted from left to right -->
<div layer style="--l: 1">
<div pixel style="--r: 6; --c: 3; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 6; --c: 4; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 6; --c: 5; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 6; --c: 6; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 6; --c: 11; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 6; --c: 12; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 6; --c: 13; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 6; --c: 14; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 7; --c: 3; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 7; --c: 6; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 7; --c: 11; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 7; --c: 14; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 8; --c: 3; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 8; --c: 6; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 8; --c: 11; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 8; --c: 14; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 9; --c: 3; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 9; --c: 6; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 9; --c: 11; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 9; --c: 14; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 10; --c: 3; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 10; --c: 6; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 10; --c: 11; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 10; --c: 14; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 11; --c: 3; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 11; --c: 4; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 11; --c: 5; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 11; --c: 6; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 11; --c: 11; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 11; --c: 12; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 11; --c: 13; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 11; --c: 14; --color: var(--shoes)"><span></span></div>
</div>
<div layer style="--l: 2">
<div pixel style="--r: 6; --c: 4; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 6; --c: 5; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 6; --c: 6; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 6; --c: 11; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 6; --c: 12; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 6; --c: 13; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 7; --c: 4; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 7; --c: 6; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 7; --c: 11; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 7; --c: 13; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 8; --c: 4; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 8; --c: 6; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 8; --c: 11; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 8; --c: 13; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 9; --c: 4; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 9; --c: 6; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 9; --c: 11; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 9; --c: 13; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 10; --c: 4; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 10; --c: 5; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 10; --c: 6; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 10; --c: 11; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 10; --c: 12; --color: var(--shoes)"><span></span></div>
<div pixel style="--r: 10; --c: 13; --color: var(--shoes)"><span></span></div>
</div>
<div layer style="--l: 3">
<div pixel style="--r: 6; --c: 5; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 11; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 12; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 7; --c: 5; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 7; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 7; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 7; --c: 12; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 8; --c: 5; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 8; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 8; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 8; --c: 12; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 9; --c: 5; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 9; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 9; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 9; --c: 12; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 5; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 11; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 12; --color: var(--pants)"><span></span></div>
</div>
<div layer style="--l: 4">
<div pixel style="--r: 6; --c: 5; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 11; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 12; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 7; --c: 3; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 7; --c: 4; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 7; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 7; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 7; --c: 13; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 7; --c: 14; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 8; --c: 3; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 8; --c: 4; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 8; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 8; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 8; --c: 13; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 8; --c: 14; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 3; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 4; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 9; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 9; --c: 13; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 14; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 10; --c: 5; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 12; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 5; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 11; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 12; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 5; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 11; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 12; --color: var(--pants)"><span></span></div>
</div>
<div layer style="--l: 5">
<div pixel style="--r: 6; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 11; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 7; --c: 3; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 7; --c: 4; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 7; --c: 5; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 7; --c: 12; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 7; --c: 13; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 7; --c: 14; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 8; --c: 3; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 8; --c: 14; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 3; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 4; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 5; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 12; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 13; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 14; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 10; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 11; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 11; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 11; --color: var(--pants)"><span></span></div>
</div>
<div layer style="--l: 6">
<div pixel style="--r: 6; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 11; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 7; --c: 3; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 7; --c: 4; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 7; --c: 5; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 12; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 13; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 7; --c: 14; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 8; --c: 3; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 8; --c: 14; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 3; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 4; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 5; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 12; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 13; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 9; --c: 14; --color: var(--hands)"><span></span></div>
<div pixel style="--r: 10; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 11; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 11; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 6; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 7; --color: var(--buttons)"><span></span></div>
<div pixel style="--r: 12; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 10; --color: var(--buttons)"><span></span></div>
<div pixel style="--r: 12; --c: 11; --color: var(--pants)"><span></span></div>
</div>
<div layer style="--l: 7">
<div pixel style="--r: 6; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 7; --c: 3; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 4; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 5; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 6; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 11; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 12; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 13; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 14; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 8; --c: 3; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 8; --c: 14; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 3; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 4; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 5; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 6; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 11; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 12; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 13; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 14; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 10; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 8; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 9; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 12; --c: 10; --color: var(--pants)"><span></span></div>
</div>
<div layer style="--l: 8">
<div pixel style="--r: 6; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 8; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 6; --c: 9; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 6; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 7; --c: 4; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 5; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 6; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 11; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 12; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 13; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 8; --c: 4; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 8; --c: 13; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 4; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 5; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 6; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 11; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 12; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 13; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 10; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 11; --c: 8; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 11; --c: 9; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 11; --c: 10; --color: var(--pants)"><span></span></div>
</div>
<div layer style="--l: 9">
<div pixel style="--r: 6; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 6; --c: 8; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 6; --c: 9; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 6; --c: 10; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 7; --c: 5; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 6; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 11; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 7; --c: 12; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 8; --c: 5; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 8; --c: 12; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 5; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 6; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 11; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 9; --c: 12; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 10; --c: 7; --color: var(--pants)"><span></span></div>
<div pixel style="--r: 10; --c: 8; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 10; --c: 9; --color: var(--shirt)"><span></span></div>
<div pixel style="--r: 10; --c: 10; --color: var(--pants)"><span></span></div>
</div>
<div layer style="--l: 10">
<div pixel style="--r: 6; --c: 6; --color: var(--head)"><span></span></div>
<div pixel style="--r: 6; --c: 7; --color: var(--head)"><span></span></div>
<div pixel style="--r: 6; --c: 8; --color: var(--head)"><span></span></div>
<div pixel style="--r: 6; --c: 9; --color: var(--head)"><span></span></div>
<div pixel style="--r: 6; --c: 10; --color: var(--head)"><span></span></div>
<div pixel style="--r: 6; --c: 11; --color: var(--head)"><span></span></div>
<div pixel style="--r: 7; --c: 6; --color: var(--head)"><span></span></div>
<div pixel style="--r: 7; --c: 11; --color: var(--head)"><span></span></div>
<div pixel style="--r: 8; --c: 6; --color: var(--head)"><span></span></div>
<div pixel style="--r: 8; --c: 11; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 6; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 11; --color: var(--head)"><span></span></div>
<div pixel style="--r: 10; --c: 6; --color: var(--head)"><span></span></div>
<div pixel style="--r: 10; --c: 11; --color: var(--head)"><span></span></div>
<div pixel style="--r: 11; --c: 6; --color: var(--head)"><span></span></div>
<div pixel style="--r: 11; --c: 7; --color: var(--head)"><span></span></div>
<div pixel style="--r: 11; --c: 8; --color: var(--head)"><span></span></div>
<div pixel style="--r: 11; --c: 9; --color: var(--head)"><span></span></div>
<div pixel style="--r: 11; --c: 10; --color: var(--head)"><span></span></div>
<div pixel style="--r: 11; --c: 11; --color: var(--head)"><span></span></div>
</div>
<div layer style="--l: 11">
<div pixel style="--r: 5; --c: 5; --color: var(--head)"><span></span></div>
<div pixel style="--r: 5; --c: 6; --color: var(--head)"><span></span></div>
<div pixel style="--r: 5; --c: 7; --color: var(--head)"><span></span></div>
<div pixel style="--r: 5; --c: 8; --color: var(--head)"><span></span></div>
<div pixel style="--r: 5; --c: 9; --color: var(--head)"><span></span></div>
<div pixel style="--r: 5; --c: 10; --color: var(--head)"><span></span></div>
<div pixel style="--r: 5; --c: 11; --color: var(--head)"><span></span></div>
<div pixel style="--r: 5; --c: 12; --color: var(--head)"><span></span></div>
<div pixel style="--r: 6; --c: 5; --color: var(--head)"><span></span></div>
<div pixel style="--r: 6; --c: 12; --color: var(--head)"><span></span></div>
<div pixel style="--r: 7; --c: 5; --color: var(--head)"><span></span></div>
<div pixel style="--r: 7; --c: 12; --color: var(--head)"><span></span></div>
<div pixel style="--r: 8; --c: 5; --color: var(--head)"><span></span></div>
<div pixel style="--r: 8; --c: 12; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 5; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 9; --c: 12; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 10; --c: 5; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 10; --c: 6; --color: var(--head)"><span></span></div>
<div pixel style="--r: 10; --c: 7; --color: var(--head)"><span></span></div>
<div pixel style="--r: 10; --c: 10; --color: var(--head)"><span></span></div>
<div pixel style="--r: 10; --c: 11; --color: var(--head)"><span></span></div>
<div pixel style="--r: 10; --c: 12; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 11; --c: 5; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 11; --c: 6; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 11; --c: 7; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 11; --c: 10; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 11; --c: 11; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 11; --c: 12; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 12; --c: 6; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 12; --c: 7; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 12; --c: 8; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 12; --c: 9; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 12; --c: 10; --color: var(--mustache)"><span></span></div>
<div pixel style="--r: 12; --c: 11; --color: var(--mustache)"><span></span></div>
</div>
<div layer style="--l: 12">
<div pixel style="--r: 4; --c: 4; --color: var(--head)"><span></span></div>
<div pixel style="--r: 4; --c: 5; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 6; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 7; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 8; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 9; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 10; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 11; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 12; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 13; --color: var(--head)"><span></span></div>
<div pixel style="--r: 5; --c: 5; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 5; --c: 12; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 6; --c: 5; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 6; --c: 12; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 7; --c: 5; --color: var(--head)"><span></span></div>
<div pixel style="--r: 7; --c: 12; --color: var(--head)"><span></span></div>
<div pixel style="--r: 8; --c: 5; --color: var(--head)"><span></span></div>
<div pixel style="--r: 8; --c: 12; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 5; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 6; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 7; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 10; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 11; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 12; --color: var(--head)"><span></span></div>
<div pixel style="--r: 10; --c: 8; --color: var(--nostrils)"><span></span></div>
<div pixel style="--r: 10; --c: 9; --color: var(--nostrils)"><span></span></div>
<div pixel style="--r: 11; --c: 8; --color: var(--head)"><span></span></div>
<div pixel style="--r: 11; --c: 9; --color: var(--head)"><span></span></div>
<div pixel style="--r: 12; --c: 8; --color: var(--head)"><span></span></div>
<div pixel style="--r: 12; --c: 9; --color: var(--head)"><span></span></div>
<div pixel style="--r: 13; --c: 8; --color: var(--head)"><span></span></div>
<div pixel style="--r: 13; --c: 9; --color: var(--head)"><span></span></div>
</div>
<div layer style="--l: 13">
<div pixel style="--r: 4; --c: 4; --color: var(--head)"><span></span></div>
<div pixel style="--r: 4; --c: 5; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 6; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 7; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 8; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 9; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 10; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 11; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 12; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 13; --color: var(--head)"><span></span></div>
<div pixel style="--r: 5; --c: 5; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 5; --c: 12; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 6; --c: 5; --color: var(--head)"><span></span></div>
<div pixel style="--r: 6; --c: 12; --color: var(--head)"><span></span></div>
<div pixel style="--r: 7; --c: 5; --color: var(--head)"><span></span></div>
<div pixel style="--r: 7; --c: 12; --color: var(--head)"><span></span></div>
<div pixel style="--r: 8; --c: 5; --color: var(--head)"><span></span></div>
<div pixel style="--r: 8; --c: 12; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 6; --color: var(--pupils)"><span></span></div>
<div pixel style="--r: 9; --c: 7; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 10; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 11; --color: var(--pupils)"><span></span></div>
<div pixel style="--r: 10; --c: 8; --color: var(--head)"><span></span></div>
<div pixel style="--r: 10; --c: 9; --color: var(--head)"><span></span></div>
<div pixel style="--r: 11; --c: 8; --color: var(--head)"><span></span></div>
<div pixel style="--r: 11; --c: 9; --color: var(--head)"><span></span></div>
<div pixel style="--r: 12; --c: 8; --color: var(--head)"><span></span></div>
<div pixel style="--r: 12; --c: 9; --color: var(--head)"><span></span></div>
</div>
<div layer style="--l: 14">
<div pixel style="--r: 4; --c: 5; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 6; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 7; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 8; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 9; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 10; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 11; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 4; --c: 12; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 5; --c: 5; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 5; --c: 12; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 6; --c: 5; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 6; --c: 12; --color: var(--hair)"><span></span></div>
<div pixel style="--r: 7; --c: 5; --color: var(--head)"><span></span></div>
<div pixel style="--r: 7; --c: 12; --color: var(--head)"><span></span></div>
<div pixel style="--r: 8; --c: 5; --color: var(--head)"><span></span></div>
<div pixel style="--r: 8; --c: 12; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 6; --color: var(--eyes)"><span></span></div>
<div pixel style="--r: 9; --c: 7; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 10; --color: var(--head)"><span></span></div>
<div pixel style="--r: 9; --c: 11; --color: var(--eyes)"><span></span></div>
<div pixel style="--r: 10; --c: 8; --color: var(--head)"><span></span></div>
<div pixel style="--r: 10; --c: 9; --color: var(--head)"><span></span></div>
</div>
<div layer style="--l: 15">
<div pixel style="--r: 4; --c: 6; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 4; --c: 7; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 4; --c: 8; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 4; --c: 9; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 4; --c: 10; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 4; --c: 11; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 5; --c: 5; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 5; --c: 12; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 6; --c: 5; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 6; --c: 12; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 7; --c: 5; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 7; --c: 12; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 8; --c: 5; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 8; --c: 12; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 9; --c: 5; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 9; --c: 12; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 10; --c: 5; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 10; --c: 6; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 10; --c: 7; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 10; --c: 10; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 10; --c: 11; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 10; --c: 12; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 11; --c: 5; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 11; --c: 6; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 11; --c: 7; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 11; --c: 8; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 11; --c: 9; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 11; --c: 10; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 11; --c: 11; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 11; --c: 12; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 12; --c: 6; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 12; --c: 7; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 12; --c: 8; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 12; --c: 9; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 12; --c: 10; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 12; --c: 11; --color: var(--cap)"><span></span></div>
</div>
<div layer style="--l: 16">
<div pixel style="--r: 5; --c: 6; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 5; --c: 7; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 5; --c: 8; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 5; --c: 9; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 5; --c: 10; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 5; --c: 11; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 6; --c: 6; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 6; --c: 7; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 6; --c: 8; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 6; --c: 9; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 6; --c: 10; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 6; --c: 11; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 7; --c: 6; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 7; --c: 7; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 7; --c: 8; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 7; --c: 9; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 7; --c: 10; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 7; --c: 11; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 8; --c: 6; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 8; --c: 7; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 8; --c: 8; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 8; --c: 9; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 8; --c: 10; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 8; --c: 11; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 9; --c: 6; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 9; --c: 7; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 9; --c: 8; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 9; --c: 9; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 9; --c: 10; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 9; --c: 11; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 10; --c: 6; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 10; --c: 7; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 10; --c: 8; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 10; --c: 9; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 10; --c: 10; --color: var(--cap)"><span></span></div>
<div pixel style="--r: 10; --c: 11; --color: var(--cap)"><span></span></div>
</div>
</div>
</div>
</div>
</div>CSS:
/* colors */
:root{
--shoes: #974806;
--pants: #0071C1;
--hands: #F3F3F3;
--shirt: #FE0000;
--buttons: #FFD700;
--head: #FCD5B4;
--mustache: #060606;
--hair: #060606;
--nostrils: #060606;
--cap: #FE0000;
--eyes: #F3F3F3;
--pupils: #0071C1;
}
/* page setup */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
body { height: 100vh; display: grid; place-items: center; background-color: #1D1E22 }
/* scene set-up */
[scene], [rotation], [center-z] { display: grid }
[scene] :not(:empty) { transform-style: preserve-3d }
[scene] { width: var(--size); perspective: calc(var(--size) * 2); aspect-ratio: 1 }
/* rotate/animate scene */
[rotation][animate="true"] { animation: rotateScene 10s linear infinite }
@keyframes rotateScene{ to { transform: rotateY(360deg) } }
[rotation] { transform: rotateX(-0deg) }
/* position contents to z-center */
[center-z] { transform: translateZ(calc(var(--size) * .5)) }
/* grid */
[grid] {
display: grid;
grid-template-columns: repeat(var(--dimension), 1fr);
grid-template-rows: repeat(var(--dimension), 1fr);
}
/* layer */
[layer] { display: contents}
/* pixel */
[pixel] {
--pixel-size: calc(var(--size) / var(--dimension));
grid-row: calc(var(--dimension) - var(--l) + 1);
grid-column: var(--c);
--row: calc(var(--dimension) - var(--r));
--translateZ: translateZ(calc(var(--pixel-size) * var(--row) * -1));
transform: var(--translateZ);
background-color: var(--color);
}
/* sides set up */
[pixel], [pixel] > span { display: grid; }
[pixel] > span { background-color: inherit; transform-style: preserve-3d }
[pixel]::before, [pixel]::after, [pixel] > span::before, [pixel] > span::after { content: ""; background-color: inherit }
[pixel]::before, [pixel]::after, [pixel] > span, [pixel] > span::before, [pixel] > span::after { grid-area: 1/1 }
/*sides orientation*/
[pixel]::before { transform-origin: left; transform: rotateY(90deg) } /*left*/
[pixel]::after { transform-origin: right; transform: rotateY(-90deg) } /*right*/
[pixel] > span { transform: translateZ(calc(var(--pixel-size) * -1)) } /*back*/
[pixel] > span::before { transform-origin: top; transform: rotateX(90deg) } /*top*/
[pixel] > span::after { transform-origin: bottom; transform: rotateX(-90deg) } /*bottom*/
/* shading */
[pixel]::after{ background-image: linear-gradient(rgb(0 0 0 / .25) 100%, transparent) }/*right*/
[pixel] > span::after { background-image: linear-gradient(rgb(0 0 0 / .375) 100%, transparent) }/*bottom*/
/*lighting*/
[pixel]::before { background-image: linear-gradient(rgb(255 255 255 / .25) 100%, transparent) }/*left*/
[pixel] > span::before { background-image: linear-gradient(rgb(255 255 255 / .375) 100%, transparent) }/*top*/
/* floor */
[grid]::after{
content: "";
grid-area: 1/1/-1/-1;
border-radius: 50%;
opacity: 0.5;
--neg-half-size: calc(var(--size) / -2);
transform: rotateX(90deg) translateZ(var(--neg-half-size)) translateY(var(--neg-half-size));
--pixel-size: calc(var(--size) / var(--dimension) * 4);
--clr1: #C6F7C6;
--clr2: #128408;
--clr3: #30C730;
--clr4: #218721;
background-image: conic-gradient( var(--clr1) 90deg , var(--clr2) 0 180deg , var(--clr3) 0 270deg, var(--clr4) 0 360deg);
background-size: var(--pixel-size) var(--pixel-size);
box-shadow: 0 0 5vmin 0 black, 0 0 50vmax 0 rgb(255 255 255 / .8);
}HTML,CSS and JavaScript Code Snippets On, AllWebCodes.com
Done! And Enjoy Mario in 3D-pixel grid Snippets
Mario in 3D-pixel grid (css) in HTML and CSS