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

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

news 2025/11/10 7:31:38

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

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/11/10 5:29:14

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/11/8 1:03:22

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/11/8 6:35:39

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/11/7 14:06:23

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/11/7 19:36:15

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

编程新知 2025/11/9 7:03:24

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

编程新知 2025/10/10 9:07:27