inspired from this tweet https://twitter.com/robbietilton/status/1316811565874651136 skull model from https://sketchfab.com/3d-models/skull-planes-2363b34481234eab996d6a5c3f7ee3fa
Vineeth Viswanathan vineeth-pappu
🥇
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'> | |
| <div id="identity-holder"> | |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdMAAADvCAYAAACpMT7PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkI1QjkyRjNFNkYyMTFFMzgwQzlCQTQ2NzQ5MDYyODEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5k |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id='root'></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <button class="cybr-btn"> | |
| Cyber<span aria-hidden>_</span> | |
| <span aria-hidden class="cybr-btn__glitch">Cyber_</span> | |
| <span aria-hidden class="cybr-btn__tag">R25</span> | |
| </button> | |
| <button class="cybr-btn"> | |
| Buttons<span aria-hidden>_</span> | |
| <span aria-hidden class="cybr-btn__glitch">Buttons_</span> | |
| <span aria-hidden class="cybr-btn__tag">R25</span> | |
| </button> |
vineeth-pappu
/ houdini-white-noise-button.markdown
Created
January 26, 2021 06:08
Houdini White Noise Button 😎
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="instructions"> | |
| <div class="content"> | |
| <p>Stack the blocks on top of each other</p> | |
| <p>Click, tap or press Space when a block is above the stack. Can you reach the blue color blocks?</p> | |
| <p>Click, tap or press Space to start game</p> | |
| </div> | |
| </div> | |
| <div id="results"> | |
| <div class="content"> | |
| <p>You missed the block</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div id="score"></div> | |
| <canvas id="game" width="375" height="375"></canvas> | |
| <div id="introduction">Hold down the mouse to stretch out a stick</div> | |
| <div id="perfect">DOUBLE SCORE</div> | |
| <button id="restart">RESTART</button> | |
| </div> | |
| <a id="youtube" href="https://youtu.be/eue3UdFvwPo" target="_blank"> | |
| <span>See how this game was made</span> |
No libraries, no preprocessors, no imports not even SVG or canvas. Just plain HTML, CSS, and JavaScript. Check out the source code, for detailed comments.
If you want to know how this game was made, watch the quick introduction for it on YouTube that explains the main game logic and the transitioning effect.
Follow me on Twitter for more
vineeth-pappu
/ crossy-road-with-three-js.markdown
Created
January 26, 2021 06:23
Crossy Road with three.js
An interactive tech demo inspired by Crossy Road using three.js where I put together a scene with an orthographic camera that follows the player, a few simplified 3D objects with some texture, lights and shadows, and a basic game logic that randomly generates a level that you can walk through.
You control an air balloon that flies above a forest. Hold down the mouse to raise the balloon, but watch out for the fuel and trees. The lower you fly the less fuel you use, but if you bump into a tree, the game ends. Good luck!
HTML Canvas tutorial walking through the source code of this game:
Follow me on twitter for more: https://twitter.com/HunorBorbely