diff --git a/experiments/index.html b/experiments/index.html new file mode 100644 index 0000000..d35c0ee --- /dev/null +++ b/experiments/index.html @@ -0,0 +1,256 @@ + + + + + + 404 - rungus zone + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + rungus.zone + +
+ + + + + + +
+ + + +
+
+ +
+
+ + + blog + + + + rungnews + + + + randomizer + + + + time + + + + type here + + + + cow advice + +
+
+
+ + + back home + +
+
+ + + + +
+
+
+ + + rungus.zone + + +
+
+ +
+ + + +
+
+
+ + + rz + + +
+
+ +
+ + + +
+ +
+ +
+ +
+

experiments

+
+ + + +
+ + +
+
+
+

hey what's up

+

this section is some programming experiments i've done

+
+

that's cool what do you have

+

there'll be a list here someday +

+
+
+
+ +
+ + legal - + cdn + © rungus +
+
+ +
+ + diff --git a/experiments/snake.html b/experiments/snake.html new file mode 100644 index 0000000..4506786 --- /dev/null +++ b/experiments/snake.html @@ -0,0 +1,13 @@ + + + + Snake Game + + + + + + + diff --git a/experiments/snake/snake.css b/experiments/snake/snake.css new file mode 100644 index 0000000..d4c1184 --- /dev/null +++ b/experiments/snake/snake.css @@ -0,0 +1,79 @@ +/* Import Google font */ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Open Sans', sans-serif; +} +body { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: #E3F2FD; +} +.wrapper { + width: 65vmin; + height: 70vmin; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + border-radius: 5px; + background: #293447; + box-shadow: 0 20px 40px rgba(52, 87, 220, 0.2); +} +.game-details { + color: #B8C6DC; + font-weight: 500; + font-size: 1.2rem; + padding: 20px 27px; + display: flex; + justify-content: space-between; +} +.play-board { + height: 100%; + width: 100%; + display: grid; + background: #212837; + grid-template: repeat(30, 1fr) / repeat(30, 1fr); +} +.play-board .food { + background: #FF003D; +} +.play-board .head { + background: #60CBFF; +} + +.controls { + display: none; + justify-content: space-between; +} +.controls i { + padding: 25px 0; + text-align: center; + font-size: 1.3rem; + color: #B8C6DC; + width: calc(100% / 4); + cursor: pointer; + border-right: 1px solid #171B26; +} + +@media screen and (max-width: 800px) { + .wrapper { + width: 90vmin; + height: 115vmin; + } + .game-details { + font-size: 1rem; + padding: 15px 27px; + } + .controls { + display: flex; + } + .controls i { + padding: 15px 0; + font-size: 1rem; + } +} \ No newline at end of file diff --git a/experiments/snake/snake.js b/experiments/snake/snake.js new file mode 100644 index 0000000..e4709bb --- /dev/null +++ b/experiments/snake/snake.js @@ -0,0 +1,51 @@ +// Get canvas element and its context +const canvas = document.getElementById("gameCanvas"); +const ctx = canvas.getContext("2d"); + +// Snake variables +let snake = [{ x: 200, y: 200 }]; +let dx = 0; +let dy = 0; +const snakeSize = 20; + +// Game loop +function gameLoop() { + clearCanvas(); + moveSnake(); + drawSnake(); +} + +// Function to clear the canvas +function clearCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); +} + +// Function to draw the snake +function drawSnake() { + snake.forEach((segment) => { + ctx.fillStyle = "green"; + ctx.fillRect(segment.x, segment.y, snakeSize, snakeSize); + }); +} + +// Function to move the snake +function moveSnake() { + const head = { x: snake[0].x + dx, y: snake[0].y + dy }; + snake.unshift(head); + snake.pop(); +} + +// Set up event listeners for keyboard input +document.addEventListener("keydown", changeDirection); + +// Function to handle keyboard input +function changeDirection(event) { + const keyPressed = event.key; + // Update direction based on arrow keys + // For example: + // if (keyPressed === "ArrowUp" && dy !== 20) { dx = 0; dy = -20; } + // Add similar conditions for other arrow keys +} + +// Start the game loop +setInterval(gameLoop, 100); // Adjust the interval for the desired speed