Initial Release

pancakz-v2-crossroads/public/secret/sprites/main.css

@@ -0,0 +1,94 @@
+:root {
+    --accent: #4d58ff;
+}
+
+body {
+    background-color: black;
+    padding: 0;
+    margin: 0;
+}
+
+a,
+p {
+    display: inline-block;
+    font-family: 'Poppins', sans-serif;
+    line-height: 1.5em;
+    font-weight: 400;
+    color: #f0f0f0;
+    padding: 0 16px;
+    margin: 0;
+    text-align: justify;
+    box-sizing: border-box;
+}
+
+/* Layout */
+
+div.layout-section {
+    width: 100%;
+    max-width: 640px;
+    margin: 16px auto;
+    padding: 16px;
+    box-sizing: border-box;
+    display: grid;
+    gap: 16px;
+}
+
+img.article-banner {
+    width: 100%;
+    image-rendering: pixelated;
+    aspect-ratio: 3.4;
+}
+
+/* Effects */
+
+.effect-caution {
+    position: relative;
+    border: 4px solid var(--accent);
+    background-color: black;
+    margin-bottom: 12px;
+    margin-right: 12px;
+}
+
+.effect-caution::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: -16px;
+    bottom: -16px;
+    box-sizing: border-box;
+    filter: brightness(0.5);
+    background: repeating-linear-gradient(45deg, var(--accent) 0, var(--accent) 8px, black 8px, black 16px);
+    clip-path: polygon(calc(100% - 11px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 11px), calc(100% - 11px) calc(100% - 11px));
+}
+
+.effect-rhombus {
+    position: relative;
+    font-weight: 500;
+    padding: 0 16px;
+    z-index: 1;
+    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);
+}
+
+.effect-rhombus::before {
+    position: absolute;
+    content: '';
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    background: var(--accent);
+    z-index: -1;
+}
+
+/* Mobile */
+@media only screen and (max-width: 600px) {
+    div.layout-section {
+        margin: 0;
+    }
+
+    .effect-caution::before {
+        display: none;
+    }
+}

pancakz-v2-crossroads/public/secret/sprites/main.js

@@ -0,0 +1,69 @@
+(() => {
+    /** @type {HTMLAudioElement | null} */
+    const soundActive = document.querySelector('audio#active')
+    /** @type {HTMLAudioElement | null} */
+    const soundBounce = document.querySelector('audio#bounce')
+    /** @type {HTMLCanvasElement | null} */
+    const canvas = document.querySelector('canvas#sprites')
+
+    if (canvas && soundActive && soundBounce) {
+
+        const RENDER_WIDTH = 256, RENDER_HEIGHT = 256, GRAVITY = 0.67, BOUNCE = 0.75, JUMP = 8, COUNT = 3
+        const TEXTURE_WIDTH = 68, TEXTURE_HEIGHT = 78, TEXTURE_SCALE = 0.5
+        const TEXTURE = new Image()
+        const SPRITES = new Array()
+        const OFFSET = (RENDER_WIDTH - (COUNT * (TEXTURE_WIDTH * TEXTURE_SCALE))) / COUNT
+
+        for (let i = 0; i < COUNT; i++) {
+            SPRITES.push({
+                x: (OFFSET / 2) + (OFFSET * i) + ((TEXTURE_WIDTH * TEXTURE_SCALE) * i),
+                v: 0,
+                y: 0
+            })
+        }
+
+        const ctx = canvas.getContext('2d')
+        TEXTURE.src = `data:image/gif;base64,R0lGODlhRABOAPAAAAAAAFJSUiH5BAUKAAAALAAAAABEAE4AAAL/hI+pF+0P45p0uQqi3hD79CjcSF6fZzLlyp1iCrKy5KphPOe3SyP6D0N1fMBioGYxKpFE5ZKZcTqR0urxZM0Ks9Utd1r5WimksFgzKWNy5FHavZ61W0m6eeXt4TYfVp9fBxhX8of2AjeoVrjTZHenmNcQKPiIGHm1RzkHmRhkQHhp2Mlo47hpeUr66TeJV6kadaaZCSurdSjVmIsLtjrG++TbBQzUamT887arWxQqR1s8qkOcLM0GXR0rWRqNbZvN/N3NLd7sXf4cjn59vg7a7o4qHJ+uTs85f+8Krz/E3+9JG0B8AgeaymdQlL2EnhgSdCivIMSAE2dJrIgMI7mKPow4OvJICaRCkXpI+rvokdpEZezSTYvyj5SMjWq20ZS3D6Ggjjkz2sy05RwVPTxgQTk6NCDSpYt+Mn2aB0EBADs=`
+        canvas.style.imageRendering = 'pixelated'
+        canvas.style.width = `${RENDER_WIDTH}px`
+        canvas.style.height = `${RENDER_HEIGHT}px`
+        canvas.width = RENDER_WIDTH
+        canvas.height = RENDER_HEIGHT
+        soundBounce.playbackRate = 2
+        soundBounce.volume = 0.5
+
+        canvas.addEventListener('click', () => {
+            for (let i = 0; i < COUNT; i++) {
+                SPRITES[i].v += JUMP + (Math.random() * (JUMP / 2))
+            }
+        })
+
+        setInterval(() => {
+            ctx.clearRect(0, 0, RENDER_WIDTH, RENDER_HEIGHT)
+            for (let i = 0; i < SPRITES.length; i++) {
+                let oy = (RENDER_HEIGHT - (TEXTURE_HEIGHT * TEXTURE_SCALE))
+                let s = SPRITES[i]
+                s.v -= GRAVITY
+                s.y += s.v
+
+                if (s.y < 0) {
+                    s.y = 0
+                    s.v = -s.v * BOUNCE
+                    if (Math.abs(s.v) < 0.8) {
+                        s.v = 0
+                    } else {
+                        soundBounce.currentTime = 0
+                        soundBounce.play()
+                    }
+                }
+
+                ctx.drawImage(TEXTURE, s.x,
+                    oy - s.y,
+                    TEXTURE_WIDTH * TEXTURE_SCALE,
+                    TEXTURE_HEIGHT * TEXTURE_SCALE
+                )
+            }
+        }, 1000 / 60);
+
+    }
+})()