贪吃蛇小程序 代码地址
时间: 2023-12-25 18:03:19 浏览: 33
这里是一个简单的贪吃蛇小程序的代码,你可以参考一下:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.snake {
width: 20px;
height: 20px;
position: absolute;
background-color: blue;
}
.food {
width: 20px;
height: 20px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<h1>贪吃蛇游戏</h1>
<div id="game-board">
</div>
<script src="snake.js"></script>
</body>
</html>
```
JavaScript:
```javascript
// 创建游戏面板
const gameBoard = document.getElementById('game-board');
// 设置面板大小和格子数
const boardWidth = 400;
const boardHeight = 400;
const gridSize = 20;
// 计算格子数
const numCols = boardWidth / gridSize;
const numRows = boardHeight / gridSize;
// 初始化蛇和食物的位置
let snakeX = 10;
let snakeY = 10;
let foodX = 15;
let foodY = 15;
// 初始化蛇的方向
let dx = 1;
let dy = 0;
// 创建蛇和食物的元素
const snakeElement = document.createElement('div');
snakeElement.classList.add('snake');
gameBoard.appendChild(snakeElement);
const foodElement = document.createElement('div');
foodElement.classList.add('food');
gameBoard.appendChild(foodElement);
// 更新蛇和食物的位置
function update() {
// 移动蛇
snakeX += dx;
snakeY += dy;
// 碰到边界
if (snakeX < 0 || snakeX >= numCols || snakeY < 0 || snakeY >= numRows) {
alert('Game over!');
return;
}
// 更新蛇的位置
snakeElement.style.left = (snakeX * gridSize) + 'px';
snakeElement.style.top = (snakeY * gridSize) + 'px';
// 检查是否吃到了食物
if (snakeX === foodX && snakeY === foodY) {
// 重新生成食物位置
foodX = Math.floor(Math.random() * numCols);
foodY = Math.floor(Math.random() * numRows);
foodElement.style.left = (foodX * gridSize) + 'px';
foodElement.style.top = (foodY * gridSize) + 'px';
}
// 设置下一次更新的时间
setTimeout(update, 100);
}
// 开始游戏
update();
// 监听键盘事件,改变蛇的方向
document.addEventListener('keydown', (event) => {
switch (event.key) {
case 'ArrowLeft':
dx = -1;
dy = 0;
break;
case 'ArrowRight':
dx = 1;
dy = 0;
break;
case 'ArrowUp':
dx = 0;
dy = -1;
break;
case 'ArrowDown':
dx = 0;
dy = 1;
break;
}
});
```
这是一个非常简单的贪吃蛇小程序,只有基本的功能。如果你想要实现更多的功能,比如蛇的长度增加、游戏难度逐渐增加等,需要更多的代码和逻辑。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)