使用HTML的Canvas元素和JavaScript来制作的贪吃蛇👏🏻👏🏻👏🏻
📝个人主页→数据挖掘博主ZTLJQ的主页
个人推荐python学习系列：
☄️爬虫JS逆向系列专栏 - 爬虫逆向教学
☄️python系列专栏 - 从零开始学python
没时间摸鱼，没时间开黑，需要写大学课程的HTML5作业，以下提供一个贪吃蛇小游戏给大家做做参考，话不多说直接上代码。
复制粘贴就可以运行，简单方便
<!DOCTYPE html> <html> <head> <title>ZTLJQ的贪吃蛇小游戏</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <h1>贪吃蛇小游戏</h1> <canvas id="game-canvas" width="800" height="600"></canvas> <script> // 获取画布元素 const canvas = document.getElementById('game-canvas'); const ctx = canvas.getContext('2d'); // 游戏区域的宽度和高度 const canvasWidth = canvas.width; const canvasHeight = canvas.height; // 蛇身每个部分的大小 const dotSize = 20; // 蛇的移动速度 const snakeSpeed = 200; // 初始蛇的长度 const initialSnakeLength = 3; // 蛇的移动方向 let direction = 'right'; // 蛇的身体部分 let snake = []; // 食物的位置 let foodPosition = {}; // 游戏是否结束的标志 let gameOver = false; // 初始化游戏 function initGame() { // 创建蛇的初始位置 for (let i = 0; i < initialSnakeLength; i++) { snake.push({ x: (initialSnakeLength - 1 - i) * dotSize, y: 0 }); } // 创建食物的位置 generateFood(); // 开始游戏循环 gameLoop(); } // 创建食物的位置 function generateFood() { const maxPos = canvasWidth / dotSize; foodPosition = { x: Math.floor(Math.random() * maxPos) * dotSize, y: Math.floor(Math.random() * maxPos) * dotSize }; // 检查食物是否出现在蛇的身体上，如果是，重新生成 for (let i = 0; i < snake.length; i++) { if (snake[i].x === foodPosition.x && snake[i].y === foodPosition.y) { generateFood(); break; } } } // 游戏循环 function gameLoop() { if (gameOver) { return; } setTimeout(function() { moveSnake(); if (!gameOver) { gameLoop(); } }, snakeSpeed); } // 移动蛇 function moveSnake() { // 获取蛇头的位置 const head = { x: snake[0].x, y: snake[0].y }; // 根据方向更新蛇头的位置 switch (direction) { case 'up': head.y -= dotSize; break; case 'down': head.y += dotSize; break; case 'left': head.x -= dotSize; break; case 'right': head.x += dotSize; break; } // 检查蛇头是否撞墙或撞到自己的身体 if ( head.x < 0 || head.y < 0 || head.x >= canvasWidth || head.y >= canvasHeight || checkCollision(head) ) { gameOver = true; alert('游戏结束！'); return; } // 将新的蛇头加入到蛇身体的第一个位置 snake.unshift(head); // 检查蛇是否吃到食物 if (head.x === foodPosition.x && head.y === foodPosition.y) { // 生成新的食物 generateFood(); } else { // 如果蛇没有吃到食物，移除蛇尾 snake.pop(); } // 更新游戏画面 renderGame(); } // 检查蛇头是否和身体的其他部分重叠 function checkCollision(head) { for (let i = 1; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { return true; } } return false; } // 更新游戏画面 function renderGame() { // 清空画布 ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 绘制蛇身 for (let i = 0; i < snake.length; i++) { ctx.fillStyle = i === 0 ? 'green' : 'lime'; ctx.fillRect(snake[i].x, snake[i].y, dotSize, dotSize); ctx.strokeStyle = 'black'; ctx.strokeRect(snake[i].x, snake[i].y, dotSize, dotSize); } // 绘制食物 ctx.fillStyle = 'red'; ctx.fillRect(foodPosition.x, foodPosition.y, dotSize, dotSize); ctx.strokeStyle = 'black'; ctx.strokeRect(foodPosition.x, foodPosition.y, dotSize, dotSize); } // 监听键盘按键事件 document.addEventListener('keydown', function(event) { switch (event.key) { case 'ArrowUp': if (direction !== 'down') { direction = 'up'; } break; case 'ArrowDown': if (direction !== 'up') { direction = 'down'; } break; case 'ArrowLeft': if (direction !== 'right') { direction = 'left'; } break; case 'ArrowRight': if (direction !== 'left') { direction = 'right'; } break; } }); // 初始化游戏 initGame(); </script> </body> </html>
