<!DOCTYPE html> <html> <head> <title>贪吃蛇游戏</title> <style> #game-board { width: 600px; height: 600px; border: 1px solid #000; position: relative; margin: 0 auto; } .snake-node { width: 20px; height: 20px; background-color: #000; position: absolute; } #food { width: 20px; height: 20px; background-color: red; position: absolute; } #score { text-align: center; margin-top: 20px; } #pause-btn { display: block; margin: 10px auto; } #restart-btn { display: block; margin: 10px auto; } </style> </head> <body> <h1 style="text-align: center;">贪吃蛇游戏</h1> <div id="game-board"></div> <div id="score">得分:<span id="score-value">0</span></div> <button id="pause-btn">暂停</button> <button id="restart-btn">重新开始</button> <script> var gameBoard = document.getElementById('game-board'); var scoreDisplay = document.getElementById('score-value'); var pauseBtn = document.getElementById('pause-btn'); var restartBtn = document.getElementById('restart-btn'); var gridSize = 30; // 网格大小 var snakeSize = 20; // 蛇身大小 var snakeSpeed = 200; // 蛇移动速度(毫秒) var snakeDirection = 'right'; // 蛇移动方向 var snake = [{ x: 0, y: 0 }]; // 蛇的初始位置 var food = null; // 食物的位置 var score = 0; // 得分 var gameInterval = null; // 游戏循环定时器 // 初始化游戏 function initializeGame() { createSnake(); generateFood(); gameInterval = setInterval(moveSnake, snakeSpeed); pauseBtn.addEventListener('click', togglePause); restartBtn.addEventListener('click', restartGame); document.addEventListener('keydown', changeDirection); } // 创建蛇 function createSnake() { for (var i = 0; i < snake.length; i++) { var node = document.createElement('div'); node.className = 'snake-node'; node.style.left = snake[i].x + 'px'; node.style.top = snake[i].y + 'px'; gameBoard.appendChild(node); } } // 生成食物 function generateFood() { var x = getRandomPosition(); var y = getRandomPosition(); while (isOverlapping(x, y)) { x = getRandomPosition(); y = getRandomPosition(); } food = { x: x, y: y }; var foodNode = document.createElement('div'); foodNode.id = 'food'; foodNode.style.left = food.x + 'px'; foodNode.style.top = food.y + 'px'; gameBoard.appendChild(foodNode); } // 获取一个随机位置 function getRandomPosition() { return Math.floor(Math.random() * gridSize) * snakeSize; } // 判断位置是否与蛇或食物重叠 function isOverlapping(x, y) { for (var i = 0; i < snake.length; i++) { if (snake[i].x === x && snake[i].y === y) { return true; } } if (food && food.x === x && food.y === y) { return true; } return false; } // 移动蛇 function moveSnake() { var newHead = { x: snake[0].x, y: snake[0].y }; switch (snakeDirection) { case 'right': newHead.x += snakeSize; break; case 'left': newHead.x -= snakeSize; break; case 'up': newHead.y -= snakeSize; break; case 'down': newHead.y += snakeSize; break; } // 判断是否吃到食物 if (food && food.x === newHead.x && food.y === newHead.y) { score++; scoreDisplay.textContent = score; gameBoard.removeChild(document.getElementById('food')); generateFood(); } else { snake.pop(); } // 判断是否游戏结束 if (newHead.x < 0 || newHead.x >= gridSize * snakeSize || newHead.y < 0 || newHead.y >= gridSize * snakeSize || isOverlapping(newHead.x, newHead.y)) { clearInterval(gameInterval); alert('游戏结束!得分:' + score + '\n点击"重新开始"按钮重新开始游戏。'); return; } snake.unshift(newHead); updateSnakePosition(); } // 更新蛇的位置 function updateSnakePosition() { var snakeNodes = document.getElementsByClassName('snake-node'); while (snakeNodes.length > 0) { gameBoard.removeChild(snakeNodes[0]); } for (var i = 0; i < snake.length; i++) { var node = document.createElement('div'); node.className = 'snake-node'; node.style.left = snake[i].x + 'px'; node.style.top = snake[i].y + 'px'; gameBoard.appendChild(node); } } // 切换暂停/继续游戏 function togglePause() { if (gameInterval) { clearInterval(gameInterval); gameInterval = null; pauseBtn.textContent = '继续'; } else { gameInterval = setInterval(moveSnake, snakeSpeed); pauseBtn.textContent = '暂停'; } } // 重新开始游戏 function restartGame() { clearInterval(gameInterval); gameBoard.innerHTML = ''; snake = [{ x: 0, y: 0 }]; score = 0; scoreDisplay.textContent = score; snakeDirection = 'right'; initializeGame(); } // 改变蛇的移动方向 function changeDirection(event) { switch (event.keyCode) { case 37: if (snakeDirection !== 'right') { snakeDirection = 'left'; } break; case 38: if (snakeDirection !== 'down') { snakeDirection = 'up'; } break; case 39: if (snakeDirection !== 'left') { snakeDirection = 'right'; } break; case 40: if (snakeDirection !== 'up') { snakeDirection = 'down'; } break; } } // 启动游戏 initializeGame(); </script> </body> </html>
js教程
简单的贪吃蛇小游戏源码
我的站长站
2023-07-01
共人阅读
相关推荐
- 贪吃蛇源码
-
带看板娘玩法指导的贪吃蛇小游戏源码
源码介绍左下角带看板娘插件,给玩家实时提示和介绍游戏玩法。上下左右控制方向,数字0暂停,E加速,Q 减速,回车自动/手动切换。游戏源码截图...
-
安卓贪吃蛇游戏源码
安卓贪吃蛇 就是对Eclipse中Snake的改下,在其基础上添加了,Menu菜单按钮,还有就是点击手机屏幕的效果
-
jQuery贪吃蛇网页版小游戏源码
jQuery贪吃蛇网页版小游戏源码,纯jQuery+html开发,可自定义玩家名称,玩法跟原版贪吃蛇一样,使用键盘上下左右控制即可。贪吃蛇源码截图...
最新更新
-
echarts柱状图样式参数
1:线条/节点颜色series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', ...
-
百度echarts柱状图使用教程
echarts简介echarts是百度出品的一款开源JS柱状图框架,目前市面柱状图大部分都是使用这...
-
网站已运行时间JS代码,分秒实时动态跳动
网站运行时间JS代码<style> #uptime { position: fixed; /* 固定定位 */ bottom: 0; /* ...
-
如何新建修改删除cookie
加载js库我们需要准备两个js库,一个是jquery.js,另一个是jquery.cookie.js这两个js库<script src="https://c...
-
Gridstack.js交互式仪表板Typescript库
项目介绍Gridstack.js是一个专注交互式仪表板Typescript库,用于仪表板布局和创建,只需几...