1.进入Rocky_Linux虚拟机按Win键点击下方的终端2.熟悉命令ls --- 查看当前目录下的文件pwd --- 查看当前目录的绝对路径cd --- 切换到指定目录3.熟悉命令vi --- 打开文本文件若不存在则创建4.熟悉命令mkdir --- 创建文件夹5.演示系统管理登录如图点击登出6.点击未列出7.使用管理员账号输入root8.输入密码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.将以下贪吃蛇代码复制到文本中并且保存!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 classgame-container div classgame-header div classinfo-panel h3得分/h3 p idscore0/p /div div classinfo-panel h3速度/h3 p idspeed1/p /div button classbtn idrestart-btn重新开始/button /div div classgame-grid idgame-grid/div /div div classgame-over idgame-over h2游戏结束/h2 p最终得分span idfinal-score0/span/p button classbtn idreplay-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 /html18.点击如下目录19.点击如下目录20.点击如下目录21.点击如下目录22.修改名称并保存23.进入到对应目录确认文件已经保存24.访问以下URL贪吃蛇成功运行25.查看rocky linux的内网ipifconfig --- 查看ip信息26.使用xshell访问Rocky_Linux虚拟机27.填写如图信息并连接28.接受并保存29.输入用户名30.输入密码31.可以看到成功连接到rocky linux