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

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

news 文章来源：https://blog.csdn.net/qiao_yue/article/details/135663512 2025/5/18 20:38:25

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

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

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

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

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

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

题目： 代码（首刷看解析 KMP算法 2024年1月18日）： 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. 重构改进模块化和错误处理为了改进我们的程序，我们将修复与程序结构及其处理潜在错误的方式有关的四个问题。首先，我们的main函数现在执行两项任务:解析参数和…...

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

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

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

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

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

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

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

九、K8S-label和label Selector

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

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

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

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

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

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

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

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

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

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

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

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

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

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

tinyxml2

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

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

What is `@Controller` does?

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

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

新版AndroidStudio dependencyResolutionManagement出错

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

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

第三天业务题

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

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

nestjs 装饰器

1、装饰器定义装饰器是一种特殊的类型声明，它可以附加在类、方法、属性、参数上边需开启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系统上最为炙手可热的技术，通常被用于网络流量过滤和分析、系统调用跟踪、性能优化、安全监控，当下比较知名的项目有Cilium、Falco等。 Cilium 是一个开源的容器网络和安全性项目，致力于提供高效的容器通信和强大的安…...

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

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

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

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

AutoEventWireup详解

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

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

SAP ABAP 自定义流水号编号范围

前言在开发中经常会遇到生成编号的需求(如接口报文ID，自建表数据主键等)；为此，SAP提供了自动编号工具，能根用户需求设定并自动生成一组唯一的编号。编号范围对象的创建 1.进入事务代码SNRO，创建一个编号范围对象。…...

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

安卓、ios系统详解

一、安卓安卓系统架构：从上至下，依次是应用层、应用框架层、系统运行库层和Linux内核层应用层（system app）：系统内置的应用程序及非系统级的应用程序都属于应用层，负责与用于进行交互，一般都用java或者kotlin来开发应用框架层（java api framework）：为应用层提供所需…...

编程日记 2024/1/19 9:29:37

含并行连结的网络（GoogLeNet）

目录 1.GoogLeNet 2.代码 1.GoogLeNet inception不改变高宽，只改变通道数。GoogLeNet也大量使用1*1卷积，把它当作全连接用。 V3耗内存比较多，计算比较慢，但是精度比较准确。 2.代码 import torch from torch import nn from t…...

编程日记 2024/1/19 9:28:36

计算机网络（第六版）复习提纲3

2.3 物理层下面的传输媒体传输媒体是数据传输系统中在发送器和接收器之间的物理通道，有导引型传输媒体（有线）和非导引型传输媒体（无线） 1.双绞线：两条铜线绞合，以减少干扰，绞合度越…...

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

怿星科技测试实验室获CNAS实验室认可，汽车以太网检测能力达国际标准

2023年12月27日，上海怿星电子科技有限公司测试实验室（下称：EPT LABS）通过CNAS实验室认可批准，并于2024年1月5日正式取得CNAS实验室认可证书（注册号CNAS L19826），标志着怿星科技的实验…...

编程日记 2024/1/19 9:14:23

GORM 介绍及快速入门

GORM 介绍及快速入门前言 GORM 是一个用 GoLang 语言编写的 ORM（对象关系映射）库。它被设计为开发者友好的方式来进行数据库操作。GORM 提供了一种高级的 API 来处理数据库的 CRUD（创建、读取、更新、删除）操作，它支…...

编程日记 2024/1/19 9:13:23

Scrcpy：掌握你的Android设备

Scrcpy：掌握你的Android设备本文将介绍Scrcpy工具，它是一种强大的安卓设备控制工具，可以实现屏幕镜像、操作控制等功能。我们将探讨Scrcpy的基本原理和工作方式，并介绍如何使用Scrcpy连接和控制安卓设备。此外，我们还…...

编程日记 2024/1/19 9:02:13

[9, 8, 7, 6][1,2] = ?

当我们运行这段代码时,控制台中会记录什么值? const arr [9, 8, 7, 6]; const res arr[1, 2]; console.log(res);当我们运行这段代码时,res 的值将是 7。并且控制台中会打印出 7。让我们来详细分析一下。第一步:[1, 2] 会被转换成 [2]。为什么? 后续的元素 [1, 2] …...

编程日记 2024/1/19 8:58:10

docker部署Jira+配置MySQL8数据库

写在前面：如果你通过docker安装Jira且启动过，然后你现在又想使用mysql数据库，需要注意你除了停掉原有容器，还需要删除：/var/lib/docker/volumes/jiraVolume/_data下的文件，否则启动后会无法正常使用。注意…...

编程日记 2024/1/19 8:56:09

YOLOv5全网独家首发：DCNv4更快收敛、更高速度、更高性能，效果秒杀DCNv3、DCNv2等，助力检测实现暴力涨点

💡💡💡本文独家改进：DCNv4更快收敛、更高速度、更高性能，完美和YOLOv5结合，助力涨点 DCNv4优势：(1) 去除空间聚合中的softmax归一化，以增强其动态性和表达能力；(2) 优化存储器访问以最小化冗余操作以加速。这些改进显著加快了收敛速度，并大幅提高了处理速度，DCN…...

编程日记 2024/1/19 8:54:08

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

相关文章：