e1blue

Flow #2

Flow #1

🌳 A walk through the forest 🌲

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.

License.

Get to zero

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.

	<ul class="nav">
	<li onclick="showLogin()">Login</li>
	<li onclick="showSignup()">Sign up</li>
	<li onclick="showForgotPassword()">Forgot password</li>
	<li onclick="showSubscribe()">Subscribe</li>
	<li onclick="showContactUs()">Contact us</li>
	</ul>
	<div class="wrapper">
	<div class="rec-prism">
	<div class="face face-top">

	<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="">

	.wrap
	.inner
	- 21.times do
	.block
	.front
	.side
	.paperboy
	.inner
	.paperboy.chase
	.dog

	.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

	<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>

	<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