Compare commits
No commits in common. "35aad0589eff3b6ed14ab02d2eca2ddf83c2ac61" and "2842c955fe6fb6cd4d770167ba6158c839b40e0f" have entirely different histories.
35aad0589e
...
2842c955fe
11 changed files with 131 additions and 273 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,95 +1,150 @@
|
|||
"use strict";
|
||||
|
||||
const cvs = document.getElementById("snake");
|
||||
const ctx = cvs.getContext("2d");
|
||||
const box = 20;
|
||||
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);
|
||||
|
||||
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;
|
||||
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;
|
||||
|
||||
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 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();
|
||||
}
|
||||
|
||||
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,
|
||||
function spawnApple() {
|
||||
let newApple;
|
||||
do {
|
||||
newApple = {
|
||||
x: Math.floor(Math.random() * gridSize),
|
||||
y: Math.floor(Math.random() * gridSize),
|
||||
};
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
} while (
|
||||
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 (
|
||||
snakeX < 0 ||
|
||||
snakeX >= cvs.width ||
|
||||
snakeY < 0 ||
|
||||
snakeY >= cvs.height ||
|
||||
collision(newHead, snake)
|
||||
snake.some((segment) => segment.x === newHead.x && segment.y === newHead.y)
|
||||
) {
|
||||
clearInterval(game);
|
||||
document.getElementById("restartBtn").style.display = "block";
|
||||
gameOver();
|
||||
return;
|
||||
}
|
||||
|
||||
snake.unshift(newHead);
|
||||
|
||||
ctx.fillStyle = "white";
|
||||
ctx.font = "20px Arial";
|
||||
ctx.fillText("Score: " + score, 10, 20);
|
||||
if (newHead.x === apple.x && newHead.y === apple.y) {
|
||||
apple = spawnApple();
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
}
|
||||
|
||||
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 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("restartBtn").addEventListener("click", restartGame);
|
||||
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);
|
||||
});
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before 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="snake" width="400" height="400"></canvas>
|
||||
<canvas id="game"></canvas>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Add table
Reference in a new issue