SHOWING: First 60
<!DOCTYPE html>
<html>
<head>
<title>Snake Game</title>
<style>
body {
background-color: orange;
}
#game-board {
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
background-color: black;
}
.cell {
width: 20px;
height: 20px;
background-color: orange; /* Farbe der Schlange auf orange ändern */
position: absolute;
}
.bitcoin {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/800px-Bitcoin.svg.png');
background-size: cover;
}
</style>
</head>
<body>
<div id="game-board"></div>
<div id="score">Score: 0</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var gameBoard = document.getElementById("game-board");
var scoreElement = document.getElementById("score");
var gridSize = 20;
var gridWidth = gameBoard.offsetWidth / gridSize;
var gridHeight = gameBoard.offsetHeight / gridSize;
var snake = [{ x: 0, y: 0 }];
var direction = "right";
var bitcoinImage = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/800px-Bitcoin.svg.png";
var food = { x: Math.floor(Math.random() * gridWidth), y: Math.floor(Math.random() * gridHeight) };
var score = 0;
function draw() {
gameBoard.innerHTML = "";
snake.forEach(function (segment) {
var snakeCell = document.createElement("div");
snakeCell.className = "cell";
snakeCell.style.left = segment.x * gridSize + "px";
snakeCell.style.top = segment.y * gridSize + "px";
gameBoard.appendChild(snakeCell);
});
var foodCell = document.createElement("div");
foodCell.className = "cell bitcoin";
foodCell.style.left = food.x * gridSize + "px";
foodCell.style.top = food.y * gridSize + "px";
gameBoard.appendChild(foodCell);
}
function update() {
var head = Object.assign({}, snake[0]);
if (direction === "right") {
head.x++;
} else if (direction === "left") {
head.x--;
} else if (direction === "up") {
head.y--;
} else if (direction === "down") {
head.y++;
}
if (head.x < 0 || head.x >= gridWidth || head.y < 0 || head.y >= gridHeight) {
// Kollision mit Spielfeldrand
gameOver();
return;
}
if (snake.some(function (segment) { return segment.x === head.x && segment.y === head.y; })) {
// Kollision mit dem eigenen Schwanz
gameOver();
return;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
// Snake hat das Futter erreicht
food = { x: Math.floor(Math.random() * gridWidth), y: Math.floor(Math.random() * gridHeight) };
score += 10; // Punkte erhöhen
scoreElement.textContent = "Score: " + score;
} else {
snake.pop();
}
draw();
}
function changeDirection(event) {
var key = event.keyCode;
if (key === 37 && direction !== "right") {
direction = "left";
} else if (key === 38 && direction !== "down") {
direction = "up";
} else if (key === 39 && direction !== "left") {
direction = "right";
} else if (key === 40 && direction !== "up") {
direction = "down";
}
}
function gameOver() {
alert("Game Over. Your score is: " + score);
resetGame();
}
function resetGame() {
snake = [{ x: 0, y: 0 }];
direction = "right";
food = { x: Math.floor(Math.random() * gridWidth), y: Math.floor(Math.random() * gridHeight) };
score = 0; // Punktestand zurücksetzen
scoreElement.textContent = "Score: " + score;
draw();
}
draw();
setInterval(update, 200);
document.addEventListener("keydown", changeDirection);
});
</script>
</body>
</html>#15,564,245text107631.bitmap#13,080,895text107633.bitmap#13,080,835text