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

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

news 2025/7/13 14:50:05

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

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/7/13 7:49:39

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/7/12 6:18:49

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/7/8 14:06:13

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/7/12 5:42:38

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2025/7/13 14:05:24

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/6/16 16:14:08

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2025/7/9 7:27:47

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

编程新知 2025/7/7 16:14:22

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/5 22:55:20

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...

编程新知 2025/7/9 2:51:50