当前位置： 首页 > article >正文

用HTML.CSS.JavaScript实现一个贪吃蛇小游戏

article 2026/2/4 7:50:29

目录

    • 一、引言
    • 二、实现思路
      • 1. HTML 结构
      • 2. CSS 样式
      • 3. JavaScript 逻辑
    • 三、代码实现
    • 四、效果展示

一、引言

贪吃蛇是一款经典的小游戏，曾经风靡一时。今天，我们将使用 HTML、CSS 和 JavaScript 来实现一个简单的贪吃蛇小游戏。通过这个项目，可以了解到如何使用 HTML5 的画布元素（<canvas>）来绘制图形，以及如何使用 JavaScript 来处理游戏逻辑。

二、实现思路

1. HTML 结构

我们首先创建一个基本的 HTML 结构，包含一个 <canvas> 元素用于绘制游戏画面，以及一些必要的 <script> 和 <style> 标签。

2. CSS 样式

使用 CSS 对 <canvas> 元素进行简单的样式设置，使其具有边框，并居中显示。

3. JavaScript 逻辑

  • 初始化游戏元素：定义蛇的初始位置、食物的初始位置、分数等。
  • 处理用户输入：监听键盘事件，根据用户按下的方向键来改变蛇的移动方向。
  • 绘制游戏画面：使用 requestAnimationFrame 或 setInterval 函数来不断更新游戏画面，包括蛇的移动、食物的生成和绘制、分数的显示等。
  • 处理碰撞检测：检测蛇是否撞到墙壁或自己的身体，如果是，则游戏结束。
  • 处理食物的生成和消耗：当蛇吃到食物时，分数增加，并且生成新的食物。

三、代码实现

上述代码中，我们使用了 HTML5 的 <canvas> 元素来绘制游戏画面，通过 JavaScript 来处理游戏逻辑。具体实现步骤如下：

  1. 初始化游戏元素：定义蛇的初始位置、食物的初始位置、分数等。
  2. 监听键盘事件：根据用户按下的方向键来改变蛇的移动方向。
  3. 绘制游戏画面：使用 setInterval 函数来不断更新游戏画面，包括蛇的移动、食物的生成和绘制、分数的显示等。
  4. 处理碰撞检测：检测蛇是否撞到墙壁或自己的身体，如果是，则游戏结束。
  5. 处理食物的生成和消耗：当蛇吃到食物时，分数增加，并且生成新的食物。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/@tailwindcss/browser@4"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><title>贪吃蛇小游戏</title><style>#game-board {border: 2px solid #333;display: block;margin: 20px auto;}</style>
</head><body class="bg-gray-100 flex flex-col items-center justify-center h-screen"><h1 class="text-3xl font-bold mb-4">贪吃蛇小游戏</h1><canvas id="game-board" width="400" height="400"></canvas><script>const canvas = document.getElementById('game-board');const ctx = canvas.getContext('2d');const box = 20;let snake = [];snake[0] = {x: 9 * box,y: 10 * box};let food = {x: Math.floor(Math.random() * 19) * box,y: Math.floor(Math.random() * 19) * box};let score = 0;let d;document.addEventListener('keydown', direction);function direction(event) {if (event.keyCode === 37 && d!== 'RIGHT') {d = 'LEFT';} else if (event.keyCode === 38 && d!== 'DOWN') {d = 'UP';} else if (event.keyCode === 39 && d!== 'LEFT') {d = 'RIGHT';} else if (event.keyCode === 40 && d!== 'UP') {d = 'DOWN';}}function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < snake.length; i++) {ctx.fillStyle = (i === 0)? 'green' : 'lightgreen';ctx.fillRect(snake[i].x, snake[i].y, box, box);ctx.strokeStyle = 'darkgreen';ctx.strokeRect(snake[i].x, snake[i].y, box, box);}ctx.fillStyle = 'red';ctx.fillRect(food.x, food.y, box, box);let snakeX = snake[0].x;let snakeY = snake[0].y;if (d === 'LEFT') snakeX -= box;if (d === 'UP') snakeY -= box;if (d === 'RIGHT') snakeX += box;if (d === 'DOWN') snakeY += box;if (snakeX === food.x && snakeY === food.y) {score++;food = {x: Math.floor(Math.random() * 19) * box,y: Math.floor(Math.random() * 19) * box};} else {snake.pop();}let newHead = {x: snakeX,y: snakeY};if (snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height || collision(newHead, snake)) {clearInterval(game);alert(`游戏结束！你的最终得分是: ${score}`);}snake.unshift(newHead);ctx.fillStyle = 'white';ctx.font = '20px Arial';ctx.fillText('Score: '+ score, 10, 30);}function collision(head, array) {for (let i = 0; i < array.length; i++) {if (head.x === array[i].x && head.y === array[i].y) {return true;}}return false;}let game = setInterval(draw, 100);</script>
</body></html>

四、效果展示

初始界面

在这里插入图片描述
小蛇吃到自己，死亡结算

在这里插入图片描述

相关文章：

用HTML.CSS.JavaScript实现一个贪吃蛇小游戏

目录 一、引言二、实现思路1. HTML 结构2. CSS 样式3. JavaScript 逻辑 三、代码实现四、效果展示 一、引言 贪吃蛇是一款经典的小游戏&#xff0c;曾经风靡一时。今天&#xff0c;我们将使用 HTML、CSS 和 JavaScript 来实现一个简单的贪吃蛇小游戏。通过这个项目&#xff0c…...

编程日记 2026/1/26 21:53:17

[特殊字符] Pandas 常用操作对比：Python 运算符 vs Pandas 函数

在 Pandas 中&#xff0c;许多操作可以直接使用 Python 的比较运算符&#xff08;如 、!、>、< 等&#xff09;&#xff0c;而不需要调用 Pandas 的专门函数&#xff08;如 eq()、ne()、gt() 等&#xff09;。这些运算符在 Pandas 中已经被重载&#xff0c;代码更简洁。以…...

编程日记 2026/1/27 21:14:20

Java 实现插入排序：[通俗易懂的排序算法系列之三]

引言 大家好！欢迎继续关注我的排序算法系列。今天，我们要学习的是另一种非常基础且重要的排序算法——插入排序 (Insertion Sort)。 插入排序的思路非常贴近我们日常整理扑克牌的方式，理解起来相对自然。虽然它在最坏情况下的效率不高，但在某些特定场景下，它的表现甚至优…...

编程日记 2026/1/20 22:37:26

使用MATIO库写入MATLAB结构体(struct)数据的示例程序

使用MATIO库写入MATLAB结构体(struct)数据的示例程序 MATIO是一个用于读写MATLAB数据文件(.mat)的开源C库。下面是一个完整的示例程序&#xff0c;展示如何使用MATIO库创建一个包含结构体数据的MAT文件。 示例程序 #include <stdio.h> #include <stdlib.h> #inc…...

编程日记 2026/1/29 19:54:27

JVM——模型分析、回收机制

方法区&#xff1a;存储已被虚拟机加载的类元数据信息(元空间) 堆&#xff1a;存放对象实例&#xff0c;几乎所有的对象实例都在这里分配内存 虚拟机栈&#xff1a;虚拟机栈描述的是|ava方法执行的内存模型:每个方法被执行的时候都会同时创建一个栈帧(Stack Frame)用于存储局…...

编程日记 2026/1/26 22:26:12

7. 记忆（Memory）机制：让AI拥有“短期记忆”与“长期记忆”

引言&#xff1a;当AI学会"记住你" 2025年某银行智能客服因无法记住用户身份&#xff0c;每次对话都要求重复验证&#xff0c;引发大量投诉。引入LangChain 记忆系统后&#xff0c;客户满意度提升62%。本文将基于MemorySaver与FAISS本地存储&#xff0c;教你构建符合…...

编程日记 2026/1/22 20:18:22

前后端分离下，Spring Boot 请求从发起到响应的完整执行流程

以下是前后端分离架构下&#xff0c;Spring Boot 请求从发起到响应的完整执行流程&#xff0c;结合你提出的所有问题&#xff0c;按真实执行顺序和职责链条重新整理所有核心概念、结构、关键类、数据转换点和典型代码示例&#xff1a; 一、前端发起请求&#xff08;步骤1-2&…...

编程日记 2026/1/22 21:11:56

【文献阅读】Vision-Language Models for Vision Tasks: A Survey

发表于2024年2月 TPAMI 摘要 大多数视觉识别研究在深度神经网络&#xff08;DNN&#xff09;训练中严重依赖标注数据&#xff0c;并且通常为每个单一视觉识别任务训练一个DNN&#xff0c;这导致了一种费力且耗时的视觉识别范式。为应对这两个挑战&#xff0c;视觉语言模型&am…...

编程日记 2026/1/22 20:41:36

【BFS最小步数】魔板题解

魔板题解 题目传送门 题目传送门 一、题目描述 Rubik先生发明了魔板的二维版本&#xff0c;这是一个有8个格子的板子&#xff0c;初始状态为&#xff1a; 1 2 3 4 8 7 6 5我们可以用三种操作来改变魔板状态&#xff1a; A&#xff1a;交换上下两行B&#xff1a;将最右边一…...

编程日记 2025/7/21 4:12:02

搭建K8S-1.23

0、简介 这里只用3台服务器来做一个简单的集群 地址主机名192.168.160.40kuber-master-1192.168.160.41kuber-master-2192.168.160.42kuber-node-1 1、关闭三个服务 &#xff08;1&#xff09;防火墙 systemctl stop firewalld &#xff08;2&#xff09;Selinux setenf…...

编程日记 2025/12/11 8:27:53

AOP在SpringBoot项目中的简单使用场景

SpringBoot AOP的简单使用 添加DTO添加controller(同包不同类)控制器1控制器2 AOP场景演示1. 对某package下的所有接口进行方法执行前逻辑校验新增切面&#xff0c;编写处理逻辑 2. 对某controller类下的所有接口进行方法执行前逻辑校验新增切面&#xff0c;编写处理逻辑 3. 对…...

编程日记 2025/12/20 23:44:50

windows如何安装wkhtmltoimage 给PHP使用根据HTML生成图片

windows如何安装wkhtmltoimage 给PHP使用 在Windows系统上安装wkhtmltoimage以便在PHP中使用&#xff0c;通常涉及到以下几个步骤&#xff1a; 下载wkhtmltoimage 首先&#xff0c;你需要从wkhtmltopdf的官方网站&#xff08; https://wkhtmltopdf.org/downloads.html &#xf…...

编程日记 2025/7/7 12:00:21

代码仓库使用git lfs上传模型文件

一 Git LFS是什么 它主要是用来处理大文件的&#xff0c;比如模型文件通常都很大&#xff0c;超过100MB的话&#xff0c;用普通的Git上传可能会出问题&#xff0c;所以必须用LFS。 二 具体步骤 Windows环境下使用Git LFS上传大模型文件到代码仓库&#xff1a; 2.1&#xff…...

编程日记 2025/9/13 19:35:03

AI比人脑更强，因为被植入思维模型【42】思维投影思维模型

giszz的理解&#xff1a;本质和外在。我们的行为举止&#xff0c;都是我们的内心的表现。从外边可以看内心&#xff0c;从内心可以判断外在。曾国藩有&#xff17;个识人的方法&#xff0c;大部分的人在他的面前如同没穿衣服一样。对于我们自身的启迪&#xff0c;我认为有四点&…...

编程日记 2025/5/27 13:26:23

Git 从入门到精通（开源协作特别版）

&#x1f9e0; Git 从入门到精通&#xff08;开源协作特别版&#xff09; ✅ 基础命令 &#x1f9f0; 高级用法 &#x1f6e0;️ 开源实战技巧 &#x1f30d; GitHub 社区协作 适合&#xff1a;从0开始 → 熟练开发者 → 参与/维护开源项目 &#x1f530; 第1章&#xff1a;…...

编程日记 2025/6/2 5:56:14

spring-cloud-alibaba-nacos-config使用说明

一、核心功能与定位 Spring Cloud Alibaba Nacos Config 是 Spring Cloud Alibaba 生态中的核心组件之一&#xff0c;专为微服务架构提供动态配置管理能力。它通过整合 Nacos 的配置中心功能&#xff0c;替代传统的 Spring Cloud Config&#xff0c;提供更高效的配置集中化管理…...

编程日记 2026/1/22 16:10:19

C# Winform 入门（9）之如何封装并调用dll

封装dll 首先创建 .Net平台 类库 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace _09.Encapsulation_dll {public class Program{/// <summary>/// 求两个double类型的数值的和/// &l…...

编程日记 2026/1/31 8:16:58

vue3中ref、reactive的使用示例

ref 1、导入 import { ref } from "vue"; 2、定义 // 报告表格数据 const reportTableData ref<Report[]>([]); 3、赋值 // 获取报告信息 let result await reportDataByOuterApplyIdService(tableSelectedRow.value?.outerApplyId); reportTable…...

编程日记 2026/1/25 15:28:28

【嵌入式系统设计师】知识点：第2章 嵌入式系统硬件基础知识

提示：“软考通关秘籍” 专栏围绕软考展开，全面涵盖了如嵌入式系统设计师、数据库系统工程师、信息系统管理工程师等多个软考方向的知识点。从计算机体系结构、存储系统等基础知识，到程序语言概述、算法、数据库技术（包括关系数据库、非关系型数据库、SQL 语言、数据仓库等）…...

编程日记 2026/1/30 2:29:33

Vue2_Vue.js教程

目录 一、Vue.js安装 1、独立版本 2、CDN 方法 3、npm 方法 二、Vue Al编程助手 三、Vue.js目录结构 目录解析 四、Vue.js 起步 1.如何定义数据对象和方法并渲染进页面 五、Vue.js 模板语法 插值 文本_{{}} Html_v-html 指令 属性_v-bind (数据传输工具)指令 表…...

编程日记 2026/1/22 16:33:37

【工业场景】用YOLOv12实现饮料类别识别

饮料类别识别任务的意义在于帮助人们更快速地识别和区分不同类型的饮料&#xff0c;从而提高消费者的购物体验和满意度。对于商家而言&#xff0c;饮料类别识别可以帮助他们更好地管理库存、优化货架布局和预测销售趋势&#xff0c;从而提高运营效率和利润。此外&#xff0c;饮…...

编程日记 2026/1/22 6:41:33

从小米汽车事故反思 LabVIEW 开发

近期&#xff0c;小米汽车的一起严重事故引发了社会各界的广泛关注。这起事故不仅让我们对智能汽车的安全性产生了深深的思考&#xff0c;也为 LabVIEW 开发领域带来了诸多值得汲取的知识与领悟。 在智能汽车领域&#xff0c;尤其是涉及到智能驾驶辅助系统时&#xff0c;安全是…...

编程日记 2026/1/30 19:47:08

oracle WAIT 和 NOWAIT

在 Oracle 数据库中&#xff0c;WAIT 和 NOWAIT 是与 锁&#xff08;Lock&#xff09; 相关的关键选项&#xff0c;用于控制事务或操作在请求资源时的等待行为。以下是它们的详细说明和应用场景。 1. NOWAIT 选项 作用&#xff1a; 当请求资源&#xff08;如表、行&#xff09…...

编程日记 2026/2/2 9:27:06

Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计

系列文档目录 Vue3ViteTypeScript安装 Element Plus安装与配置 主页设计与router配置 静态菜单设计 Pinia引入 文章目录 目录 系列文档目录 文章目录 前言 一、Aside设计 二、动态增加菜单 三.布局引用在Main中显示 参考文献&#xff1a; 前言 在本系列文档中&…...

编程日记 2026/1/22 13:45:54

从代码学习深度学习 - LSTM PyTorch版

文章目录 前言一、数据加载与预处理1.1 代码实现1.2 功能解析二、LSTM介绍2.1 LSTM原理2.2 模型定义代码解析三、训练与预测3.1 训练逻辑代码解析3.2 可视化工具功能解析功能结果总结前言 深度学习中的循环神经网络（RNN）及其变种长短期记忆网络（LSTM）在处理序列数据（如文…...

编程日记 2026/1/13 20:10:53

大数据技术发展与应用趋势分析

大数据技术发展与应用趋势分析 文章目录 大数据技术发展与应用趋势分析1. 大数据概述2 大数据技术架构2.1 数据采集层2.2 数据存储层2.3 数据处理层2.4 数据分析层 3 大数据发展趋势3.1 AI驱动的分析与自动化3.2 隐私保护分析技术3.3 混合云架构的普及3.4 数据网格架构3.5 量子…...

编程日记 2026/2/2 7:27:25

与Linux操作系统相关的引导和服务

目录 一.Linux操作系统引导过程 1.1引导过程总览 1.2系统初始化进程 1.2.1init进程 1.2.2sysmted 1.3systemd单元类型 二.排除启动类故障 2.1MBR扇区故障 2.1.1故障原因 2.1.2故障现象 2.1.3解决办法 2.1.4模拟修复MBR扇区故障 1)添加新的硬盘 2&#xff09;进行…...

编程日记 2026/1/25 0:47:40

STM32单片机入门学习——第16节: [6-4] PWM驱动LED呼吸灯PWM驱动舵机PWM驱动直流电机

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难&#xff0c;但我还是想去做&#xff01; 本文写于&#xff1a;2025.04.05 STM32开发板学习——第16节: [6-4] PWM驱动LED呼吸灯&PWM驱动舵机&PWM驱…...

编程日记 2026/2/3 8:23:59

基础框架系列分享：一个通用的Excel报表生成管理框架

由于我们系统经常要生成大量的Excel报表&#xff08;Word&#xff0c;PDF报表也有&#xff0c;另行分享&#xff09;&#xff0c;最初始他们的方案是&#xff0c;设计一个表&#xff0c;和Excel完全对应&#xff0c;然后读表&#xff0c;把数据填进去&#xff0c;这显然是非常不…...

编程日记 2026/1/22 14:17:26

Ansible（4）—— Playbook

目录 一、Ansible Playbook : 1、Play &#xff1a; 2、Playbook&#xff1a; 二、Ansible Playbook 格式&#xff1a; 1、空格&#xff1a; 2、破折号&#xff08; - &#xff09;&#xff1a; 3、Play 格式&#xff1a; 三、查找用于任务的模块&#xff1a; 1、模块…...

编程日记 2026/1/29 15:22:37