From 8478bc66e7573dce9fc36d53df21c5bf1b4673c6 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Sun, 5 Jan 2025 01:59:00 +0100 Subject: [PATCH] snake framework --- secret/snake/game.js | 87 +++++++++++++++++++ secret/snake/index.html | 48 +++++++++++ secret/snake/styles.css | 185 ++++++++++++++++++++++++++++++++++++++++ secret/snake/styles.js | 60 +++++++++++++ 4 files changed, 380 insertions(+) create mode 100644 secret/snake/game.js create mode 100644 secret/snake/index.html create mode 100644 secret/snake/styles.css create mode 100644 secret/snake/styles.js diff --git a/secret/snake/game.js b/secret/snake/game.js new file mode 100644 index 0000000..d300a86 --- /dev/null +++ b/secret/snake/game.js @@ -0,0 +1,87 @@ +'use strict'; + +// Get references to the buttons +const upButton = document.getElementById("up"); +const downButton = document.getElementById("down"); +const leftButton = document.getElementById("left"); +const rightButton = document.getElementById("right"); +const startButton = document.getElementById("start"); +const aButton = document.getElementById("a"); +const bButton = document.getElementById("b"); + +// Game variables +let snake; +let apple; +let gameInterval; +let isGameRunning = false; + +// Initialize the game +function initGame() { + snake = [{ x: 10, y: 10 }]; + apple = spawnApple(); + isGameRunning = true; + gameInterval = setInterval(gameLoop, 100); +} + +// Game loop +function gameLoop() { + updateSnake(); + checkCollisions(); + render(); +} + +// Spawn an apple at a random position +function spawnApple() { + return { + x: Math.floor(Math.random() * 20), + y: Math.floor(Math.random() * 20), + }; +} + +// Update the snake's position +function updateSnake() { + // Logic to move the snake based on direction + // This is where you would handle the snake's movement +} + +// Check for collisions with walls, itself, or apple +function checkCollisions() { + // Logic to check for collisions +} + +// Render the game state +function render() { + // Logic to render the snake and apple on the screen +} + +// Button event listeners +upButton.addEventListener("click", () => { + // Logic to move the snake up +}); + +downButton.addEventListener("click", () => { + // Logic to move the snake down +}); + +leftButton.addEventListener("click", () => { + // Logic to move the snake left +}); + +rightButton.addEventListener("click", () => { + // Logic to move the snake right +}); + +startButton.addEventListener("click", () => { + if (!isGameRunning) { + initGame(); + } +}); + +// Additional button functionalities for A and B +aButton.addEventListener("click", () => { + // Logic for A button (e.g., pause or special action) +}); + +bButton.addEventListener("click", () => { + // Logic for B button (e.g., reset or another action) +}); diff --git a/secret/snake/index.html b/secret/snake/index.html new file mode 100644 index 0000000..b860b0f --- /dev/null +++ b/secret/snake/index.html @@ -0,0 +1,48 @@ + + + + + + Snake - Game + + + +
+ +
+
+

Snake - Game

+
+

Description

+

Eat as many apples and grow as much as possible

+

◀ or A or arrow left = move left

+

▶ or D or arrow right = move right

+

▲ or W or arrow up = move up

+

▼ or S or arrow down = move down

+
+
+
+ + +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+ + + + diff --git a/secret/snake/styles.css b/secret/snake/styles.css new file mode 100644 index 0000000..6d676d3 --- /dev/null +++ b/secret/snake/styles.css @@ -0,0 +1,185 @@ +body, +html { + margin: 0; + padding: 0; + font-family: monospace; + background-color: #3a2d56; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.gameboy { + background-color: #5900ff; + width: 441px; + height: 735px; + border-radius: 20px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); + display: flex; + flex-direction: column; + align-items: center; + padding: 10px; + position: relative; +} + +@media(max-width: 768px) { + .gameboy { + width: 100vw; + height: 100vh; + border-radius: 0; + } +} + +.screen { + background-color: black; + border: 4px solid #0f380f; + width: 90%; + height: 55%; + margin-top: 20px; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); + overflow: hidden; +} + +h1 { + font-size: 2rem; + margin-bottom: 10px; + text-transform: uppercase; + align-items: center; + justify-content: center; + text-align: center; + color: #9bbc0f; +} + +.description, +.description p, +.description h1 { + align-items: center; + justify-content: center; + text-align: center; + font-size: 1.2rem; + margin: 0 auto; + padding: 0 auto; + color: #ffffff; +} + +.controls { + margin-top: 20px; + display: flex; + justify-content: space-between; + width: 80%; + align-items: center; +} + +.dpad { + position: relative; + width: 120px; + height: 120px; +} + +.dpad-btn { + background-color: #0f380f; + color: #9bbc0f; + border: none; + border-radius: 5px; + position: absolute; + width: 42px; + height: 42px; + font-size: 1.5rem; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + z-index: 1; +} + +.dpad-btn.up { + top: 0; + left: 50%; + transform: translateX(-50%); +} + +.dpad-btn.down { + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.dpad-btn.left { + top: 50%; + left: 0; + transform: translateY(-50%); +} + +.dpad-btn.right { + top: 50%; + right: 0; + transform: translateY(-50%); +} + +.dpad-center { + background-color: #0f380f; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + border: 2px solid #9cbc0f00; + z-index: 0; + border-radius: 5px; +} + +.action-buttons { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 200px; +} + +.btn { + background-color: #0f380f; + color: #9bbc0f; + border: 2px solid #9bbc0f; + border-radius: 50%; + width: 60px; + height: 60px; + font-size: 1.8rem; + cursor: pointer; + transition: transform 0.1s, background-color 0.2s; +} + +.btn:hover { + background-color: #9bbc0f; + color: #0f380f; +} + +.btn:active { + transform: scale(0.9); +} + +.start-btn { + background-color: #0f380f; + color: #9bbc0f; + border: 2px solid #9bbc0f; + border-radius: 5px; + width: 100px; + height: 40px; + font-size: 1.2rem; + cursor: pointer; + transition: transform 0.1s, background-color 0.2s; + margin-bottom: 20px; +} + +.start-btn:hover { + background-color: #9bbc0f; + color: #0f380f; +} + +.start-btn:active { + transform: scale(0.9); +} diff --git a/secret/snake/styles.js b/secret/snake/styles.js new file mode 100644 index 0000000..6706f60 --- /dev/null +++ b/secret/snake/styles.js @@ -0,0 +1,60 @@ +'use strict'; +const aBtn = document.querySelector('#a'); +const bBtn = document.querySelector('#b'); +const gameboy = document.querySelector('.gameboy'); +const html = document.documentElement; +const body = document.body; +const dpadButtons = document.querySelectorAll('.dpad-btn'); +const dpadCenter = document.querySelector('.dpad-center'); // Darker variant +const actionButtons = document.querySelectorAll('.btn'); + +const colors = [ + { gameboyColor: '#B39DDB', htmlColor: '#D1C4E9', buttonColor: '#673AB7', buttonTextColor: '#FFFFFF', dpadCenterColor: '#5E35B1' }, + { gameboyColor: '#FFC107', htmlColor: '#FFF9C4', buttonColor: '#FF9800', buttonTextColor: '#000000', dpadCenterColor: '#EF6C00' }, + { gameboyColor: '#8BC34A', htmlColor: '#C5E1A5', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#E64A19' }, + { gameboyColor: '#F44336', htmlColor: '#FFCDD2', buttonColor: '#E91E63', buttonTextColor: '#FFFFFF', dpadCenterColor: '#C2185B' }, + { gameboyColor: '#03A9F4', htmlColor: '#BBDEFB', buttonColor: '#FFEB3B', buttonTextColor: '#000000', dpadCenterColor: '#0277BD' }, + { gameboyColor: '#FF7043', htmlColor: '#FFCCBC', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#D84315' }, + { gameboyColor: '#9C27B0', htmlColor: '#E1BEE7', buttonColor: '#7B1FA2', buttonTextColor: '#FFFFFF', dpadCenterColor: '#6A1B9A' }, + { gameboyColor: '#FFD700', htmlColor: '#FFF9C4', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF', dpadCenterColor: '#F57F17' }, + { gameboyColor: '#009688', htmlColor: '#B2DFDB', buttonColor: '#4CAF50', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00796B' }, + { gameboyColor: '#795548', htmlColor: '#D7CCC8', buttonColor: '#9E9E9E', buttonTextColor: '#000000', dpadCenterColor: '#5D4037' }, + { gameboyColor: '#FF5733', htmlColor: '#FFCCCB', buttonColor: '#C70039', buttonTextColor: '#FFFFFF', dpadCenterColor: '#B71C1C' }, + { gameboyColor: '#00BCD4', htmlColor: '#B2EBF2', buttonColor: '#00ACC1', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00838F' } +]; + +let currentColorIndex = localStorage.getItem('gameboyColorIndex') ? parseInt(localStorage.getItem('gameboyColorIndex')) : 0; + +function updateGameBoyColor() { + gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; + html.style.backgroundColor = colors[currentColorIndex].htmlColor; + body.style.backgroundColor = colors[currentColorIndex].htmlColor; + + dpadButtons.forEach(button => { + button.style.backgroundColor = colors[currentColorIndex].buttonColor; + button.style.color = colors[currentColorIndex].buttonTextColor; + }); + + // Using darker dpad center color + dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; + dpadCenter.style.color = colors[currentColorIndex].buttonTextColor; + + actionButtons.forEach(button => { + button.style.backgroundColor = colors[currentColorIndex].buttonColor; + button.style.color = colors[currentColorIndex].buttonTextColor; + }); +} + +aBtn.addEventListener('click', () => { + currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; + localStorage.setItem('gameboyColorIndex', currentColorIndex); + updateGameBoyColor(); +}); + +bBtn.addEventListener('click', () => { + currentColorIndex = (currentColorIndex + 1) % colors.length; + localStorage.setItem('gameboyColorIndex', currentColorIndex); + updateGameBoyColor(); +}); + +updateGameBoyColor();