二、初识rocky linux

1.进入Rocky_Linux虚拟机，按Win键，点击下方的终端
2.熟悉命令
3.熟悉命令
vi --- 打开文本文件，若不存在则创建
4.熟悉命令
mkdir --- 创建文件夹
5.演示系统管理登录，如图点击登出
6.点击未列出
7.使用管理员账号，输入root
8.输入密码
9.演示网页服务，yum安装http服务
yum -y install --- 用于安装服务，-y是安装过程中默认确认
10.启动http服务
systemctl start --- 启动服务
11.打开火狐浏览器
12.访问本地localhost，可以看到服务打开
13.关闭http服务
systemctl stop --- 关闭服务
14.刷新可以看到连接失败
15.熟悉命令
systemctl restart --- 重启服务，常用于修改了服务参数后重启
systemctl enable --- 开启服务开机自启
systemctl disable --- 关闭服务开机自启
16.打开文本编辑器
17.将以下贪吃蛇代码复制到文本中，并且保存
bash 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经典贪吃蛇</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #1a2a6c 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            padding: 20px;
        }

        .game-container {
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(8px);
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        .game-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            gap: 30px;
        }

        .info-panel {
            background: rgba(255, 255, 255, 0.1);
            padding: 10px 20px;
            border-radius: 8px;
            min-width: 100px;
        }

        .info-panel h3 {
            font-size: 16px;
            margin-bottom: 5px;
            opacity: 0.8;
        }

        #score, #speed {
            font-size: 24px;
            font-weight: bold;
            color: #ffd700;
        }

        .btn {
            background: #ff6b6b;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn:hover {
            background: #ff4949;
            transform: translateY(-2px);
        }

        /* 游戏网格 */
        .game-grid {
            display: grid;
            grid-template-columns: repeat(20, 1fr);
            gap: 1px;
            background: #333;
            border: 2px solid #fff;
            border-radius: 8px;
            overflow: hidden;
        }

        .grid-cell {
            width: 20px;
            height: 20px;
            background: #111;
        }

        .grid-cell.snake {
            background: #00ff00;
            border-radius: 3px;
        }

        .grid-cell.food {
            background: #ff0000;
            border-radius: 50%;
        }

        /* 游戏结束弹窗 */
        .game-over {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
            display: none;
        }

        .game-over h2 {
            font-size: 48px;
            margin-bottom: 20px;
            color: #ff6b6b;
            text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
        }

        .game-over p {
            font-size: 28px;
            margin-bottom: 30px;
        }

        .game-over .btn {
            font-size: 18px;
            padding: 12px 24px;
        }

        /* 响应式调整 */
        @media (max-width: 500px) {
            .grid-cell {
                width: 15px;
                height: 15px;
            }
            .game-header {
                flex-direction: column;
                gap: 10px;
            }
            .game-over h2 {
                font-size: 36px;
            }
            .game-over p {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="game-header">
            <div class="info-panel">
                <h3>得分</h3>
                <p id="score">0</p>
            </div>
            <div class="info-panel">
                <h3>速度</h3>
                <p id="speed">1</p>
            </div>
            <button class="btn" id="restart-btn">重新开始</button>
        </div>
        <div class="game-grid" id="game-grid"></div>
    </div>

    <div class="game-over" id="game-over">
        <h2>游戏结束！</h2>
        <p>最终得分：<span id="final-score">0</span></p>
        <button class="btn" id="replay-btn">再来一局</button>
    </div>

    <script>
        // 游戏配置
        const config = {
            gridSize: 20,        // 网格尺寸（20x20）
            initialSpeed: 200,   // 初始移动间隔（毫秒）
            speedStep: 10,       // 每吃一次食物加速（毫秒）
            minSpeed: 80         // 最小移动间隔（最快速度）
        };

        // 游戏状态
        let gameState = {
            snake: [              // 蛇身（坐标数组，头部在前）
                { x: 10, y: 10 }  // 初始位置
            ],
            direction: 'right',   // 初始方向
            nextDirection: 'right',// 下一个方向（解决方向切换冲突）
            food: { x: 5, y: 5 }, // 食物位置
            score: 0,             // 得分
            speed: 1,             // 速度等级
            moveInterval: null,   // 移动定时器
            isPaused: false       // 是否暂停
        };

        // DOM 元素
        const gameGrid = document.getElementById('game-grid');
        const scoreEl = document.getElementById('score');
        const speedEl = document.getElementById('speed');
        const gameOverEl = document.getElementById('game-over');
        const finalScoreEl = document.getElementById('final-score');
        const restartBtn = document.getElementById('restart-btn');
        const replayBtn = document.getElementById('replay-btn');

        // 初始化游戏
        function initGame() {
            // 重置游戏状态
            gameState = {
                snake: [{ x: 10, y: 10 }],
                direction: 'right',
                nextDirection: 'right',
                food: generateFood(),
                score: 0,
                speed: 1,
                moveInterval: null,
                isPaused: false
            };

            // 更新 UI
            scoreEl.textContent = gameState.score;
            speedEl.textContent = gameState.speed;
            gameOverEl.style.display = 'none';

            // 创建网格
            createGrid();

            // 启动游戏
            startGame();

            // 绑定键盘事件
            bindKeyboardEvents();
        }

        // 创建游戏网格
        function createGrid() {
            gameGrid.innerHTML = '';
            gameGrid.style.gridTemplateColumns = `repeat(${config.gridSize}, 1fr)`;

            // 创建网格单元格
            for (let y = 0; y < config.gridSize; y++) {
                for (let x = 0; x < config.gridSize; x++) {
                    const cell = document.createElement('div');
                    cell.className = 'grid-cell';
                    cell.dataset.x = x;
                    cell.dataset.y = y;
                    gameGrid.appendChild(cell);
                }
            }

            // 渲染蛇和食物
            renderSnake();
            renderFood();
        }

        // 生成随机食物（不与蛇身重叠）
        function generateFood() {
            let food;
            do {
                food = {
                    x: Math.floor(Math.random() * config.gridSize),
                    y: Math.floor(Math.random() * config.gridSize)
                };
            } while (
                // 检查食物是否在蛇身上
                gameState.snake.some(segment => segment.x === food.x && segment.y === food.y)
            );
            return food;
        }

        // 渲染蛇
        function renderSnake() {
            // 清除之前的蛇
            document.querySelectorAll('.grid-cell.snake').forEach(cell => {
                cell.classList.remove('snake');
            });

            // 渲染新蛇身
            gameState.snake.forEach(segment => {
                const cell = document.querySelector(`.grid-cell[data-x="${segment.x}"][data-y="${segment.y}"]`);
                if (cell) cell.classList.add('snake');
            });
        }

        // 渲染食物
        function renderFood() {
            // 清除之前的食物
            document.querySelectorAll('.grid-cell.food').forEach(cell => {
                cell.classList.remove('food');
            });

            // 渲染新食物
            const cell = document.querySelector(`.grid-cell[data-x="${gameState.food.x}"][data-y="${gameState.food.y}"]`);
            if (cell) cell.classList.add('food');
        }

        // 移动蛇
        function moveSnake() {
            if (gameState.isPaused) return;

            // 更新方向（避免180度转弯）
            const directionMap = {
                up: { dx: 0, dy: -1, opposite: 'down' },
                down: { dx: 0, dy: 1, opposite: 'up' },
                left: { dx: -1, dy: 0, opposite: 'right' },
                right: { dx: 1, dy: 0, opposite: 'left' }
            };

            // 确保不能反向移动
            if (gameState.nextDirection !== directionMap[gameState.direction].opposite) {
                gameState.direction = gameState.nextDirection;
            }

            const { dx, dy } = directionMap[gameState.direction];
            const head = { x: gameState.snake[0].x + dx, y: gameState.snake[0].y + dy };

            // 检查碰撞（边界或自身）
            if (
                head.x < 0 || head.x >= config.gridSize || // 边界碰撞
                head.y < 0 || head.y >= config.gridSize ||
                gameState.snake.some(segment => segment.x === head.x && segment.y === head.y) // 自身碰撞
            ) {
                gameOver();
                return;
            }

            // 添加新头部
            gameState.snake.unshift(head);

            // 检查是否吃到食物
            if (head.x === gameState.food.x && head.y === gameState.food.y) {
                // 加分
                gameState.score += 10;
                scoreEl.textContent = gameState.score;

                // 加速
                gameState.speed++;
                speedEl.textContent = gameState.speed;
                restartMoveInterval();

                // 生成新食物
                gameState.food = generateFood();
                renderFood();
            } else {
                // 没吃到食物，移除尾部
                gameState.snake.pop();
            }

            // 重新渲染蛇
            renderSnake();
        }

        // 启动游戏（设置移动定时器）
        function startGame() {
            // 清除之前的定时器
            if (gameState.moveInterval) {
                clearInterval(gameState.moveInterval);
            }

            // 计算当前速度（初始速度 - 加速步数 * 速度步长，不低于最小速度）
            const currentSpeed = Math.max(
                config.initialSpeed - (gameState.speed - 1) * config.speedStep,
                config.minSpeed
            );

            // 设置新定时器
            gameState.moveInterval = setInterval(moveSnake, currentSpeed);
        }

        // 重启移动定时器（加速时调用）
        function restartMoveInterval() {
            startGame();
        }

        // 游戏结束
        function gameOver() {
            clearInterval(gameState.moveInterval);
            finalScoreEl.textContent = gameState.score;
            gameOverEl.style.display = 'flex';
        }

        // 绑定键盘事件
        function bindKeyboardEvents() {
            document.addEventListener('keydown', (e) => {
                switch (e.key) {
                    case 'ArrowUp':
                        gameState.nextDirection = 'up';
                        break;
                    case 'ArrowDown':
                        gameState.nextDirection = 'down';
                        break;
                    case 'ArrowLeft':
                        gameState.nextDirection = 'left';
                        break;
                    case 'ArrowRight':
                        gameState.nextDirection = 'right';
                        break;
                    case ' ': // 空格键暂停/继续
                        gameState.isPaused = !gameState.isPaused;
                        break;
                }
            });
        }

        // 绑定按钮事件
        restartBtn.addEventListener('click', initGame);
        replayBtn.addEventListener('click', initGame);

        // 初始化游戏
        window.addEventListener('load', initGame);
    </script>
</body>
</html>