help
This commit is contained in:
parent
8478bc66e7
commit
78795c5be3
3 changed files with 79 additions and 34 deletions
|
|
@ -6,8 +6,7 @@ const downButton = document.getElementById("down");
|
|||
const leftButton = document.getElementById("left");
|
||||
const rightButton = document.getElementById("right");
|
||||
const startButton = document.getElementById("start");
|
||||
const aButton = document.getElementById("a");
|
||||
const bButton = document.getElementById("b");
|
||||
const grid = document.getElementById("grid");
|
||||
|
||||
// Game variables
|
||||
let snake;
|
||||
|
|
@ -17,10 +16,17 @@ let isGameRunning = false;
|
|||
|
||||
// Initialize the game
|
||||
function initGame() {
|
||||
document.getElementById('grid').style.display = 'grid';
|
||||
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();
|
||||
render();
|
||||
}
|
||||
|
||||
// Game loop
|
||||
|
|
@ -33,15 +39,14 @@ function gameLoop() {
|
|||
// Spawn an apple at a random position
|
||||
function spawnApple() {
|
||||
return {
|
||||
x: Math.floor(Math.random() * 20),
|
||||
y: Math.floor(Math.random() * 20),
|
||||
x: Math.floor(Math.random() * 10),
|
||||
y: Math.floor(Math.random() * 10),
|
||||
};
|
||||
}
|
||||
|
||||
// Update the snake's position
|
||||
function updateSnake() {
|
||||
// Logic to move the snake based on direction
|
||||
// This is where you would handle the snake's movement
|
||||
}
|
||||
|
||||
// Check for collisions with walls, itself, or apple
|
||||
|
|
@ -54,6 +59,23 @@ 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
|
||||
|
||||
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);
|
||||
}
|
||||
grid.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
// Button event listeners
|
||||
upButton.addEventListener("click", () => {
|
||||
// Logic to move the snake up
|
||||
|
|
@ -76,12 +98,3 @@ startButton.addEventListener("click", () => {
|
|||
initGame();
|
||||
}
|
||||
});
|
||||
|
||||
// Additional button functionalities for A and B
|
||||
aButton.addEventListener("click", () => {
|
||||
// Logic for A button (e.g., pause or special action)
|
||||
});
|
||||
|
||||
bButton.addEventListener("click", () => {
|
||||
// Logic for B button (e.g., reset or another action)
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
<!-- Game Boy Screen -->
|
||||
<div class="screen">
|
||||
<article class="game">
|
||||
<h1>Snake - Game</h1>
|
||||
<div class="description">
|
||||
<h1 class="title" id="title">Snake - Game</h1>
|
||||
<div class="description" id="description">
|
||||
<h2>Description</h2>
|
||||
<p>Eat as many apples and grow as much as possible</p>
|
||||
<p>◀ or A or arrow left = move left</p>
|
||||
|
|
@ -20,6 +20,7 @@
|
|||
<p>▲ or W or arrow up = move up</p>
|
||||
<p>▼ or S or arrow down = move down</p>
|
||||
</div>
|
||||
<canvas id="grid"></canvas>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
|
@ -34,7 +35,7 @@
|
|||
<button class="dpad-btn down" id="down">▼</button>
|
||||
</div>
|
||||
|
||||
<!-- A, B and start buttonButtons on the right -->
|
||||
<!-- A, B and start button on the right -->
|
||||
<div class="action-buttons">
|
||||
<button class="start-btn btn" id="start">Start</button>
|
||||
<button class="btn" id="a">A</button>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* Base Reset */
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
|
|
@ -10,8 +11,9 @@ html {
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
/* GameBoy Layout */
|
||||
.gameboy {
|
||||
background-color: #5900ff;
|
||||
background-color: #5f4c82; /* Game Boy Color purple shell */
|
||||
width: 441px;
|
||||
height: 735px;
|
||||
border-radius: 20px;
|
||||
|
|
@ -31,8 +33,9 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
/* Screen */
|
||||
.screen {
|
||||
background-color: black;
|
||||
background-color: black; /* Game Boy green screen */
|
||||
border: 4px solid #0f380f;
|
||||
width: 90%;
|
||||
height: 55%;
|
||||
|
|
@ -45,28 +48,28 @@ html {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.game {
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
/* Titles */
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
font-size: 2rem; /* Increased font size */
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #9bbc0f;
|
||||
}
|
||||
|
||||
.description,
|
||||
.description p,
|
||||
.description h1 {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
.description p {
|
||||
font-size: 1.2rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 auto;
|
||||
color: #ffffff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Controls Section */
|
||||
.controls {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
|
|
@ -75,12 +78,14 @@ h1 {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
/* D-Pad */
|
||||
.dpad {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
width: 120px; /* Increased size */
|
||||
height: 120px; /* Increased size */
|
||||
}
|
||||
|
||||
/* Base Styling for D-Pad Buttons */
|
||||
.dpad-btn {
|
||||
background-color: #0f380f;
|
||||
color: #9bbc0f;
|
||||
|
|
@ -89,7 +94,7 @@ h1 {
|
|||
position: absolute;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.5rem; /* Increased size */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -121,6 +126,7 @@ h1 {
|
|||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* D-Pad Center to Connect Buttons */
|
||||
.dpad-center {
|
||||
background-color: #0f380f;
|
||||
position: absolute;
|
||||
|
|
@ -134,11 +140,12 @@ h1 {
|
|||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* A and B Buttons */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 200px;
|
||||
height: 200px; /* Increased height */
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
@ -148,7 +155,7 @@ h1 {
|
|||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.8rem; /* Increased font size */
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s, background-color 0.2s;
|
||||
}
|
||||
|
|
@ -183,3 +190,27 @@ h1 {
|
|||
.start-btn:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#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