HTML贪吃蛇游戏 - 全屏控制，加减速，记录最高分 - 常规

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        overflow: hidden;
    }
    canvas {
        background-color: black;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="100%" height="100%"></canvas>
<script>
    window.onload = function() {
        // 获取画布
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        
        // 定义贪吃蛇的初始位置和大小
        var snakeSize = 20;
        var snakeX = canvas.width / 2;
        var snakeY = canvas.height / 2;
        
        // 定义贪吃蛇的移动速度和初始方向
        var snakeSpeed = 100;
        var snakeDirection = 'right';
        
        // 定义食物的位置和大小
        var foodSize = 20;
        var foodX;
        var foodY;
        
        // 定义贪吃蛇的身体
        var snakeBody = [];
        var snakeLength = 1;
        
        // 定义游戏状态
        var gameOver = false;
        var maxScore = 0;
        
        // 监听键盘事件
        document.addEventListener("keydown", changeDirection);
        
        // 生成随机食物的位置
        function generateFood() {
            foodX = Math.floor(Math.random() * (canvas.width / foodSize)) * foodSize;
            foodY = Math.floor(Math.random() * (canvas.height / foodSize)) * foodSize;
        }
        
        // 改变贪吃蛇的方向
        function changeDirection(event) {
            var key = event.keyCode;
            if (key === 37 && snakeDirection !== 'right') { // 左箭头键
                snakeDirection = 'left';
            } else if (key === 38 && snakeDirection !== 'down') { // 上箭头键
                snakeDirection = 'up';
            } else if (key === 39 && snakeDirection !== 'left') { // 右箭头键
                snakeDirection = 'right';
            } else if (key === 40 && snakeDirection !== 'up') { // 下箭头键
                snakeDirection = 'down';
            } else if (key === 32) { // 空格键
                if (snakeSpeed === 100) {
                    snakeSpeed = 50;
                } else {
                    snakeSpeed = 100;
                }
            }
        }
        
        // 绘制贪吃蛇和食物
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制贪吃蛇
            ctx.fillStyle = 'white';
            for (var i = 0; i < snakeBody.length; i++) {
                ctx.fillRect(snakeBody[i].x, snakeBody[i].y, snakeSize, snakeSize);
            }
            
            // 绘制食物
            ctx.fillStyle = 'red';
            ctx.fillRect(foodX, foodY, foodSize, foodSize);
            
            // 获取贪吃蛇的头部位置
            var snakeHeadX = snakeBody[0].x;
            var snakeHeadY = snakeBody[0].y;
            
            // 移动贪吃蛇
            if (snakeDirection === 'right') {
                snakeHeadX += snakeSize;
            } else if (snakeDirection === 'left') {
                snakeHeadX -= snakeSize;
            } else if (snakeDirection === 'up') {
                snakeHeadY -= snakeSize;
            } else if (snakeDirection === 'down') {
                snakeHeadY += snakeSize;
            }
            
            // 判断是否吃到食物
            if (snakeHeadX === foodX && snakeHeadY === foodY) {
                // 增加贪吃蛇的长度
                snakeLength++;
                // 重新生成食物的位置
                generateFood();
            } else {
                // 移除贪吃蛇的尾部
                snakeBody.pop();
            }
            
            // 判断游戏结束的条件
            if (snakeHeadX < 0 || snakeHeadX >= canvas.width || snakeHeadY < 0 || snakeHeadY >= canvas.height || checkCollision(snakeHeadX, snakeHeadY)) {
                gameOver = true;
                if (snakeLength - 1 > maxScore) {
                    maxScore = snakeLength - 1;
                }
                alert('Game Over! Your Score: ' + (snakeLength - 1) + '\nMax Score: ' + maxScore);
            }
            
            // 添加贪吃蛇的新头部
            var newHead = {
                x: snakeHeadX,
                y: snakeHeadY
            };
            snakeBody.unshift(newHead);
            
            // 更新游戏画面
            setTimeout(draw, snakeSpeed);
        }
        
        // 检测贪吃蛇是否触碰到自身
        function checkCollision(x, y) {
            for (var i = 1; i < snakeBody.length; i++) {
                if (x === snakeBody[i].x && y === snakeBody[i].y) {
                    return true;
                }
            }
            return false;
        }
        
        // 开始游戏
        function startGame() {
            gameOver = false;
            snakeBody = [];
            snakeLength = 1;
            snakeX = canvas.width / 2;
            snakeY = canvas.height / 2;
            snakeDirection = 'right';
            snakeSpeed = 100;
            generateFood();
            draw();
        }
        
        // 启动游戏
        startGame();
    };
</script>
</body>
</html>