帮我用js写一个贪吃蛇demo
时间: 2023-08-20 10:22:43 浏览: 46
好的，以下是一个简单的贪吃蛇demo，代码中有注释说明：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
/* 定义蛇和食物的样式 */
.snake, .food {
width: 20px;
height: 20px;
position: absolute;
background-color: green;
}
/* 定义游戏区域的样式 */
#game {
width: 500px;
height: 500px;
position: relative;
margin: auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="game"></div>
<script>
// 获取游戏区域
var game = document.getElementById('game');
// 定义蛇的初始位置、长度和移动方向
var snake = [{x: 0, y: 0}, {x: 20, y: 0}, {x: 40, y: 0}];
var snakeLength = 3;
var direction = 'right';
// 定义食物的初始位置
var food = {x: 200, y: 200};
// 初始化游戏
function init() {
// 绘制蛇和食物
drawSnake();
drawFood();
// 开始移动蛇
setInterval(moveSnake, 100);
}
// 绘制蛇
function drawSnake() {
// 删除之前的蛇
var oldSnake = document.getElementsByClassName('snake');
while (oldSnake.length > 0) {
game.removeChild(oldSnake[0]);
}
// 绘制新的蛇
for (var i = 0; i < snakeLength; i++) {
var s = document.createElement('div');
s.className = 'snake';
s.style.left = snake[i].x + 'px';
s.style.top = snake[i].y + 'px';
game.appendChild(s);
}
}
// 绘制食物
function drawFood() {
// 删除之前的食物
var oldFood = document.getElementsByClassName('food');
while (oldFood.length > 0) {
game.removeChild(oldFood[0]);
}
// 绘制新的食物
var f = document.createElement('div');
f.className = 'food';
f.style.left = food.x + 'px';
f.style.top = food.y + 'px';
game.appendChild(f);
}
// 移动蛇
function moveSnake() {
// 根据移动方向更新蛇头位置
var head = {x: snake[0].x, y: snake[0].y};
if (direction == 'right') {
head.x += 20;
} else if (direction == 'left') {
head.x -= 20;
} else if (direction == 'up') {
head.y -= 20;
} else if (direction == 'down') {
head.y += 20;
}
// 判断是否吃到食物
if (head.x == food.x && head.y == food.y) {
// 食物被吃掉，蛇变长，重新生成食物
snakeLength++;
food.x = Math.floor(Math.random() * 25) * 20;
food.y = Math.floor(Math.random() * 25) * 20;
drawFood();
}
// 更新蛇的位置
snake.unshift(head);
snake.pop();
drawSnake();
// 判断是否撞墙或咬到自己
if (head.x < 0 || head.y < 0 || head.x >= 500 || head.y >= 500) {
alert('游戏结束！');
location.reload();
}
for (var i = 1; i < snake.length; i++) {
if (head.x == snake[i].x && head.y == snake[i].y) {
alert('游戏结束！');
location.reload();
}
}
}
// 监听方向键事件，更新移动方向
document.onkeydown = function(e) {
if (e.keyCode == 37 && direction != 'right') {
direction = 'left';
} else if (e.keyCode == 38 && direction != 'down') {
direction = 'up';
} else if (e.keyCode == 39 && direction != 'left') {
direction = 'right';
} else if (e.keyCode == 40 && direction != 'up') {
direction = 'down';
}
}
// 初始化游戏
init();
</script>
</body>
</html>
```
这个demo比较简单，只实现了贪吃蛇的基本功能，你可以在此基础上继续完善。
相关推荐
最新推荐
MATLAB实验一二 数值计算
MATLAB实验一二 数值计算
Java毕业设计-ssm基于SSM的英语学习网站的设计与实现演示录像（高分期末大作业）.rar
Java毕业设计-ssm基于SSM的英语学习网站的设计与实现演示录像（高分期末大作业）
平安保险-智富人生A的计算
平安保险-智富人生A的计算
MATLAB实验五六 图像相关应用
MATLAB实验五六 图像相关应用
AUTOSAR-SRS-FreeRunningTimer.pdf
AUTOSAR_SRS_FreeRunningTimer.pdf
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
确保MATLAB回归分析模型的可靠性：诊断与评估的全面指南
# 1. 回归分析模型的基础**
**1.1 回归分析的基本原理**
回归分析是一种统计建模技术，用于确定一个或多个自变量与一个因变量之间的关系。其基本原理是拟合一条曲线或超平面，以最小化因变量与自变量之间的误差平方和。
**1.2 线性回归和非线性回归**
线性回归是一种回归分析模型，其中因变量与自变量之间的关系是线性的。非线性回归模型则用于拟合因变量与自变量之间非
引发C++软件异常的常见原因
1. 内存错误：内存溢出、野指针、内存泄漏等；
2. 数组越界：程序访问了超出数组边界的元素；
3. 逻辑错误：程序设计错误或算法错误；
4. 文件读写错误：文件不存在或无法打开、读写权限不足等；
5. 系统调用错误：系统调用返回异常或调用参数错误；
6. 硬件故障：例如硬盘损坏、内存损坏等；
7. 网络异常：网络连接中断、网络传输中断、网络超时等；
8. 程序异常终止：例如由于未知原因导致程序崩溃等。
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。