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

【0基础】制作HTML网页小游戏——贪吃蛇（附详细解析）

news 2025/12/28 2:54:39

我在昨天的文章（贪吃蛇HTML源码）里面分享了网页版贪吃蛇小游戏的源码，今天就来给大家详细讲解一下每部分代码是如何运作的，以及以后要如何美化贪吃蛇的UI界面，在哪里修改等。

一、代码运作

1、HTML结构:

2、CSS样式:

3、JavaScript代码:

二、补充知识

1、详细解释一下：

2、在我们的贪吃蛇游戏中的应用：

三、如何优化UI

1、加载图片：

2、修改绘制蛇的函数：

3、修改绘制食物的函数：

4、等待图片加载完成后开始游戏：

一、代码运作

1、HTML结构:

<!DOCTYPE html>
<html lang="en">
<head><!-- head内容 -->
</head>
<body><canvas id="gameCanvas" width="400" height="400"></canvas><script>// JavaScript代码</script>
</body>
</html>

这是基本的HTML结构。<canvas>元素用于绘制游戏,而<script>标签包含了所有的JavaScript代码。

2、CSS样式:

<style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #333;}canvas {border: 1px solid #fff;}
</style>

这些CSS规则用于居中显示游戏画布并设置背景颜色。

3、JavaScript代码:

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

这里获取了canvas元素并创建了2D绘图上下文,用于在canvas上绘制图形。

const GRID_SIZE = 20;
const CELL_SIZE = canvas.width / GRID_SIZE;

这定义了网格大小和每个单元格的尺寸。

let snake = [{ x: 5, y: 10 },{ x: 4, y: 10 },{ x: 3, y: 10 }
];

初始化蛇的位置,蛇由一系列坐标点组成。

let food = {x: Math.floor(Math.random() * GRID_SIZE),y: Math.floor(Math.random() * GRID_SIZE)
};

随机生成食物的位置。

function moveSnake() {// 移动蛇的逻辑
}

这个函数处理蛇的移动,包括检查是否吃到食物或撞到墙壁。

function drawSnake() {// 绘制蛇的逻辑
}function drawFood() {// 绘制食物的逻辑
}function drawGrid() {// 绘制网格的逻辑
}

这些函数负责在canvas上绘制游戏元素。

function startGame() {gameInterval = setInterval(function() {moveSnake();drawSnake();drawFood();}, gameSpeed);
}

startGame函数使用setInterval定期调用游戏的核心函数,实现游戏循环。

document.addEventListener('keydown', (event) => {// 处理键盘输入
});

这段代码监听键盘事件,用于控制蛇的方向。

这个游戏的核心在于不断更新蛇的位置,检查碰撞,然后重新绘制游戏状态。通过setInterval函数,我们可以定期执行这些操作,从而创建一个简单但功能完整的贪吃蛇游戏。

二、补充知识

很多0基础的朋友们看不太懂ctx.fillStyle还有ctx.strokeStyle这些用法，这些其实都是canvas中的用法。

ctx.fillStyle、ctx.strokeStyle 以及其他许多 ctx 相关的属性和方法都是 HTML5 Canvas API 的一部分。

1、详细解释一下：

ctx 是什么：当我们调用 canvas.getContext('2d') 时，我们获得了一个 CanvasRenderingContext2D 对象，通常我们将它赋值给 ctx。这个对象提供了在 canvas 上绘图的所有方法和属性。
常用的 Canvas 属性和方法：

- ctx.fillStyle: 设置或返回用于填充绘画的颜色、渐变或模式。例如：ctx.fillStyle = '#fff'; 设置填充颜色为白色。
- ctx.strokeStyle: 设置或返回用于笔触的颜色、渐变或模式。例如：ctx.strokeStyle = '#444'; 设置线条颜色为深灰色。
- ctx.fillRect(x, y, width, height): 绘制一个填充的矩形。例如：ctx.fillRect(10, 10, 100, 100); 在坐标(10,10)处绘制一个100x100的填充矩形。
- ctx.beginPath(): 开始一个新的绘制路径。
- ctx.moveTo(x, y): 将绘图游标移动到指定的坐标。
- ctx.lineTo(x, y): 添加一个新点，然后创建一条从该点到最后指定点的线条。
- ctx.stroke(): 绘制已定义的路径。

2、在我们的贪吃蛇游戏中的应用：

function drawSnake() {ctx.fillStyle = '#fff';snake.forEach(segment => {ctx.fillRect(segment.x * CELL_SIZE, segment.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);});
}

这段代码将填充颜色设置为白色（#fff），然后为蛇的每个部分绘制一个填充矩形。

function drawGrid() {ctx.strokeStyle = '#444';for (let x = 0; x <= canvas.width; x += CELL_SIZE) {ctx.beginPath();ctx.moveTo(x, 0);ctx.lineTo(x, canvas.height);ctx.stroke();}// ... 绘制水平线的代码
}

这段代码设置线条颜色为深灰色（#444），然后使用路径绘制方法画出网格线。

Canvas API 提供了强大而灵活的 2D 绘图能力，可以用于创建各种图形、动画和游戏。在我们的贪吃蛇游戏中，我们只使用了它的一小部分功能。如果对 Canvas 绘图感兴趣，还有很多有趣的技术可以探索，比如绘制圆形、添加渐变色、使用变换等。

三、如何优化UI

最基本的优化就是改变蛇和食物的外观了，于是我加了几个加载图片的代码

1、加载图片：

const headImg = new Image();
const bodyImg = new Image();
const tailImg = new Image();
const foodImg = new Image();
headImg.src = 'img/head.png';
bodyImg.src = 'img/body.png';
tailImg.src = 'img/tail.png';
foodImg.src = 'img/food.png';

2、修改绘制蛇的函数：

function drawSnake() {// ... (前面的代码保持不变)snake.forEach((segment, index) => {let img;if (index === 0) {img = headImg;} else if (index === snake.length - 1) {img = tailImg;} else {img = bodyImg;}ctx.save();ctx.translate(segment.x * CELL_SIZE + CELL_SIZE / 2, segment.y * CELL_SIZE + CELL_SIZE / 2);// 根据蛇的方向旋转图片if (index === 0) {switch (direction) {case 'up':ctx.rotate(-Math.PI / 2);break;case 'down':ctx.rotate(Math.PI / 2);break;case 'left':ctx.rotate(Math.PI);break;case 'right':// 默认方向，不需要旋转break;}}ctx.drawImage(img, -CELL_SIZE / 2, -CELL_SIZE / 2, CELL_SIZE, CELL_SIZE);ctx.restore();});
}

3、修改绘制食物的函数：

function drawFood() {ctx.drawImage(foodImg, food.x * CELL_SIZE, food.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
}

4、等待图片加载完成后开始游戏：

Promise.all([new Promise(resolve => headImg.onload = resolve),new Promise(resolve => bodyImg.onload = resolve),new Promise(resolve => tailImg.onload = resolve),new Promise(resolve => foodImg.onload = resolve)
]).then(() => {resetGame();
});

于是我美化成了这样，哈哈哈哈哈哈，想要完整代码和素材的拿去即可

网盘链接：夸克网盘分享

CSDN下载链接：【免费】0基础制作HTML网页小游戏-贪吃蛇（附详细解析）资源-CSDN文库

【0基础】制作HTML网页小游戏——贪吃蛇（附详细解析）

我在昨天的文章（贪吃蛇HTML源码）里面分享了网页版贪吃蛇小游戏的源码，今天就来给大家详细讲解一下每部分代码是如何运作的，以及以后要如何美化贪吃蛇的UI界面，在哪里修改等。目录一、代码运作 1、HTML结构: 2、C…...

编程日记 2024/9/11 7:29:21

Vscode python无法转到函数定义

今天上午换了电脑，使用Vscode发现找不到对应的函数定义了。使用了网上的全部教程。一点用没有。重启电脑，重启Vscode也没有作用。最后通过重装vscode，解决问题。（也不知道Vscode什么毛病） 重点语句： 去官网…...

编程日记 2024/9/11 7:27:18

Python中的上下文管理器（with语句）及其作用

Python中的上下文管理器（Context Manager）是一种通过with语句来管理资源（如文件、网络连接、线程锁等）的机制。with语句旨在简化常见的资源管理任务，如资源的获取、使用后的清理等。使用上下文管理器可以确保资源在使用…...

编程日记 2024/9/11 7:26:16

CTK框架(八):服务追踪

目录 1.简介 2.实现方式 3.具体实现 3.1.新建插件PluginA 3.2.新建插件PluginB 4.服务追踪的优势 5.应用场景 6.总结 1.简介 CTK服务追踪是一种机制，用于在CTK插件框架中追踪和管理插件提供的服务。当一个插件注册了一个服务到服务注册中心后&#xff0…...

编程日记 2024/9/11 7:25:15

[针对于个人用户] 显卡与计算卡性能对比表

笔者使用 Quadro M4000 显卡用于 LLM 相关任务，但奈何该卡发布的年代过于久远，以至于 LLM 相关任务只能使用例如：Phi3 mini、Qwen 2 2B、GLM 4 8B 以及 Gemini v2 2B等小参数模型，且速度不堪理想，也经常因为显卡过热降…...

编程日记 2024/9/11 7:22:08

2024年智能录屏解决方案全攻略，从桌面到云端

如果你有过录屏经验那你一定遇到过被限制录制时长或者录制的画面比较模糊之类的情况。这次我我推荐几款免费录屏软件，让我们可以更自由的录制屏幕画面。 1.福晰REC大师链接：www.foxitsoftware.cn/REC/ 这款软件便捷好操作，而且符合我这次…...

编程日记 2024/9/11 7:18:01

CentOS7.9下snmp v3 inform搭建监控端

1.基础环境配置为了防止防火墙及selinux等的影响，需关闭防火墙及selinux等，具体参考： Linux常规基础配置_linux基础配置-CSDN博客 2.安装snmp yum源配置，具体参考： Linux常规基础配置_linux基础配置-CSDN博客 snmp安装命令： yum install -y net-snmp net-snmp-ut…...

编程日记 2024/9/11 7:16:57

水库大坝安全监测方案，双重守护，安全无忧

水库作为重要的水利设施，在防洪、灌溉及供水等方面发挥着重要作用。然而随着时间的推移，大坝面临着自然老化、设计标准不足及极端天气等多重挑战，其安全性与稳定性日益受到关注。水库堤坝险情导致的洪涝灾害给人民生命财产和经济社会发展带来…...

编程日记 2024/9/11 7:10:42

yolov8实现图片验证码识别

1、环境准备 1.1、安装miniconda 地址：Index of /anaconda/miniconda/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 注意：为避免不兼容的问题，推荐下载py38版本，我下载的是Miniconda3-py38_23.1.0-1-Windows-x86_…...

编程日记 2024/9/11 7:08:31

代码随想录训练营 Day56打卡图论part06 108. 冗余连接 109. 冗余连接II

代码随想录训练营 Day56打卡图论part06 一、卡码108. 冗余连接题目描述有一个图，它是一棵树，他是拥有 n 个节点（节点编号1到n）和 n - 1 条边的连通无环无向图（其实就是一个线形图），如图&…...

编程日记 2024/9/11 7:07:23

QT天气预报

json 理论什么是JSON? 规则被大括号包括的是JSON对象,被中括号包括的是JSON数组. JSON数组JSON对象实验构建JSON 用代码实现如下json内容: //构建JSON void WirteJson() {QJsonObject rootObject;//1.插入name字段rootObject.insert("name","china&quo…...

编程日记 2024/9/11 7:05:18

JavaWeb中处理 Web 请求的方式总结

文章目录 JavaWeb中处理 Web 请求的方式总结1. 原始的 Servlet 方式1.1. 环境搭建**创建 Maven 或 Gradle 项目**：**添加 Servlet 依赖**：**创建 Servlet 类**：**配置项目**：**配置 Tomcat**： 1.2. 路由机制1.3. 示例代…...

编程日记 2024/9/11 7:04:17

React的事件与原生事件的执行顺序？

react自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等，虽然和原生的是两码事，但也是基于浏览器的事件机制下完成的。 react 的所有事件并没有绑定到具体的dom节点上而是绑定在了document 上，然后由…...

编程日记 2024/9/11 7:03:16

【Java】Runtime与Properties获取系统信息

Java系列文章目录补充内容 Windows通过SSH连接Linux 第一章 Linux基本命令的学习与Linux历史文章目录 Java系列文章目录一、前言二、学习内容：三、问题描述四、解决方案：4.1 代码4.2 运行结果五、总结： 一、前言这些都被淘汰比较少用了…...

编程日记 2024/9/11 7:02:14

基于SpringBoot的社团管理系统

作者：计算机学姐开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等，“文末源码”。专栏推荐：前后端分离项目源码、SpringBoot项目源码、SSM项目源码系统展示基于JavaSpringBootVueMySQL的社团管理系统【附源码文档】、…...

编程日记 2024/9/11 7:01:12

UE5.3_跟一个插件—Socket.IO Client

网上看到这个插件，挺好！项目目前也没有忙到不可开交，索性跟着测一下吧：商城可见，售价72.61人民币！但是，git上有仓库哦，免费！！跟着链接先准备起来： Documentation: GitHub - getnamo/SocketIOClient-Unreal: Socket.IO client plugin for the Unreal Engin…...

编程日记 2024/9/11 7:00:11

鸿蒙轻内核A核源码分析系列七进程管理 (1)

往期知识点记录： 鸿蒙（HarmonyOS）应用层开发（北向）知识点汇总轻内核A核源码分析系列一数据结构-双向循环链表轻内核A核源码分析系列二数据结构-位图操作轻内核A核源码分析系列三物理内存（1&#xff0…...

编程日记 2024/9/11 6:59:07

qt QGraphicsScene场景坐标和场景内GraphicsItem局部坐标的相互转换

为了更清晰地解释场景坐标与局部坐标之间的转换过程，我们可以通过一个简单的实例来演示如何赋值场景坐标，并将其转换为图形项的局部坐标。实例步骤假设我们有一个场景 QGraphicsScene 和一个矩形图形项 QGraphicsRectItem，矩形的大小为 1…...

编程日记 2024/9/11 6:50:54

Windows与linux中docker的安装与使用

windos中安装使用docker 下载Docker_Desktop 安装包进入docker官网下载Docker_Desktop： https://www.docker.com/启用wsl 我们搜索“启用或关闭Windows功能”，打开后勾选适用于Linux的Windows 子系统 Docker_Desktop设置出现Docker Engine stopp…...

编程日记 2024/9/11 6:46:50

纽扣电池 button cell 运动手环 sports wristband 智能手环 smart bracelet 皮卡丘夜灯 pikachu night lamp 数字显示充电器 Charger with a digital display 磁吸无线充 magnetic wireless charger 直流电机调速器 DC motor speed controller 继电器模块 relay module 锂离子电…...

编程日记 2024/9/11 6:44:45

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...

编程新知 2025/11/6 5:46:16

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法文章目录前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

Opencv中的addweighted函数

一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...

编程新知 2025/12/26 14:44:50

剑指offer20_链表中环的入口节点

链表中环的入口节点给定一个链表，若其中包含环，则输出环的入口节点。若其中不包含环，则输出null。数据范围节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。节点 val 值各不相同。链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/12/25 1:27:31

LLM基础1_语言模型如何处理文本

基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器理解词嵌入：给词语画"…...

编程新知 2025/9/25 5:16:24

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...

编程新知 2025/12/14 14:08:57

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币，另给一个整数 amount 表示总金额。请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额，返回 0 。假设每一种面额的硬币有无限个。题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时，没有加载所有类库。插件运行过程中用到某个类库，会从CAD的安装目录找，找不到就报错了。【方案2】让CAD在加载过程中把类库加载到内存【方案3】是发现缺少了哪个库，就用插件程序加载进…...

编程新知 2025/11/23 4:18:28

「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下，推客小程序系统凭借其裂变传播、精准营销等特性，成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径，助力开发者打造具有市场竞争力的营销工具。一、系统核心功能架构&…...

编程新知 2025/8/21 16:28:18

区块链技术概述

区块链技术是一种去中心化、分布式账本技术，通过密码学、共识机制和智能合约等核心组件，实现数据不可篡改、透明可追溯的系统。一、核心技术 1. 去中心化特点：数据存储在网络中的多个节点（计算机），而非…...

编程新知 2025/10/25 7:41:33

一、代码运作

1、HTML结构:

2、CSS样式:

3、JavaScript代码:

二、补充知识

1、详细解释一下：

2、在我们的贪吃蛇游戏中的应用：

三、如何优化UI

1、加载图片：

2、修改绘制蛇的函数：

3、修改绘制食物的函数：

4、等待图片加载完成后开始游戏：

相关文章：