Merge pull request 'Please master patrick fix this mess' (#27) from sageTheDm/pages:main into main
Reviewed-on: https://interstellardevelopment.org/code/code/interstellar_development/interstellar_website/pulls/27
This commit is contained in:
commit
35aad0589e
11 changed files with 273 additions and 131 deletions
BIN
secret/snake/audio/dead.mp3
Normal file
BIN
secret/snake/audio/dead.mp3
Normal file
Binary file not shown.
BIN
secret/snake/audio/down.mp3
Normal file
BIN
secret/snake/audio/down.mp3
Normal file
Binary file not shown.
BIN
secret/snake/audio/eat.mp3
Normal file
BIN
secret/snake/audio/eat.mp3
Normal file
Binary file not shown.
BIN
secret/snake/audio/left.mp3
Normal file
BIN
secret/snake/audio/left.mp3
Normal file
Binary file not shown.
BIN
secret/snake/audio/right.mp3
Normal file
BIN
secret/snake/audio/right.mp3
Normal file
Binary file not shown.
BIN
secret/snake/audio/up.mp3
Normal file
BIN
secret/snake/audio/up.mp3
Normal file
Binary file not shown.
|
|
@ -1,150 +1,95 @@
|
|||
"use strict";
|
||||
|
||||
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 grid = document.createElement("div");
|
||||
grid.id = "grid";
|
||||
document.querySelector(".game").appendChild(grid);
|
||||
const cvs = document.getElementById("snake");
|
||||
const ctx = cvs.getContext("2d");
|
||||
const box = 20;
|
||||
|
||||
let snake = [{ x: 5, y: 5 }];
|
||||
let apple = { x: 8, y: 5 };
|
||||
let direction = { x: 0, y: 0 };
|
||||
let gameInterval = null;
|
||||
let isGameRunning = false;
|
||||
const gridSize = 10;
|
||||
let snake = [{ x: 9 * box, y: 10 * box }];
|
||||
let food = {
|
||||
x: Math.floor(Math.random() * 19 + 1) * box,
|
||||
y: Math.floor(Math.random() * 19 + 1) * box,
|
||||
};
|
||||
let score = 0;
|
||||
let d;
|
||||
let game;
|
||||
|
||||
function initGame() {
|
||||
grid.style.display = "grid";
|
||||
grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
|
||||
grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
|
||||
grid.style.width = "350px";
|
||||
grid.style.height = "350px";
|
||||
document.getElementById("title").style.display = "none";
|
||||
document.getElementById("description").style.display = "none";
|
||||
|
||||
isGameRunning = true;
|
||||
snake = [{ x: 5, y: 5 }];
|
||||
apple = spawnApple();
|
||||
direction = { x: 0, y: 0 };
|
||||
|
||||
clearInterval(gameInterval);
|
||||
gameInterval = setInterval(gameLoop, 200);
|
||||
render();
|
||||
document.addEventListener("keydown", direction);
|
||||
function direction(event) {
|
||||
let key = event.keyCode;
|
||||
if ((key == 37 || key == 65) && d != "RIGHT") d = "LEFT";
|
||||
else if ((key == 38 || key == 87) && d != "DOWN") d = "UP";
|
||||
else if ((key == 39 || key == 68) && d != "LEFT") d = "RIGHT";
|
||||
else if ((key == 40 || key == 83) && d != "UP") d = "DOWN";
|
||||
}
|
||||
|
||||
function spawnApple() {
|
||||
let newApple;
|
||||
do {
|
||||
newApple = {
|
||||
x: Math.floor(Math.random() * gridSize),
|
||||
y: Math.floor(Math.random() * gridSize),
|
||||
function collision(head, array) {
|
||||
return array.some((part) => head.x == part.x && head.y == part.y);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = "#0f380f";
|
||||
ctx.fillRect(0, 0, cvs.width, cvs.height);
|
||||
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillRect(food.x, food.y, box, box);
|
||||
|
||||
for (let i = 0; i < snake.length; i++) {
|
||||
ctx.fillStyle = i == 0 ? "lime" : "white";
|
||||
ctx.fillRect(snake[i].x, snake[i].y, box, box);
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
|
||||
}
|
||||
|
||||
let snakeX = snake[0].x;
|
||||
let snakeY = snake[0].y;
|
||||
|
||||
if (d == "LEFT") snakeX -= box;
|
||||
if (d == "UP") snakeY -= box;
|
||||
if (d == "RIGHT") snakeX += box;
|
||||
if (d == "DOWN") snakeY += box;
|
||||
|
||||
if (snakeX == food.x && snakeY == food.y) {
|
||||
score++;
|
||||
food = {
|
||||
x: Math.floor(Math.random() * 19 + 1) * box,
|
||||
y: Math.floor(Math.random() * 19 + 1) * box,
|
||||
};
|
||||
} while (
|
||||
snake.some(
|
||||
(segment) => segment.x === newApple.x && segment.y === newApple.y
|
||||
)
|
||||
);
|
||||
return newApple;
|
||||
}
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
|
||||
function updateSnake() {
|
||||
const newHead = {
|
||||
x: snake[0].x + direction.x,
|
||||
y: snake[0].y + direction.y,
|
||||
};
|
||||
|
||||
if (newHead.x < 0) newHead.x = gridSize - 1;
|
||||
if (newHead.y < 0) newHead.y = gridSize - 1;
|
||||
if (newHead.x >= gridSize) newHead.x = 0;
|
||||
if (newHead.y >= gridSize) newHead.y = 0;
|
||||
let newHead = { x: snakeX, y: snakeY };
|
||||
|
||||
if (
|
||||
snake.some((segment) => segment.x === newHead.x && segment.y === newHead.y)
|
||||
snakeX < 0 ||
|
||||
snakeX >= cvs.width ||
|
||||
snakeY < 0 ||
|
||||
snakeY >= cvs.height ||
|
||||
collision(newHead, snake)
|
||||
) {
|
||||
gameOver();
|
||||
clearInterval(game);
|
||||
document.getElementById("restartBtn").style.display = "block";
|
||||
return;
|
||||
}
|
||||
|
||||
snake.unshift(newHead);
|
||||
|
||||
if (newHead.x === apple.x && newHead.y === apple.y) {
|
||||
apple = spawnApple();
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
ctx.fillStyle = "white";
|
||||
ctx.font = "20px Arial";
|
||||
ctx.fillText("Score: " + score, 10, 20);
|
||||
}
|
||||
|
||||
function render() {
|
||||
grid.innerHTML = "";
|
||||
|
||||
for (let y = 0; y < gridSize; y++) {
|
||||
for (let x = 0; x < gridSize; x++) {
|
||||
const cell = document.createElement("div");
|
||||
cell.classList.add("cell");
|
||||
|
||||
if ((x + y) % 2 === 0) {
|
||||
cell.classList.add("light-green");
|
||||
} else {
|
||||
cell.classList.add("dark-green");
|
||||
}
|
||||
|
||||
if (snake.some((segment) => segment.x === x && segment.y === y)) {
|
||||
cell.classList.add("snake");
|
||||
}
|
||||
|
||||
if (apple.x === x && apple.y === y) {
|
||||
cell.classList.add("apple");
|
||||
}
|
||||
|
||||
grid.appendChild(cell);
|
||||
}
|
||||
}
|
||||
function restartGame() {
|
||||
snake = [{ x: 9 * box, y: 10 * box }];
|
||||
food = {
|
||||
x: Math.floor(Math.random() * 19 + 1) * box,
|
||||
y: Math.floor(Math.random() * 19 + 1) * box,
|
||||
};
|
||||
score = 0;
|
||||
d = "";
|
||||
document.getElementById("restartBtn").style.display = "none";
|
||||
game = setInterval(draw, 150);
|
||||
}
|
||||
|
||||
function gameLoop() {
|
||||
if (!isGameRunning) return;
|
||||
updateSnake();
|
||||
render();
|
||||
}
|
||||
|
||||
function gameOver() {
|
||||
alert("Game Over!");
|
||||
clearInterval(gameInterval);
|
||||
isGameRunning = false;
|
||||
}
|
||||
|
||||
function handleDirectionInput(key) {
|
||||
switch (key) {
|
||||
case "ArrowUp":
|
||||
case "w":
|
||||
if (direction.y === 0) direction = { x: 0, y: -1 };
|
||||
break;
|
||||
case "ArrowDown":
|
||||
case "s":
|
||||
if (direction.y === 0) direction = { x: 0, y: 1 };
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
case "a":
|
||||
if (direction.x === 0) direction = { x: -1, y: 0 };
|
||||
break;
|
||||
case "ArrowRight":
|
||||
case "d":
|
||||
if (direction.x === 0) direction = { x: 1, y: 0 };
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
upButton.addEventListener("click", () => handleDirectionInput("ArrowUp"));
|
||||
downButton.addEventListener("click", () => handleDirectionInput("ArrowDown"));
|
||||
leftButton.addEventListener("click", () => handleDirectionInput("ArrowLeft"));
|
||||
rightButton.addEventListener("click", () => handleDirectionInput("ArrowRight"));
|
||||
startButton.addEventListener("click", () => {
|
||||
if (!isGameRunning) initGame();
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
handleDirectionInput(event.key);
|
||||
});
|
||||
document.getElementById("restartBtn").addEventListener("click", restartGame);
|
||||
game = setInterval(draw, 150);
|
||||
|
|
|
|||
BIN
secret/snake/img/food.png
Normal file
BIN
secret/snake/img/food.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
secret/snake/img/ground.png
Normal file
BIN
secret/snake/img/ground.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
|
|
@ -38,7 +38,7 @@
|
|||
<p>▲ or W or arrow up = move up</p>
|
||||
<p>▼ or S or arrow down = move down</p>
|
||||
</div>
|
||||
<canvas id="game"></canvas>
|
||||
<canvas id="snake" width="400" height="400"></canvas>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
197
secret/snake/test.html
Normal file
197
secret/snake/test.html
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Snake Game - GameBoy Style</title>
|
||||
<style>
|
||||
/* Base Reset */
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: monospace;
|
||||
background-color: #3a2d56;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* GameBoy Layout */
|
||||
.gameboy {
|
||||
background-color: #5f4c82;
|
||||
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 */
|
||||
.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;
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
/* Restart Button */
|
||||
#restartBtn {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
background-color: #0f380f;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#restartBtn:hover {
|
||||
background-color: #9bbc0f;
|
||||
}
|
||||
|
||||
/* Titles */
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
color: #9bbc0f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="gameboy">
|
||||
<h1>Snake Game</h1>
|
||||
<div class="screen">
|
||||
<canvas id="snake" width="400" height="400"></canvas>
|
||||
</div>
|
||||
<button id="restartBtn">Restart</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
const cvs = document.getElementById("snake");
|
||||
const ctx = cvs.getContext("2d");
|
||||
const box = 20;
|
||||
|
||||
let snake = [{ x: 9 * box, y: 10 * box }];
|
||||
let food = {
|
||||
x: Math.floor(Math.random() * 19 + 1) * box,
|
||||
y: Math.floor(Math.random() * 19 + 1) * box,
|
||||
};
|
||||
let score = 0;
|
||||
let d;
|
||||
let game;
|
||||
|
||||
document.addEventListener("keydown", direction);
|
||||
function direction(event) {
|
||||
let key = event.keyCode;
|
||||
if ((key == 37 || key == 65) && d != "RIGHT") d = "LEFT";
|
||||
else if ((key == 38 || key == 87) && d != "DOWN") d = "UP";
|
||||
else if ((key == 39 || key == 68) && d != "LEFT") d = "RIGHT";
|
||||
else if ((key == 40 || key == 83) && d != "UP") d = "DOWN";
|
||||
}
|
||||
|
||||
function collision(head, array) {
|
||||
return array.some((part) => head.x == part.x && head.y == part.y);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.fillStyle = "#0f380f";
|
||||
ctx.fillRect(0, 0, cvs.width, cvs.height);
|
||||
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillRect(food.x, food.y, box, box);
|
||||
|
||||
for (let i = 0; i < snake.length; i++) {
|
||||
ctx.fillStyle = i == 0 ? "lime" : "white";
|
||||
ctx.fillRect(snake[i].x, snake[i].y, box, box);
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
|
||||
}
|
||||
|
||||
let snakeX = snake[0].x;
|
||||
let snakeY = snake[0].y;
|
||||
|
||||
if (d == "LEFT") snakeX -= box;
|
||||
if (d == "UP") snakeY -= box;
|
||||
if (d == "RIGHT") snakeX += box;
|
||||
if (d == "DOWN") snakeY += box;
|
||||
|
||||
if (snakeX == food.x && snakeY == food.y) {
|
||||
score++;
|
||||
food = {
|
||||
x: Math.floor(Math.random() * 19 + 1) * box,
|
||||
y: Math.floor(Math.random() * 19 + 1) * box,
|
||||
};
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
|
||||
let newHead = { x: snakeX, y: snakeY };
|
||||
|
||||
if (
|
||||
snakeX < 0 ||
|
||||
snakeX >= cvs.width ||
|
||||
snakeY < 0 ||
|
||||
snakeY >= cvs.height ||
|
||||
collision(newHead, snake)
|
||||
) {
|
||||
clearInterval(game);
|
||||
document.getElementById("restartBtn").style.display = "block";
|
||||
return;
|
||||
}
|
||||
|
||||
snake.unshift(newHead);
|
||||
|
||||
ctx.fillStyle = "white";
|
||||
ctx.font = "20px Arial";
|
||||
ctx.fillText("Score: " + score, 10, 20);
|
||||
}
|
||||
|
||||
function restartGame() {
|
||||
snake = [{ x: 9 * box, y: 10 * box }];
|
||||
food = {
|
||||
x: Math.floor(Math.random() * 19 + 1) * box,
|
||||
y: Math.floor(Math.random() * 19 + 1) * box,
|
||||
};
|
||||
score = 0;
|
||||
d = "";
|
||||
document.getElementById("restartBtn").style.display = "none";
|
||||
game = setInterval(draw, 150);
|
||||
}
|
||||
|
||||
document
|
||||
.getElementById("restartBtn")
|
||||
.addEventListener("click", restartGame);
|
||||
game = setInterval(draw, 150);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue