formatted like my Boss wants it (help!)
This commit is contained in:
parent
5d11f87dd3
commit
b507a6b0ea
19 changed files with 1425 additions and 1136 deletions
|
|
@ -1,13 +1,13 @@
|
|||
'use strict';
|
||||
"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 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: 5, y: 5 }];
|
||||
let apple = { x: 8, y: 5 };
|
||||
|
|
@ -17,128 +17,134 @@ let isGameRunning = false;
|
|||
const gridSize = 10;
|
||||
|
||||
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';
|
||||
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 };
|
||||
isGameRunning = true;
|
||||
snake = [{ x: 5, y: 5 }];
|
||||
apple = spawnApple();
|
||||
direction = { x: 0, y: 0 };
|
||||
|
||||
clearInterval(gameInterval);
|
||||
gameInterval = setInterval(gameLoop, 200);
|
||||
render();
|
||||
clearInterval(gameInterval);
|
||||
gameInterval = setInterval(gameLoop, 200);
|
||||
render();
|
||||
}
|
||||
|
||||
function spawnApple() {
|
||||
let newApple;
|
||||
do {
|
||||
newApple = {
|
||||
x: Math.floor(Math.random() * gridSize),
|
||||
y: Math.floor(Math.random() * gridSize)
|
||||
};
|
||||
} while (snake.some(segment => segment.x === newApple.x && segment.y === newApple.y));
|
||||
return newApple;
|
||||
let newApple;
|
||||
do {
|
||||
newApple = {
|
||||
x: Math.floor(Math.random() * gridSize),
|
||||
y: Math.floor(Math.random() * gridSize),
|
||||
};
|
||||
} while (
|
||||
snake.some(
|
||||
(segment) => segment.x === newApple.x && segment.y === newApple.y
|
||||
)
|
||||
);
|
||||
return newApple;
|
||||
}
|
||||
|
||||
function updateSnake() {
|
||||
const newHead = {
|
||||
x: snake[0].x + direction.x,
|
||||
y: snake[0].y + direction.y
|
||||
};
|
||||
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 (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 (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) {
|
||||
gameOver();
|
||||
return;
|
||||
}
|
||||
if (
|
||||
snake.some((segment) => segment.x === newHead.x && segment.y === newHead.y)
|
||||
) {
|
||||
gameOver();
|
||||
return;
|
||||
}
|
||||
|
||||
snake.unshift(newHead);
|
||||
snake.unshift(newHead);
|
||||
|
||||
if (newHead.x === apple.x && newHead.y === apple.y) {
|
||||
apple = spawnApple();
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
if (newHead.x === apple.x && newHead.y === apple.y) {
|
||||
apple = spawnApple();
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
}
|
||||
|
||||
function render() {
|
||||
grid.innerHTML = "";
|
||||
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");
|
||||
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 ((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 (snake.some((segment) => segment.x === x && segment.y === y)) {
|
||||
cell.classList.add("snake");
|
||||
}
|
||||
|
||||
if (apple.x === x && apple.y === y) {
|
||||
cell.classList.add("apple");
|
||||
}
|
||||
if (apple.x === x && apple.y === y) {
|
||||
cell.classList.add("apple");
|
||||
}
|
||||
|
||||
grid.appendChild(cell);
|
||||
}
|
||||
grid.appendChild(cell);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function gameLoop() {
|
||||
if (!isGameRunning) return;
|
||||
updateSnake();
|
||||
render();
|
||||
if (!isGameRunning) return;
|
||||
updateSnake();
|
||||
render();
|
||||
}
|
||||
|
||||
function gameOver() {
|
||||
alert('Game Over!');
|
||||
clearInterval(gameInterval);
|
||||
isGameRunning = false;
|
||||
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;
|
||||
}
|
||||
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();
|
||||
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.addEventListener("keydown", (event) => {
|
||||
handleDirectionInput(event.key);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue