This is a fun little puzzle game with CSS Grid. You have to turn off all the lights, but you can only toggle whole rows and whole columns.
If you get stuck, try the RESET button, or let the computer SOLVE it for you!
NOTE: it's not really a cake, so slightly off topic, but before you can eat the cake, you have to turn off the lights ☺ EDIT: You can easily edit the board dimensions in the HTML. It's a lot easier with a bigger board.
A simple game made in my typical esoteric coding style ☺.
Click on a tile. Adjacent tiles with the same numbers will be removed and the clicked tile's number will be decreased. New numbers fall from the top of the screen. The aim of the game is to get a tile to zero.
Tried to keep it #50lines||less, but I didn't want to make the code less readable than it actually is right now :D still pretty short ;)
UPDATE: I've experienced a bug that caused a number to be decreased twice sometimes in Chrome - it occurs very rarely. I (hopefully) fixed that ☺. Please let me know if that still happens.
| <svg id="symbols" style="display: none"> | |
| <symbol id="square" viewBox="0 0 128 128"> | |
| <path style="fill:none;stroke-width:8px;stroke-linecap:square;" d="M35,43 l0,40 l30,0 l0,-40 l30,0 l0,40" /> | |
| </symbol> | |
| <symbol id="sawtooth" viewBox="0 0 128 128"> | |
| <path style="fill:none;stroke-width:8px;stroke-linecap:square;stroke-linejoin:bevel;" d="M30,80 l30,-40 l0,40 l30,-40 l0,40"/> | |
| </symbol> | |
| <symbol id="triangle" viewBox="0 0 128 128"> | |
| <path style="fill:none;stroke-width:8px;stroke-linecap:square;stroke-linejoin:bevel;" d="M30,80 l17,-40 l17,40 l17,-40 l17,40"/> | |
| </symbol> |
| .game | |
| form | |
| .board | |
| - for(let g = 1; g < 5; g++) | |
| svg.board__line(style=`--x: ${g < 3 ? g : 0}; --y: ${g < 3 ? 0 : g - 2}`) | |
| path(d='M 5 5 L 295 5', fill='none', stroke-width='10', stroke-linecap='round', stroke-dasharray='300', stroke-dashoffset='300') | |
| - for(let x = 0; x < 9; x++) | |
| input(type='checkbox', id=`x--${x}`, style=`--col: ${x % 3}; --row: ${Math.floor(x / 3)}`) | |
| span(style=`--col: ${x % 3}; --row: ${Math.floor(x / 3)}`) | |
| svg.x |
This is a pen where you are walking through the forest. It includes a daylight cycle and shadows, which you can toggle both. You can also set the size and amount of trees in the controls. You can change the color of everything to make it be some alien planet if you want. Enjoy!
A Pen by Griffin Moyer on CodePen.
| <canvas id="canvas"></canvas> | |
| <img id="source" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBARXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAACWKADAAQAAAABAAADfgAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgDfgJYAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMAAgICAgICAwICAwUDAwMFBgUFBQUGCAYGBgYGCAoICAgICAgKCgoKCgoKCgwMDAwMDA4ODg4ODw8PDw8PDw8PD//bAEMBAgICBAQEBwQEBxALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ |
| .wrap | |
| .inner | |
| - 21.times do | |
| .block | |
| .front | |
| .side | |
| .paperboy | |
| .inner | |
| .paperboy.chase | |
| .dog |
| <div id="app"> | |
| <section class="wrapper"> | |
| <h1>The Password Genie</h1> | |
| <div class="password-box"> | |
| <span id="password" class="password" v-on:click="copyToClipboard">{{ password }}</span> | |
| <span class="regenerate-password" v-on:click="generatePassword"></span> | |
| <span class="copy-password" v-on:click="copyToClipboard"></span> | |
| <span class="tooltip" v-if="copied">Password copied successfuly!</span> | |
| </div> | |
| <form @keydown.enter.prevent=""> |