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

why is one working and the other isn't

Browse source
This commit is contained in:
sageTheDM 2025-02-25 13:33:17 +01:00
parent c8457d3b1c
commit cd401ee5b6
2 changed files with 147 additions and 182 deletions
Download patch file Download diff file Expand all files Collapse all files

186
secret/snake/test.html
View file

@ -3,106 +3,140 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snake Game</title>
<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>
<canvas id="snake" width="608" height="608"></canvas>
<button id="restartBtn" style="display: none">Restart</button>
<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;
const box = 32;
const ground = new Image();
ground.src = "img/ground.png";
const foodImg = new Image();
foodImg.src = "img/food.png";
let dead = new Audio();
let eat = new Audio();
let up = new Audio();
let right = new Audio();
let left = new Audio();
let down = new Audio();
dead.src = "audio/dead.mp3";
eat.src = "audio/eat.mp3";
up.src = "audio/up.mp3";
right.src = "audio/right.mp3";
left.src = "audio/left.mp3";
down.src = "audio/down.mp3";
let snake = [];
snake[0] = { x: 9 * box, y: 10 * box };
let snake = [{ x: 9 * box, y: 10 * box }];
let food = {
x: Math.floor(Math.random() * 17 + 1) * box,
y: Math.floor(Math.random() * 15 + 3) * box,
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") {
left.play();
d = "LEFT";
} else if ((key == 38 || key == 87) && d != "DOWN") {
d = "UP";
up.play();
} else if ((key == 39 || key == 68) && d != "LEFT") {
d = "RIGHT";
right.play();
} else if ((key == 40 || key == 83) && d != "UP") {
d = "DOWN";
down.play();
}
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) {
for (let i = 0; i < array.length; i++) {
if (head.x == array[i].x && head.y == array[i].y) {
return true;
}
}
return false;
return array.some((part) => head.x == part.x && head.y == part.y);
}
function draw() {
ctx.drawImage(ground, 0, 0);
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 ? "green" : "white";
ctx.fillStyle = i == 0 ? "lime" : "white";
ctx.fillRect(snake[i].x, snake[i].y, box, box);
ctx.strokeStyle = "red";
ctx.strokeStyle = "black";
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
}
ctx.drawImage(foodImg, food.x, food.y);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
@ -113,10 +147,9 @@
if (snakeX == food.x && snakeY == food.y) {
score++;
eat.play();
food = {
x: Math.floor(Math.random() * 17 + 1) * box,
y: Math.floor(Math.random() * 15 + 3) * box,
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box,
};
} else {
snake.pop();
@ -125,47 +158,40 @@
let newHead = { x: snakeX, y: snakeY };
if (
snakeX < box ||
snakeX > 17 * box ||
snakeY < 3 * box ||
snakeY > 17 * box ||
snakeX < 0 ||
snakeX >= cvs.width ||
snakeY < 0 ||
snakeY >= cvs.height ||
collision(newHead, snake)
) {
clearInterval(game);
dead.play();
// Delay Game Over message
setTimeout(() => {
alert("Game Over!");
document.getElementById("restartBtn").style.display = "block";
}, 500); // Wait 0.5 seconds before showing the message
document.getElementById("restartBtn").style.display = "block";
return;
}
snake.unshift(newHead);
ctx.fillStyle = "white";
ctx.font = "45px Changa one";
ctx.fillText(score, 2 * box, 1.6 * box);
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() * 17 + 1) * box,
y: Math.floor(Math.random() * 15 + 3) * box,
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); // Reduced speed (increased interval time to 150ms)
game = setInterval(draw, 150);
}
document
.getElementById("restartBtn")
.addEventListener("click", restartGame);
game = setInterval(draw, 150); // Start the game with reduced speed
game = setInterval(draw, 150);
</script>
</body>
</html>