写一段HTML贪吃蛇小游戏,并给出完整代码
时间: 2023-02-21 10:15:54 浏览: 229
HTML5贪食蛇网页游戏代码
这是一个简单的贪吃蛇小游戏的 HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇小游戏</title>
<style>
/* 画布样式 */
#canvas {
border: 1px solid #000;
margin: 0 auto;
display: block;
}
/* 蛇的样式 */
.snake {
width: 10px;
height: 10px;
background-color: #0f0;
position: absolute;
}
</style>
</head>
<body>
<!-- 画布 -->
<canvas id="canvas" width="400" height="400"></canvas>
<script>
// 初始化画布和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 初始化蛇的数据
let snake = [
{ x: 150, y: 150 },
{ x: 140, y: 150 },
{ x: 130, y: 150 },
{ x: 120, y: 150 },
{ x: 110, y: 150 }
];
// 初始化食物的数据
let food = { x: 300, y: 300 };
// 初始化分数
let score = 0;
// 初始化游戏的状态
let gameOver = false;
// 初始化游戏的方向
let direction = 'right';
// 绘制蛇
function drawSnake() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 遍历蛇的每一节身体
for (let i = 0; i < snake.length; i++) {
// 获取蛇的每一节身体
const snakePart = snake[i];
// 绘制蛇的每一节身体
ctx.fillStyle = '#0f0';
ctx.strokestyle = '#000';
ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
}
// 绘制食物
function drawFood() {
// 绘制食物
ctx.fillStyle = '#f00';
ctx.strokestyle =
阅读全文