以下是一个简单的贪吃蛇游戏的HTML代码它可以通过方向键操作并且支持空格键加速。游戏范围为手机全屏并且拥有颜色可以通过吃游戏范围内的食物来增加长度。如果蛇头碰到游戏范围界限或者自身游戏将结束。游戏结束后可以记录最大长度并且有重新开始按键。此外代码还支持手机屏幕滑动操作上下左右。
<!DOCTYPE html>
<html>
<head>
<style>
#gameArea {
position: relative;
width: 100vw;
height: 100vh;
background-color: #000;
}
<pre><code> #snake {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background-color: #fff;
}
#food {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background-color: #f00;
}
</style>
</code></pre>
</head>
<body>
<div id="gameArea"></div>
<pre><code><script>
var gameArea = document.getElementById("gameArea");
var snake = document.getElementById("snake");
var food = document.getElementById("food");
var direction = "right";
var speed = 1;
var score = 0;
var maxLength = 0;
var gameLoop;
function startGame() {
direction = "right";
speed = 1;
score = 0;
maxLength = 0;
snake.style.top = "0px";
snake.style.left = "0px";
createFood();
gameLoop = setInterval(moveSnake, 1000 / speed);
document.addEventListener("keydown", handleKeyPress);
gameArea.addEventListener("touchstart", handleTouchStart, false);
gameArea.addEventListener("touchmove", handleTouchMove, false);
}
function endGame() {
clearInterval(gameLoop);
document.removeEventListener("keydown", handleKeyPress);
gameArea.removeEventListener("touchstart", handleTouchStart, false);
gameArea.removeEventListener("touchmove", handleTouchMove, false);
if (score > maxLength) {
maxLength = score;
}
alert("Game Over! Your score: " + score + " Max length: " + maxLength);
}
function moveSnake() {
var currentTop = parseInt(snake.style.top);
var currentLeft = parseInt(snake.style.left);
switch (direction) {
case "up":
currentTop -= 10;
break;
case "down":
currentTop += 10;
break;
case "left":
currentLeft -= 10;
break;
case "right":
currentLeft += 10;
break;
}
if (
currentLeft < 0 ||
currentTop < 0 ||
currentLeft >= gameArea.offsetWidth ||
currentTop >= gameArea.offsetHeight
) {
endGame();
return;
}
snake.style.top = currentTop + "px";
snake.style.left = currentLeft + "px";
if (checkCollision(food)) {
score++;
createFood();
speed += 0.5;
clearInterval(gameLoop);
gameLoop = setInterval(moveSnake, 1000 / speed);
}
}
function handleKeyPress(event) {
switch (event.keyCode) {
case 32: // Space key for acceleration
clearInterval(gameLoop);
gameLoop = setInterval(moveSnake, 1000 / (speed * 2));
break;
case 37: // Left arrow key
if (direction !== "right") {
direction = "left";
}
break;
case 38: // Up arrow key
if (direction !== "down") {
direction = "up";
}
break;
case 39: // Right arrow key
if (direction !== "left") {
direction = "right";
}
break;
case 40: // Down arrow key
if (direction !== "up") {
direction = "down";
}
break;
}
}
var xDown = null;
var yDown = null;
function handleTouchStart(event) {
xDown = event.touches[0].clientX;
yDown = event.touches[0].clientY;
}
function handleTouchMove(event) {
if (!xDown || !yDown) {
return;
}
var xUp = event.touches[0].clientX;
var yUp = event.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if (Math.abs(xDiff) > Math.abs(yDiff)) {
if (xDiff > 0 && direction !== "right") {
direction = "left";
} else if (xDiff < 0 && direction !== "left") {
direction = "right";
}
} else {
if (yDiff > 0 && direction !== "down") {
direction = "up";
} else if (yDiff < 0 && direction !== "up") {
direction = "down";
}
}
xDown = null;
yDown = null;
}
function checkCollision(element) {
var snakeRect = snake.getBoundingClientRect();
var elementRect = element.getBoundingClientRect();
return !(
snakeRect.right < elementRect.left ||
snakeRect.left > elementRect.right ||
snakeRect.bottom < elementRect.top ||
snakeRect.top > elementRect.bottom
);
}
function createFood() {
var maxX = gameArea.offsetWidth / 10;
var maxY = gameArea.offsetHeight / 10;
var randomX = Math.floor(Math.random() * maxX) * 10;
var randomY = Math.floor(Math.random() * maxY) * 10;
food.style.top = randomY + "px";
food.style.left = randomX + "px";
}
startGame();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/i7Er 著作权归作者所有。请勿转载和采集!