interstellar_development/interstellar_website
3
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: interstellar_development:35aad0589eff3b6ed14ab02d2eca2ddf83c2ac61
Branches Tags
interstellar_development:main
..
compare: interstellar_development:2842c955fe6fb6cd4d770167ba6158c839b40e0f
Branches Tags
interstellar_development:main

No commits in common. "35aad0589eff3b6ed14ab02d2eca2ddf83c2ac61" and "2842c955fe6fb6cd4d770167ba6158c839b40e0f" have entirely different histories.
35aad0589e ... 2842c955fe

11 changed files with 131 additions and 273 deletions
Show stats Expand all files Collapse all files

BIN
secret/snake/audio/dead.mp3
View file

Binary file not shown.

BIN
secret/snake/audio/down.mp3
View file

Binary file not shown.

BIN
secret/snake/audio/eat.mp3
View file

Binary file not shown.

BIN
secret/snake/audio/left.mp3
View file

Binary file not shown.

BIN
secret/snake/audio/right.mp3
View file

Binary file not shown.

BIN
secret/snake/audio/up.mp3
View file

Binary file not shown.

205
secret/snake/game.js
View file

@ -1,95 +1,150 @@
"use strict"; "use strict";
const cvs = document.getElementById("snake"); const upButton = document.getElementById("up");
const ctx = cvs.getContext("2d"); const downButton = document.getElementById("down");
const box = 20; 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);
let snake = [{ x: 9 * box, y: 10 * box }]; let snake = [{ x: 5, y: 5 }];
let food = { let apple = { x: 8, y: 5 };
x: Math.floor(Math.random() * 19 + 1) * box, let direction = { x: 0, y: 0 };
y: Math.floor(Math.random() * 19 + 1) * box, let gameInterval = null;
}; let isGameRunning = false;
let score = 0; const gridSize = 10;
let d;
let game;
document.addEventListener("keydown", direction); function initGame() {
function direction(event) { grid.style.display = "grid";
let key = event.keyCode; grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
if ((key == 37 || key == 65) && d != "RIGHT") d = "LEFT"; grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
else if ((key == 38 || key == 87) && d != "DOWN") d = "UP"; grid.style.width = "350px";
else if ((key == 39 || key == 68) && d != "LEFT") d = "RIGHT"; grid.style.height = "350px";
else if ((key == 40 || key == 83) && d != "UP") d = "DOWN"; 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();
} }
function collision(head, array) { function spawnApple() {
return array.some((part) => head.x == part.x && head.y == part.y); let newApple;
} do {
newApple = {
function draw() { x: Math.floor(Math.random() * gridSize),
ctx.fillStyle = "#0f380f"; y: Math.floor(Math.random() * gridSize),
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 { } while (
snake.pop(); snake.some(
} (segment) => segment.x === newApple.x && segment.y === newApple.y
)
);
return newApple;
}
let newHead = { x: snakeX, y: snakeY }; 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;
if ( if (
snakeX < 0 || snake.some((segment) => segment.x === newHead.x && segment.y === newHead.y)
snakeX >= cvs.width ||
snakeY < 0 ||
snakeY >= cvs.height ||
collision(newHead, snake)
) { ) {
clearInterval(game); gameOver();
document.getElementById("restartBtn").style.display = "block";
return; return;
} }
snake.unshift(newHead); snake.unshift(newHead);
ctx.fillStyle = "white"; if (newHead.x === apple.x && newHead.y === apple.y) {
ctx.font = "20px Arial"; apple = spawnApple();
ctx.fillText("Score: " + score, 10, 20); } else {
snake.pop();
}
} }
function restartGame() { function render() {
snake = [{ x: 9 * box, y: 10 * box }]; grid.innerHTML = "";
food = {
x: Math.floor(Math.random() * 19 + 1) * box, for (let y = 0; y < gridSize; y++) {
y: Math.floor(Math.random() * 19 + 1) * box, for (let x = 0; x < gridSize; x++) {
}; const cell = document.createElement("div");
score = 0; cell.classList.add("cell");
d = "";
document.getElementById("restartBtn").style.display = "none"; if ((x + y) % 2 === 0) {
game = setInterval(draw, 150); 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);
}
}
} }
document.getElementById("restartBtn").addEventListener("click", restartGame); function gameLoop() {
game = setInterval(draw, 150); 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);
});

BIN
secret/snake/img/food.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
secret/snake/img/ground.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 33 KiB

2
secret/snake/index.html
View file

@ -38,7 +38,7 @@
<p>▲ or W or arrow up = move up</p> <p>▲ or W or arrow up = move up</p>
<p>▼ or S or arrow down = move down</p> <p>▼ or S or arrow down = move down</p>
</div> </div>
<canvas id="snake" width="400" height="400"></canvas> <canvas id="game"></canvas>
</article> </article>
</div> </div>

197
secret/snake/test.html
View file

@ -1,197 +0,0 @@
<!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>