WHY IS THIS BULLSHIT WORKING
This commit is contained in:
parent
c6d1a47097
commit
c8457d3b1c
3 changed files with 314 additions and 110 deletions
|
|
@ -1,123 +1,156 @@
|
|||
// testing from old tutorial
|
||||
|
||||
"use strict";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const cvs = document.getElementById("game");
|
||||
const ctx = cvs.getContext("2d");
|
||||
const startBtn = document.getElementById("start");
|
||||
const description = document.getElementById("description");
|
||||
const box = 32;
|
||||
const cvs = document.getElementById("snake");
|
||||
const ctx = cvs.getContext("2d");
|
||||
|
||||
const ground = new Image();
|
||||
ground.src = "img/ground.png";
|
||||
// create the unit
|
||||
const box = 32;
|
||||
|
||||
const foodImg = new Image();
|
||||
foodImg.src = "img/food.png";
|
||||
// load images
|
||||
|
||||
let dead = new Audio("audio/dead.mp3");
|
||||
let eat = new Audio("audio/eat.mp3");
|
||||
let up = new Audio("audio/up.mp3");
|
||||
let right = new Audio("audio/right.mp3");
|
||||
let left = new Audio("audio/left.mp3");
|
||||
let down = new Audio("audio/down.mp3");
|
||||
const ground = new Image();
|
||||
ground.src = "img/ground.png";
|
||||
|
||||
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,
|
||||
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 food = {
|
||||
x: Math.floor(Math.random() * 17 + 1) * box,
|
||||
y: Math.floor(Math.random() * 15 + 3) * box,
|
||||
};
|
||||
|
||||
// create the score var
|
||||
|
||||
let score = 0;
|
||||
|
||||
//control the snake
|
||||
|
||||
let d;
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
// 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 false;
|
||||
}
|
||||
|
||||
// draw everything to the canvas
|
||||
|
||||
function draw() {
|
||||
ctx.drawImage(ground, 0, 0);
|
||||
|
||||
for (let i = 0; i < snake.length; i++) {
|
||||
ctx.fillStyle = i == 0 ? "green" : "white";
|
||||
ctx.fillRect(snake[i].x, snake[i].y, box, box);
|
||||
|
||||
ctx.strokeStyle = "red";
|
||||
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,
|
||||
};
|
||||
// we don't remove the tail
|
||||
} else {
|
||||
// remove the tail
|
||||
snake.pop();
|
||||
}
|
||||
|
||||
// add new Head
|
||||
|
||||
let newHead = {
|
||||
x: snakeX,
|
||||
y: snakeY,
|
||||
};
|
||||
let score = 0;
|
||||
let d;
|
||||
let game;
|
||||
|
||||
document.addEventListener("keydown", direction);
|
||||
document
|
||||
.getElementById("up")
|
||||
.addEventListener("click", () => changeDirection("UP"));
|
||||
document
|
||||
.getElementById("down")
|
||||
.addEventListener("click", () => changeDirection("DOWN"));
|
||||
document
|
||||
.getElementById("left")
|
||||
.addEventListener("click", () => changeDirection("LEFT"));
|
||||
document
|
||||
.getElementById("right")
|
||||
.addEventListener("click", () => changeDirection("RIGHT"));
|
||||
startBtn.addEventListener("click", startGame);
|
||||
// game over
|
||||
|
||||
function direction(event) {
|
||||
const key = event.key.toLowerCase();
|
||||
if ((key === "arrowleft" || key === "a") && d !== "RIGHT")
|
||||
changeDirection("LEFT");
|
||||
if ((key === "arrowup" || key === "w") && d !== "DOWN")
|
||||
changeDirection("UP");
|
||||
if ((key === "arrowright" || key === "d") && d !== "LEFT")
|
||||
changeDirection("RIGHT");
|
||||
if ((key === "arrowdown" || key === "s") && d !== "UP")
|
||||
changeDirection("DOWN");
|
||||
if (
|
||||
snakeX < box ||
|
||||
snakeX > 17 * box ||
|
||||
snakeY < 3 * box ||
|
||||
snakeY > 17 * box ||
|
||||
collision(newHead, snake)
|
||||
) {
|
||||
clearInterval(game);
|
||||
dead.play();
|
||||
}
|
||||
|
||||
function changeDirection(newDirection) {
|
||||
d = newDirection;
|
||||
if (newDirection === "LEFT") left.play();
|
||||
if (newDirection === "UP") up.play();
|
||||
if (newDirection === "RIGHT") right.play();
|
||||
if (newDirection === "DOWN") down.play();
|
||||
}
|
||||
snake.unshift(newHead);
|
||||
|
||||
function collision(head, array) {
|
||||
return array.some(
|
||||
(segment) => segment.x === head.x && segment.y === head.y
|
||||
);
|
||||
}
|
||||
ctx.fillStyle = "white";
|
||||
ctx.font = "45px Changa one";
|
||||
ctx.fillText(score, 2 * box, 1.6 * box);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.drawImage(ground, 0, 0);
|
||||
snake.forEach((segment, index) => {
|
||||
ctx.fillStyle = index === 0 ? "green" : "white";
|
||||
ctx.fillRect(segment.x, segment.y, box, box);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.strokeRect(segment.x, segment.y, box, box);
|
||||
});
|
||||
ctx.drawImage(foodImg, food.x, food.y);
|
||||
// call draw function every 100 ms
|
||||
|
||||
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++;
|
||||
eat.play();
|
||||
food = {
|
||||
x: Math.floor(Math.random() * 17 + 1) * box,
|
||||
y: Math.floor(Math.random() * 15 + 3) * box,
|
||||
};
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
|
||||
let newHead = { x: snakeX, y: snakeY };
|
||||
if (
|
||||
snakeX < box ||
|
||||
snakeX > 17 * box ||
|
||||
snakeY < 3 * box ||
|
||||
snakeY > 17 * box ||
|
||||
collision(newHead, snake)
|
||||
) {
|
||||
clearInterval(game);
|
||||
dead.play();
|
||||
}
|
||||
|
||||
snake.unshift(newHead);
|
||||
ctx.fillStyle = "white";
|
||||
ctx.font = "45px Changa one";
|
||||
ctx.fillText(score, 2 * box, 1.6 * box);
|
||||
}
|
||||
|
||||
function startGame() {
|
||||
description.style.display = "none";
|
||||
game = setInterval(draw, 100);
|
||||
}
|
||||
});
|
||||
let game = setInterval(draw, 100);
|
||||
|
|
|
|||
|
|
@ -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="game"></canvas>
|
||||
<canvas id="snake" width="400" height="400"></canvas>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
171
secret/snake/test.html
Normal file
171
secret/snake/test.html
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Snake Game</title>
|
||||
<style>
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
}
|
||||
#restartBtn {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="snake" width="608" height="608"></canvas>
|
||||
<button id="restartBtn" style="display: none">Restart</button>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
const cvs = document.getElementById("snake");
|
||||
const ctx = cvs.getContext("2d");
|
||||
|
||||
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 food = {
|
||||
x: Math.floor(Math.random() * 17 + 1) * box,
|
||||
y: Math.floor(Math.random() * 15 + 3) * 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();
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.drawImage(ground, 0, 0);
|
||||
|
||||
for (let i = 0; i < snake.length; i++) {
|
||||
ctx.fillStyle = i == 0 ? "green" : "white";
|
||||
ctx.fillRect(snake[i].x, snake[i].y, box, box);
|
||||
|
||||
ctx.strokeStyle = "red";
|
||||
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;
|
||||
|
||||
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++;
|
||||
eat.play();
|
||||
food = {
|
||||
x: Math.floor(Math.random() * 17 + 1) * box,
|
||||
y: Math.floor(Math.random() * 15 + 3) * box,
|
||||
};
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
|
||||
let newHead = { x: snakeX, y: snakeY };
|
||||
|
||||
if (
|
||||
snakeX < box ||
|
||||
snakeX > 17 * box ||
|
||||
snakeY < 3 * box ||
|
||||
snakeY > 17 * box ||
|
||||
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);
|
||||
}
|
||||
|
||||
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,
|
||||
};
|
||||
score = 0;
|
||||
d = "";
|
||||
document.getElementById("restartBtn").style.display = "none";
|
||||
game = setInterval(draw, 150); // Reduced speed (increased interval time to 150ms)
|
||||
}
|
||||
|
||||
document
|
||||
.getElementById("restartBtn")
|
||||
.addEventListener("click", restartGame);
|
||||
|
||||
game = setInterval(draw, 150); // Start the game with reduced speed
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue