why is one working and the other isn't
This commit is contained in:
parent
c8457d3b1c
commit
cd401ee5b6
2 changed files with 147 additions and 182 deletions
|
|
@ -1,156 +1,95 @@
|
|||
// testing from old tutorial
|
||||
|
||||
"use strict";
|
||||
|
||||
const cvs = document.getElementById("snake");
|
||||
const ctx = cvs.getContext("2d");
|
||||
const box = 20;
|
||||
|
||||
// create the unit
|
||||
const box = 32;
|
||||
|
||||
// load images
|
||||
|
||||
const ground = new Image();
|
||||
ground.src = "img/ground.png";
|
||||
|
||||
const foodImg = new Image();
|
||||
foodImg.src = "img/food.png";
|
||||
|
||||
// load audio files
|
||||
|
||||
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";
|
||||
|
||||
// create the snake
|
||||
|
||||
let snake = [];
|
||||
|
||||
snake[0] = {
|
||||
x: 9 * box,
|
||||
y: 10 * box,
|
||||
};
|
||||
|
||||
// create the food
|
||||
|
||||
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,
|
||||
};
|
||||
|
||||
// create the score var
|
||||
|
||||
let score = 0;
|
||||
|
||||
//control the snake
|
||||
|
||||
let d;
|
||||
let game;
|
||||
|
||||
document.addEventListener("keydown", direction);
|
||||
|
||||
function direction(event) {
|
||||
let key = event.keyCode;
|
||||
if (key == 37 && d != "RIGHT") {
|
||||
left.play();
|
||||
d = "LEFT";
|
||||
} else if (key == 38 && d != "DOWN") {
|
||||
d = "UP";
|
||||
up.play();
|
||||
} else if (key == 39 && d != "LEFT") {
|
||||
d = "RIGHT";
|
||||
right.play();
|
||||
} else if (key == 40 && 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";
|
||||
}
|
||||
|
||||
// cheack collision function
|
||||
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 array.some((part) => head.x == part.x && head.y == part.y);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// draw everything to the canvas
|
||||
|
||||
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);
|
||||
|
||||
// old head position
|
||||
let snakeX = snake[0].x;
|
||||
let snakeY = snake[0].y;
|
||||
|
||||
// which direction
|
||||
if (d == "LEFT") snakeX -= box;
|
||||
if (d == "UP") snakeY -= box;
|
||||
if (d == "RIGHT") snakeX += box;
|
||||
if (d == "DOWN") snakeY += box;
|
||||
|
||||
// if the snake eats the food
|
||||
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,
|
||||
};
|
||||
// we don't remove the tail
|
||||
} else {
|
||||
// remove the tail
|
||||
snake.pop();
|
||||
}
|
||||
|
||||
// add new Head
|
||||
|
||||
let newHead = {
|
||||
x: snakeX,
|
||||
y: snakeY,
|
||||
};
|
||||
|
||||
// game over
|
||||
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();
|
||||
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);
|
||||
}
|
||||
|
||||
// call draw function every 100 ms
|
||||
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);
|
||||
}
|
||||
|
||||
let game = setInterval(draw, 100);
|
||||
document.getElementById("restartBtn").addEventListener("click", restartGame);
|
||||
game = setInterval(draw, 150);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue