<!DOCTYPE html>
<html>
<head>
<title>₿ITCOIN SNAKE</title>
<style>
#game-container {
position: relative;
width: 400px;
height: 400px;
margin: 0 auto;
background-color: #000000;
}
.cell {
width: 20px;
height: 20px;
background-color: #ffffff;
position: absolute;
}
.food {
color: #ffd700;
font-size: 18px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffd700;
}
#menu {
text-align: center;
}
#score-heading {
font-size: 24px;
}
#score {
font-size: 36px;
color: #ffffff;
margin-bottom: 10px;
}
#instructions {
display: none;
}
#game-over {
display: none;
text-align: center;
}
#game-over-message {
font-size: 24px;
margin-bottom: 10px;
}
#round-score {
font-size: 18px;
color: #ffffff;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="menu">
<h1 id="score-heading">₿ITCOIN SNAKE</h1>
<div id="score" style="display: none;"></div>
<button id="play-button">PLAY</button>
<button id="how-to-play-button">How to Play</button>
</div>
<div id="game-container"></div>
<div id="instructions">Use the arrow keys to control the snake</div>
<div id="game-over">
<div id="game-over-message">make bitcoin magical again</div>
<div id="final-score"></div>
<div id="round-score"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const gameContainer = document.getElementById("game-container");
const menu = document.getElementById("menu");
const scoreElement = document.getElementById("score");
const playButton = document.getElementById("play-button");
const howToPlayButton = document.getElementById("how-to-play-button");
const instructions = document.getElementById("instructions");
const gameOverDiv = document.getElementById("game-over");
const gameOverMessageDiv = document.getElementById("game-over-message");
const finalScoreDiv = document.getElementById("final-score");
const roundScoreDiv = document.getElementById("round-score");
const gridSize = 20;
const gridWidth = gameContainer.offsetWidth / gridSize;
const gridHeight = gameContainer.offsetHeight / gridSize;
const initialSnakeSize = 3;
let snake = [
{ x: 2, y: 0 },
{ x: 1, y: 0 },
{ x: 0, y: 0 },
];
let food = generateFood();
let direction = "right";
let isGameOver = false;
let score = 0;
let roundScore = 0;
function generateFood() {
const x = Math.floor(Math.random() * gridWidth);
const y = Math.floor(Math.random() * gridHeight);
return { x, y };
}
function updateSnake() {
const head = { ...snake[0] };
switch (direction) {
case "up":
head.y--;
break;
case "down":
head.y++;
break;
case "left":
head.x--;
break;
case "right":
head.x++;
break;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
food = generateFood();
score++;
roundScore++;
scoreElement.innerHTML = score;
} else {
snake.pop();
}
checkGameOver();
}
function checkGameOver() {
const head = snake[0];
if (
head.x < 0 ||
head.x >= gridWidth ||
head.y < 0 ||
head.y >= gridHeight ||
snake.some((cell, index) => index !== 0 && cell.x === head.x && cell.y === head.y)
) {
isGameOver = true;
}
}
function draw() {
gameContainer.innerHTML = "";
snake.forEach((cell, index) => {
const snakeCell = document.createElement("div");
snakeCell.className = "cell";
snakeCell.style.top = cell.y * gridSize + "px";
snakeCell.style.left = cell.x * gridSize + "px";
if (index === 0) {
snakeCell.style.backgroundColor = "#00ff00";
}
gameContainer.appendChild(snakeCell);
});
const foodCell = document.createElement("div");
foodCell.className = "cell food";
foodCell.style.top = food.y * gridSize + "px";
foodCell.style.left = food.x * gridSize + "px";
foodCell.innerHTML = '<span style="color: #000000;">₿</span>'; // Bitcoin symbol
gameContainer.appendChild(foodCell);
}
function handleKeyPress(event) {
if (event.key === "ArrowUp" && direction !== "down") {
direction = "up";
} else if (event.key === "ArrowDown" && direction !== "up") {
direction = "down";
} else if (event.key === "ArrowLeft" && direction !== "right") {
direction = "left";
} else if (event.key === "ArrowRight" && direction !== "left") {
direction = "right";
}
}
function startGame() {
menu.style.display = "none";
instructions.style.display = "block";
gameOverDiv.style.display = "none";
score = 0;
scoreElement.innerHTML = score;
scoreElement.style.display = "none";
roundScore = 0;
roundScoreDiv.innerHTML = "";
isGameOver = false;
snake = [
{ x: 2, y: 0 },
{ x: 1, y: 0 },
{ x: 0, y: 0 },
];
food = generateFood();
direction = "right";
gameLoop();
}
function endGame() {
isGameOver = true;
gameOverMessageDiv.innerHTML = "make bitcoin magical again";
finalScoreDiv.innerHTML = "Score: " + score;
gameOverDiv.style.display = "block";
setTimeout(() => {
gameOverDiv.style.display = "none";
instructions.style.display = "none";
menu.style.display = "block";
finalScoreDiv.innerHTML = "";
roundScoreDiv.innerHTML = "Score: " + roundScore;
}, 3000);
}
function gameLoop() {
if (isGameOver) {
endGame();
return;
}
updateSnake();
draw();
setTimeout(gameLoop, 200);
}
playButton.addEventListener("click", startGame);
howToPlayButton.addEventListener("click", () => {
alert("Use the arrow keys to control the snake");
});
window.addEventListener("keydown", handleKeyPress);
});
</script>
</body>
</html>