Register
> 博客>

贪吃蛇html源代码

新速特源码 1年前 37 0

<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #333;
}
canvas {
display: block;
margin: 0 auto;
background-color: #eee;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
// 获取画布和上下文
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);

    // 定义格子大小和行列数
    var gridSize = 20;
    var rows = canvas.height / gridSize;
    var cols = canvas.width / gridSize;

    // 定义蛇的初始位置和长度
    var snake = [{x: 5, y: 5}, {x: 4, y: 5}, {x: 3, y: 5}];
    var direction = "right";

    // 定义食物的初始位置
    var food = {x: Math.floor(Math.random() * cols), y: Math.floor(Math.random() * rows)};

    // 定义游戏循环
    function gameLoop() {
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制蛇
        ctx.fillStyle = "#00ff00";
        snake.forEach(function(segment) {
            ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
        });

        // 绘制食物
        ctx.fillStyle = "#ff0000";
        ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);

        // 移动蛇
        var head = {x: snake[0].x, y: snake[0].y};
        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 = {x: Math.floor(Math.random() * cols), y: Math.floor(Math.random() * rows)};
        } else {
            snake.pop();
        }

        // 判断是否撞墙或撞到自己
        if(head.x < 0 || head.x >= cols || head.y < 0 || head.y >= rows) {
            clearInterval(intervalId);
            alert("游戏结束！");
        }
        snake.slice(1).forEach(function(segment) {
            if(head.x === segment.x && head.y === segment.y) {
                clearInterval(intervalId);
                alert("游戏结束！");
            }
        });
    }

    // 监听键盘事件
    document.addEventListener("keydown", function(event) {
        switch(event.keyCode) {
            case 38: // up arrow
                if(direction !== "down") {
                    direction = "up";
                }
                break;
            case 40: // down arrow
                if(direction !== "up") {
                    direction = "down";
                }
                break;
            case 37: // left arrow
                if(direction !== "right") {
                    direction = "left";
                }
                break;
            case 39: // right arrow
                if(direction !== "left") {
                    direction = "right";
                }
                break;
        }
    });

    // 开始游戏循环
    var intervalId = setInterval(gameLoop, 100);
</script>

</body>
</html>

这是一个简单的贪吃蛇游戏的 HTML 源代码。该代码使用了 HTML5 的 canvas 元素和 JavaScript 语言实现了游戏的逻辑和界面。

代码中定义了格子大小、行列数、蛇的初始位置和长度、食物的初始位置等变量。游戏循环中，先清空画布，然后绘制蛇和食物，接着根据方向移动蛇，并判断是否吃到食物或撞墙或撞到自己，最后更新蛇的位置和长度。键盘事件监听器用于改变蛇的移动方向。游戏循环使用 setInterval 函数实现，每隔一定时间执行一次 gameLoop 函数。

该代码可以作为初学者学习 HTML5 canvas 和 JavaScript 的一个练手项目，也可以作为进阶者实现更复杂的贪吃蛇游戏的基础。

腾讯云最新优惠活动，点击查看

Related

热门文章

微海报