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

web前端项目-贪吃蛇小游戏【附源码】

news 2025/12/25 18:32:53

web前端项目-贪吃蛇小游戏

【贪吃蛇】是一款经典的小游戏，采用HTML、CSS和JavaScript技术进行开发，玩家通过控制一条蛇在地图上移动，蛇的目的是吃掉地图上的食物，并且让自己变得更长。游戏的核心玩法是控制蛇的移动方向和长度，同时避免蛇头碰到自己的身体或者游戏边界

运行效果：上下左右键控制蛇的移动；空格为游戏开始/暂停；可以在游戏界面设置蛇的移动速度
在这里插入图片描述
在这里插入图片描述

HTML源码–index.html：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇小游戏</title>
<link rel="stylesheet" href="css/snake.css">
<script type="text/javascript" src="js/snake.js"></script>
</head><body>
<div class="box"><span>分数：<span id="foodNum"></span></span><span>选择速度：<select id="setSpeed"><option value="200">慢速</option><option value="100">中速</option><option value="50">快速</option></select></span><span>开始/暂停(空格键)</span>
</div>
<table id="map"></table>
</body>
</html>

js源码–snake.js：

function Snake(){this.rows = 21;//21行this.cols = 21;//21列this.speed = 200;//前进速度this.curKey = 0;//当前方向按键键码值this.timer = 0;this.pos = [];//蛇身位置this.foodPos = {"x":-1,"y":-1};this.foodNum = 0;//吃掉食物数量this.dom = document.getElementById("map");//地图元素this.pause = 1;//1表示暂停，-1表示开始
}
Snake.prototype.map = function(){//创建地图if(this.dom.firstChild){this.dom.removeChild(this.dom.firstChild);//重新开始 删除之前创建的tbody}for( j = 0; j < this.rows; j++ ){var tr = this.dom.insertRow(-1);//插入一行for( i = 0; i < this.cols; i++ ){tr.insertCell(-1);//插入一列}}
}
Snake.prototype.food = function(){//生成食物do{this.foodPos.y = Math.floor( Math.random()*this.rows );this.foodPos.x = Math.floor( Math.random()*this.cols );}while( this.dom.rows[this.foodPos.y].cells[this.foodPos.x].className != "" )//防止食物生成在蛇身上this.dom.rows[this.foodPos.y].cells[this.foodPos.x].className="snakefood";//设置食物样式document.getElementById("foodNum").innerHTML=this.foodNum++;//设置分数
}
Snake.prototype.init = function(){this.map();//创建地图arguments[0] ? this.speed=arguments[0] : false;//选择速度this.pos = [{"x":2,"y":0},{"x":1,"y":0},{"x":0,"y":0}];//定义蛇身位置for(var j=0; j<this.pos.length; j++ ){//显示蛇身this.dom.rows[this.pos[j].y].cells[this.pos[j].x].className="snakebody";}this.dom.rows[this.pos[0].y].cells[this.pos[0].x].className="snakehead";//为蛇头设置样式this.curKey = 0;//当前方向按键键码值this.foodNum = 0;//吃掉食物数量this.food();//生成食物this.pause = 1;//1表示暂停，-1表示开始
}
Snake.prototype.trigger = function(e){var _t=this;var e = e || event;var eKey = e.keyCode;//获取按键键码值if( eKey>=37 && eKey<=40 && eKey!=this.curKey && !( (this.curKey == 37 && eKey == 39) || (this.curKey == 38 && eKey == 40) || (this.curKey == 39 && eKey == 37) || (this.curKey == 40 && eKey == 38) ) && this.pause==-1 ){//如果按下的是方向键，并且不是当前方向，也不是反方向和暂停状态this.curKey = eKey;        //设置当前方向按键键码值        }else if( eKey==32 ){this.curKey = (this.curKey==0) ? 39 : this.curKey;this.pause*=-1;if(this.pause==-1){this.timer=window.setInterval(function(){_t.move()},this.speed);//蛇身移动}else{window.clearInterval(this.timer);//停止}}
}
Snake.prototype.move = function(){//移动switch(this.curKey){case 37: //左方向if( this.pos[0].x <= 0 ){ //蛇头撞到边界this.over(); return; }else{ this.pos.unshift( {"x":this.pos[0].x-1,"y":this.pos[0].y}); //添加元素}break;case 38: //上方向if( this.pos[0].y <= 0 ){ this.over(); return; }else{ this.pos.unshift( {"x":this.pos[0].x,"y":this.pos[0].y-1}); }break;case 39://右方向if( this.pos[0].x >= this.cols-1 ){ this.over(); return; }else{ this.pos.unshift( {"x":this.pos[0].x+1,"y":this.pos[0].y}); }break;case 40: //下方向if( this.pos[0].y >= this.rows-1 ){ this.over(); return; }else{ this.pos.unshift( {"x":this.pos[0].x,"y":this.pos[0].y+1}); }break;}if( this.pos[0].x == this.foodPos.x && this.pos[0].y == this.foodPos.y ){//蛇头位置与食物重叠this.food();//生成食物}else if( this.curKey != 0 ){this.dom.rows[this.pos[this.pos.length-1].y].cells[this.pos[this.pos.length-1].x].className="";this.pos.pop();//删除蛇尾}for(i=3;i<this.pos.length;i++){//从蛇身的第四节开始判断是否撞到自己if( this.pos[i].x == this.pos[0].x && this.pos[i].y == this.pos[0].y ){ this.over();//游戏结束return;}}this.dom.rows[this.pos[0].y].cells[this.pos[0].x].className="snakehead";//画新蛇头this.dom.rows[this.pos[1].y].cells[this.pos[1].x].className="snakebody";//原蛇头变为蛇身
}
Snake.prototype.over = function(){alert("游戏结束");window.clearInterval(this.timer);//停止this.init();//重置游戏
}
window.onload = function(){var snake = new Snake();//创建对象实例snake.init();//调用初始化方法document.onkeydown = function(e){ snake.trigger(e); //按下按键时调用方法}document.getElementById("setSpeed").onchange = function(){ this.blur(); snake.init(this.value); }
}

CSS源码–snake.css：

  *                         { margin:0; padding:0; font-family:Verdana,宋体; font-size:12px;}table#map { width:auto; height:auto; margin:0 auto; border-collapse:collapse; border-spacing:0; background-color:#EAEAEA; clear:both; background:#74AFE0}td                 { width:10px; height:10px; border:1px solid black;}.snakehead         { background-color: orangered;}.snakebody         { background-color:#FFCC00;}.snakefood         { background-color: orangered;}.box        { width:310px; margin:0 auto; padding:3em 0; list-style:none;}.box>span{ float:left; height:30px; margin-right:1.5em; line-height:30px;}

注： 以上为本项目的所有源码，无图片素材

相关文章：

web前端项目-贪吃蛇小游戏【附源码】

web前端项目-贪吃蛇小游戏 【贪吃蛇】是一款经典的小游戏&#xff0c;采用HTML、CSS和JavaScript技术进行开发&#xff0c;玩家通过控制一条蛇在地图上移动&#xff0c;蛇的目的是吃掉地图上的食物&#xff0c;并且让自己变得更长。游戏的核心玩法是控制蛇的移动方向和长度&am…...

编程日记 2024/1/19 10:23:34

ICCV2023 | PTUnifier+：通过Soft Prompts(软提示)统一医学视觉语言预训练

论文标题&#xff1a;Towards Unifying Medical Vision-and-Language Pre-training via Soft Prompts 代码&#xff1a;https://github.com/zhjohnchan/ptunifier Fusion-encoder type和Dual-encoder type。前者在多模态任务中具有优势&#xff0c;因为模态之间有充分的相互…...

编程日记 2024/1/19 10:20:31

代码随想录 Leetcode459. 重复的子字符串（KMP算法）

题目&#xff1a; 代码&#xff08;首刷看解析 KMP算法 2024年1月18日&#xff09;&#xff1a; class Solution { public:void getNext(string& s,vector<int>& next) {int j 0;next[0] j;for (int i 1; i < s.size(); i) {while (j > 0 && s…...

编程日记 2024/1/19 10:16:27

Rust之构建命令行程序(三)：重构改进模块化和错误处理

开发环境 Windows 10Rust 1.74.1 VS Code 1.85.1 项目工程 这次创建了新的工程minigrep. 重构改进模块化和错误处理 为了改进我们的程序&#xff0c;我们将修复与程序结构及其处理潜在错误的方式有关的四个问题。首先&#xff0c;我们的main函数现在执行两项任务:解析参数和…...

编程日记 2024/1/19 10:11:20

广和通AI解决方案“智”赋室外机器人迈向新天地！

大模型趋势下&#xff0c;行业机器人将具备更完善的交互与自主能力&#xff0c;逐步迈向AI 2.0时代&#xff0c;成为人工智能技术全面爆发的重要基础。随着行业智能化&#xff0c;更多机器人应用将从“室内”走向“室外”&#xff0c;承担更多高风险、高智能工作。复杂的室外环…...

编程日记 2024/1/19 10:07:16

C++I/O流——(4)格式化输入/输出(第二节)

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 含泪播种的人一定能含笑收获&#xff…...

编程日记 2024/1/19 10:05:15

九、K8S-label和label Selector

label和label selector 标签和标签选择器 1、label 标签&#xff1a; 一个label就是一个key/value对 label 特性&#xff1a; label可以被附加到各种资源对象上一个资源对象可以定义任意数量的label同一个label可以被添加到任意数量的资源上 2、label selector 标签选择器 L…...

编程日记 2024/1/19 9:59:08

【.NET Core】 多线程之（Thread）详解

【.NET Core】 多线程之&#xff08;Thread&#xff09;详解 文章目录 【.NET Core】 多线程之&#xff08;Thread&#xff09;详解一、概述二、线程的创建和使用2.1 ThreadStart用于无返回值&#xff0c;无参数的方法2.2 ParameterizedThreadStart:用于带参数的方法 三、线程的…...

编程日记 2024/1/19 9:57:06

苹果笔记本 macbook 在 office word 中使用 mathtype 的方法

前言 想在 MacBook 中使用 mathtype&#xff0c;去搜索&#xff0c;去 Apple Store 下载也发现没有 解决方法 打开 office Word 的「插入」中的「获取加载项」、「我的加载项」。 在应用商店中下载&#xff0c;需要登录自己的微软账号。 加载成功后就可以使用了。 注意 和…...

编程日记 2024/1/19 9:55:04

课表排课小程序怎么制作？多少钱？

在当今的数字化时代&#xff0c;无论是购物、支付、点餐&#xff0c;还是工作、学习&#xff0c;都离不开各种各样的微信小程序。其中&#xff0c;课表排课小程序就是许多教育机构和学校必不可少的工具。那么课表排课小程序怎么制作呢&#xff1f;又需要多少钱呢&#xff1f; …...

编程日记 2024/1/19 9:54:03

C语言总结十三：程序环境和预处理详细总结

了解程序的运行环境可以让我们更加清楚的程序的底层运行的每一个步骤和过程&#xff0c;做到心中有数&#xff0c;预处理阶段是在预编译阶段完成&#xff0c;掌握常用的预处理命令语法&#xff0c;可以让我们正确的使用预处理命令&#xff0c;从而提高代码的开发能力和阅读别人…...

编程日记 2024/1/19 9:52:01

tinyxml2

使用tinyxml2&#xff0c;得知道一些xml基础 xml tutorial--菜鸟 tinyxml2类对象 链接 结构 XMLNode 什么是节点 节点&#xff1a;元素、声明、文本、注释等。 XMLDocument xml文档(文件)对象。 作用&#xff1a; 加载xml文件&#xff0c; tinyxml2作用 先定义两个宏 …...

编程日记 2024/1/19 9:51:00

What is `@Controller` does?

Controller 是SpringMVC注解&#xff0c;标记一个类作为Web控制器&#xff08;Controller&#xff09;&#xff0c;负责处理HTTP请求并返回响应结果 在SpringMVC中&#xff0c;控制器类的主要职责是&#xff1a; 1、接收来自客户端的HTTP请求 2、调用服务层或其他业务逻辑组件…...

编程日记 2024/1/19 9:49:58

新版AndroidStudio dependencyResolutionManagement出错

在新版AndroidStudio中想像使用4.2版本或者4.3版本的AndroidStudio来构造项目&#xff1f;那下面这些坑我们就需要来避免了&#xff0c;否则会出各种各样的问题。 一.我们先来看看新旧两个版本的不同。 1.jdk版本的不同 新版默认是jdk17 旧版默认是jdk8 所以在新版AndroidSt…...

编程日记 2024/1/19 9:48:57

第三天业务题

3-1 你们的项目是如何进行参数校验的 在我们的项目中&#xff0c;通常使用以下2种方式进行参数校验&#xff1a; 1.手动校验&#xff1a;在方法内部&#xff0c;我们可以手动编写代码来对参数进行校验。例如&#xff0c;使用条件判断语句&#xff08;if-else&#xff09;来检…...

编程日记 2024/1/19 9:47:56

nestjs 装饰器

1、装饰器定义 装饰器是一种特殊的类型声明&#xff0c;它可以附加在类、方法、属性、参数上边 需开启tsconfig.json中 "experimentalDecorators":true 生成tsconfig.json文件 tsc -init 2、类装饰器 // 类装饰器 主要是通过符号添加装饰器 // 装饰器会自动把cl…...

编程日记 2024/1/19 9:46:55

一款开源且不限制大小可以设置过期时间的支持分享的的开源文件共享系统picoshare 部署教程

1.拉取镜像 2.部署 创建目录 mkdir -p /opt/picoshare/data 部署 其中:"somesecretpass"是密码 docker run \--env "PORT4001" \--env "PS_SHARED_SECRETsomesecretpass" \--publish 10005:4001/tcp \--volume "/opt/picoshare/data:…...

编程日记 2024/1/19 9:42:50

eBPF运行时安全

引言 eBPF作为当前linux系统上最为炙手可热的技术&#xff0c;通常被用于网络流量过滤和分析、系统调用跟踪、性能优化、安全监控&#xff0c;当下比较知名的项目有Cilium、Falco等。 Cilium 是一个开源的容器网络和安全性项目&#xff0c;致力于提供高效的容器通信和强大的安…...

编程日记 2024/1/19 9:41:49

Linux 系统中常见的命令，它们用于执行各种任务，包括文件和目录管理、系统信息查看、用户管理等

以下是一些在 Linux 系统中常见的命令&#xff0c;它们用于执行各种任务&#xff0c;包括文件和目录管理、系统信息查看、用户管理等。这里列举了一些基础的命令&#xff1a; 文件和目录管理&#xff1a; ls: 列出目录内容。 ls cd: 切换当前目录。 cd /path/to/directory …...

编程日记 2024/1/19 9:32:40

AutoEventWireup详解

AutoEventWireup详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;让我们深入探讨.NET开发中一个神奇而强大的特性——AutoEventWireup&#xff…...

编程日记 2024/1/19 9:31:39

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/12/19 0:02:24

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/12/17 16:30:13

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2025/12/19 13:26:11

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/12/25 4:27:19

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/10/11 3:56:08

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/12/21 1:58:35

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/12/22 7:58:45

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2025/12/14 14:26:01

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...

编程新知 2025/12/25 12:34:18

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...

编程新知 2025/12/24 23:39:47