Board is now being displayed
This commit is contained in:
parent
80f20c4b09
commit
88081645cb
2 changed files with 147 additions and 94 deletions
|
|
@ -1,42 +1,43 @@
|
|||
'use strict';
|
||||
|
||||
// Get references to the buttons
|
||||
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.getElementById("grid");
|
||||
// DOM Elements
|
||||
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'); // Create grid dynamically
|
||||
grid.id = 'grid';
|
||||
document.querySelector('.game').appendChild(grid);
|
||||
|
||||
// Game variables
|
||||
let snake;
|
||||
let apple;
|
||||
let gameInterval;
|
||||
// Game Variables
|
||||
let snake = [{ x: 5, y: 5 }];
|
||||
let apple = { x: 8, y: 5 };
|
||||
let direction = { x: 0, y: 0 };
|
||||
let gameInterval = null;
|
||||
let isGameRunning = false;
|
||||
let gridSize = 10;
|
||||
|
||||
// Initialize the game
|
||||
// Initialize Game
|
||||
function initGame() {
|
||||
document.getElementById('grid').style.display = 'grid';
|
||||
console.log('Game initialized!');
|
||||
grid.style.display = 'grid';
|
||||
grid.style.gridTemplateColumns = 'repeat(10, 1fr)';
|
||||
grid.style.gridTemplateRows = 'repeat(10, 1fr)';
|
||||
grid.style.width = '350px';
|
||||
grid.style.height = '350px';
|
||||
document.getElementById('title').style.display = 'none';
|
||||
document.getElementById('description').style.display = 'none';
|
||||
snake = [{ x: 10, y: 10 }];
|
||||
apple = spawnApple();
|
||||
isGameRunning = true;
|
||||
gameInterval = setInterval(gameLoop, 100);
|
||||
|
||||
// Render grid only during initialization
|
||||
renderGrid();
|
||||
snake = [{ x: 5, y: 5 }];
|
||||
apple = spawnApple();
|
||||
direction = { x: 0, y: 0 };
|
||||
clearInterval(gameInterval);
|
||||
gameInterval = setInterval(gameLoop, 200);
|
||||
render();
|
||||
}
|
||||
|
||||
// Game loop
|
||||
function gameLoop() {
|
||||
updateSnake();
|
||||
checkCollisions();
|
||||
render();
|
||||
}
|
||||
|
||||
// Spawn an apple at a random position
|
||||
// Spawn an Apple
|
||||
function spawnApple() {
|
||||
return {
|
||||
x: Math.floor(Math.random() * 10),
|
||||
|
|
@ -44,57 +45,88 @@ function spawnApple() {
|
|||
};
|
||||
}
|
||||
|
||||
// Update the snake's position
|
||||
// Update Snake's Position
|
||||
function updateSnake() {
|
||||
// Logic to move the snake based on direction
|
||||
const newHead = {
|
||||
x: snake[0].x + direction.x,
|
||||
y: snake[0].y + direction.y,
|
||||
};
|
||||
|
||||
// Wrap snake around edges
|
||||
if (newHead.x < 0) newHead.x = 9;
|
||||
if (newHead.y < 0) newHead.y = 9;
|
||||
if (newHead.x > 9) newHead.x = 0;
|
||||
if (newHead.y > 9) newHead.y = 0;
|
||||
|
||||
// Check collision with itself
|
||||
if (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) {
|
||||
gameOver();
|
||||
return;
|
||||
}
|
||||
|
||||
snake.unshift(newHead);
|
||||
|
||||
// Check collision with apple
|
||||
if (newHead.x === apple.x && newHead.y === apple.y) {
|
||||
apple = spawnApple();
|
||||
} else {
|
||||
snake.pop(); // Remove tail
|
||||
}
|
||||
}
|
||||
|
||||
// Check for collisions with walls, itself, or apple
|
||||
function checkCollisions() {
|
||||
// Logic to check for collisions
|
||||
}
|
||||
|
||||
// Render the game state
|
||||
// Render Game State
|
||||
function render() {
|
||||
// Logic to render the snake and apple on the screen
|
||||
}
|
||||
|
||||
// Render the grid
|
||||
function renderGrid() {
|
||||
const gridSize = 10;
|
||||
grid.innerHTML = ''; // Clear the grid first
|
||||
const grid = document.getElementById("grid");
|
||||
grid.innerHTML = ""; // Clear the grid
|
||||
|
||||
// Generate the grid
|
||||
for (let y = 0; y < gridSize; y++) {
|
||||
let row = document.createElement('div');
|
||||
row.classList.add('row');
|
||||
for (let x = 0; x < gridSize; x++) {
|
||||
let cell = document.createElement('div');
|
||||
cell.classList.add('cell');
|
||||
row.appendChild(cell);
|
||||
const cell = document.createElement("div");
|
||||
cell.classList.add("cell");
|
||||
|
||||
// Alternate colors for a chessboard pattern
|
||||
if ((x + y) % 2 === 0) {
|
||||
cell.classList.add("light-green");
|
||||
} else {
|
||||
cell.classList.add("dark-green");
|
||||
}
|
||||
|
||||
// Check if the cell is part of the snake
|
||||
if (snake.some(segment => segment.x === x && segment.y === y)) {
|
||||
cell.classList.add("snake");
|
||||
}
|
||||
|
||||
// Check if the cell is the apple
|
||||
if (apple.x === x && apple.y === y) {
|
||||
cell.classList.add("apple");
|
||||
}
|
||||
|
||||
grid.appendChild(cell);
|
||||
}
|
||||
grid.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
// Button event listeners
|
||||
upButton.addEventListener("click", () => {
|
||||
// Logic to move the snake up
|
||||
});
|
||||
// Game Loop
|
||||
function gameLoop() {
|
||||
if (!isGameRunning) return;
|
||||
updateSnake();
|
||||
render();
|
||||
}
|
||||
|
||||
downButton.addEventListener("click", () => {
|
||||
// Logic to move the snake down
|
||||
});
|
||||
// Handle Game Over
|
||||
function gameOver() {
|
||||
alert('Game Over!');
|
||||
clearInterval(gameInterval);
|
||||
isGameRunning = false;
|
||||
}
|
||||
|
||||
leftButton.addEventListener("click", () => {
|
||||
// Logic to move the snake left
|
||||
});
|
||||
|
||||
rightButton.addEventListener("click", () => {
|
||||
// Logic to move the snake right
|
||||
});
|
||||
|
||||
startButton.addEventListener("click", () => {
|
||||
if (!isGameRunning) {
|
||||
initGame();
|
||||
}
|
||||
// Event Listeners for Buttons
|
||||
upButton.addEventListener('click', () => direction = { x: 0, y: -1 });
|
||||
downButton.addEventListener('click', () => direction = { x: 0, y: 1 });
|
||||
leftButton.addEventListener('click', () => direction = { x: -1, y: 0 });
|
||||
rightButton.addEventListener('click', () => direction = { x: 1, y: 0 });
|
||||
startButton.addEventListener('click', () => {
|
||||
if (!isGameRunning) initGame();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ html {
|
|||
|
||||
/* Screen */
|
||||
.screen {
|
||||
background-color: black; /* Game Boy green screen */
|
||||
background-color: black;
|
||||
border: 4px solid #0f380f;
|
||||
width: 90%;
|
||||
height: 55%;
|
||||
|
|
@ -55,7 +55,7 @@ html {
|
|||
|
||||
/* Titles */
|
||||
h1 {
|
||||
font-size: 2rem; /* Increased font size */
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
color: #9bbc0f;
|
||||
|
|
@ -69,6 +69,45 @@ h1 {
|
|||
color: white;
|
||||
}
|
||||
|
||||
/* Grid container */
|
||||
#grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr); /* Adjust to match gridSize */
|
||||
grid-template-rows: repeat(10, 1fr); /* Adjust to match gridSize */
|
||||
width: 400px; /* Adjust as needed */
|
||||
height: 400px; /* Adjust as needed */
|
||||
border: 2px solid #0f380f;
|
||||
margin: 20px auto;
|
||||
/* initially hide */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Individual cells */
|
||||
.cell {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cell.light-green {
|
||||
background-color: #9bbc0f;
|
||||
}
|
||||
|
||||
.cell.dark-green {
|
||||
background-color: #0f380f;
|
||||
}
|
||||
|
||||
/* Snake styling */
|
||||
.snake {
|
||||
background-color: #e600ff; /* Snake color */
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Apple styling */
|
||||
.apple {
|
||||
background-color: red; /* Apple color */
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* Controls Section */
|
||||
.controls {
|
||||
margin-top: 20px;
|
||||
|
|
@ -81,8 +120,8 @@ h1 {
|
|||
/* D-Pad */
|
||||
.dpad {
|
||||
position: relative;
|
||||
width: 120px; /* Increased size */
|
||||
height: 120px; /* Increased size */
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
/* Base Styling for D-Pad Buttons */
|
||||
|
|
@ -94,7 +133,7 @@ h1 {
|
|||
position: absolute;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
font-size: 1.5rem; /* Increased size */
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -135,7 +174,7 @@ h1 {
|
|||
transform: translate(-50%, -50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid #9cbc0f00;
|
||||
border: 2px solid transparent;
|
||||
z-index: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -145,7 +184,7 @@ h1 {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 200px; /* Increased height */
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
@ -155,7 +194,7 @@ h1 {
|
|||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.8rem; /* Increased font size */
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s, background-color 0.2s;
|
||||
}
|
||||
|
|
@ -169,6 +208,7 @@ h1 {
|
|||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
/* Start Button */
|
||||
.start-btn {
|
||||
background-color: #0f380f;
|
||||
color: #9bbc0f;
|
||||
|
|
@ -191,27 +231,8 @@ h1 {
|
|||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
/* Hidden Canvas for Debugging or Fallback */
|
||||
canvas {
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#grid {
|
||||
display: grid;
|
||||
width: 200px; /* 10 cells x 20px */
|
||||
height: 200px; /* 10 cells x 20px */
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-template-rows: repeat(10, 1fr);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cell {
|
||||
border: 1px solid purple;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: contents; /* For proper grid layout */
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue