html代码玩贪吃蛇

贪吃蛇是一款非常经典的游戏，现在我们可以通过HTML代码来实现它。下面是一个基本版的贪吃蛇，你可以通过键盘控制它的移动。

<!DOCTYPE html>
<html>
<head>
    <Meta charset="UTF-8">
    <title>贪吃蛇</title>
    <style>
        .container {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: relative;
        }

        .snake {
            width: 20px;
            height: 20px;
            background-color: green;
            position: absolute;
            left: 0;
            top: 0;
        }

        .food {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <h1>贪吃蛇</h1>
    <div class="container">
        <div class="snake"></div>
        <div class="food"></div>
    </div>
    <script>
        var snake = document.querySelector(".snake");
        var food = document.querySelector(".food");
        var container = document.querySelector(".container");

        var snakeX = 0;
        var snakeY = 0;

        var foodX = Math.floor(Math.random() * 25) * 20;
        var foodY = Math.floor(Math.random() * 25) * 20;

        food.style.left = foodX + "px";
        food.style.top = foodY + "px";

        document.addEventListener("keydown",function(event) {
            if (event.keyCode === 37) {
                snakeX -= 20;
            } else if (event.keyCode === 38) {
                snakeY -= 20;
            } else if (event.keyCode === 39) {
                snakeX += 20;
            } else if (event.keyCode === 40) {
                snakeY += 20;
            }

            snake.style.left = snakeX + "px";
            snake.style.top = snakeY + "px";
        });
    </script>
</body>
</html>

html代码玩贪吃蛇

在代码中，我们用了一个container来包裹整个游戏界面，它有固定的宽高，边框为1像素黑色。我们用了一个snake和一个food分别代表蛇和食物，它们都有宽高和颜色。

在JavaScript中，我们用变量snakeX和snakeY来表示蛇的位置，foodX和foodY来表示食物的位置。我们利用Math.random()函数和Math.floor()函数来随机生成食物的位置。

我们给document添加了一个keydown事件监听器，当按下方向键时，改变蛇的位置，并将其更新到页面中。

通过这段代码，你可以体验到传统的贪吃蛇游戏。你可以自己尝试添加更多功能，比如蛇的长度和速度，以及碰到边界和自己身体的处理方式。让我们一起享受编程的乐趣吧！

相关推荐