html+css+js贪吃蛇游戏
贪吃蛇游戏🕹四个按钮控制方向🎮
源代码在图片后面 点赞❤️关注🙏收藏⭐️
互粉必回🙏🙏😍😍😍
源代码📟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
margin: 0;
font-family: Arial, sans-serif;
}
.game-container {
width: 300px;
text-align: center;
}
table {
border-collapse: collapse;
margin-top: 20px;
border: 1px solid gray;
}
td {
width: 10px;
height: 10px;
border: 1px solid gray;
}
.snake {
background-color: green;
}
.food {
background-color: red;
}
.control-buttons {
display: flex;
justify-content: space-around;
margin-bottom: 10px;
}
button {
width: 50px;
height: 50px;
border-radius: 10px;
border: none;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
#score {
font-size: 1.5em;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="game-container">
<div id="score">当前分数: 0</div>
<div class="control-buttons">
<button id="up-btn">▲</button>
<button id="right-btn">▶</button>
<button id="down-btn">▼</button>
<button id="left-btn">◀</button>
</div>
<table id="game-board">
</table>
</div>
<script>
const board = document.getElementById('game-board');
const scoreDisplay = document.getElementById('score');
let snake = [{x: 10, y: 10}];
let food = {x: 15, y: 15};
let direction = 'right';
let score = 0;
function drawBoard() {
board.innerHTML = '';
for (let i = 0; i < 20; i++) {
let row = '<tr>';
for (let j = 0; j < 20; j++) {
if (snake.some(part => part.x === j && part.y === i)) {
row += '<td class="snake"></td>';
} else if (food.x === j && food.y === i) {
row += '<td class="food"></td>';
} else {
row += '<td></td>';
}
}
row += '</tr>';
board.innerHTML += row;
}
}
function updateSnake() {
const head = {x: snake[0].x + (direction === 'right' ? 1 : direction === 'left' ? -1 : 0),
y: snake[0].y + (direction === 'down' ? 1 : direction === 'up' ? -1 : 0)};
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
score++;
scoreDisplay.textContent = `当前分数: ${score}`;
food = {x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20)};
} else {
snake.pop();
}
}
function checkCollision() {
const head = snake[0];
if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20 || snake.slice(1).some(part => part.x === head.x && part.y === head.y)) {
alert('Game Over!');
location.reload();
}
}
function gameLoop() {
updateSnake();
checkCollision();
drawBoard();
setTimeout(gameLoop, 200);
}
document.getElementById('up-btn').addEventListener('click', () => direction = 'up');
document.getElementById('right-btn').addEventListener('click', () => direction = 'right');
document.getElementById('down-btn').addEventListener('click', () => direction = 'down');
document.getElementById('left-btn').addEventListener('click', () => direction = 'left');
gameLoop();
</script>
</body>
</html>
相关文章：
html+css+js贪吃蛇游戏
贪吃蛇游戏🕹四个按钮控制方向🎮 源代码在图片后面 点赞❤️关注🙏收藏⭐️ 互粉必回🙏🙏😍😍😍 源代码📟 <!DOCTYPE html> <html lang"en"&…...
新手必学：掌握Excel中这些常用公式，轻松提升数据处理能力
各位同学好，今天和大家来分享几个常用函数公式的典型用法。 1、提取指定条件的不重复名单 如下图所示，某公司课程比赛，同一员工有多个比赛项目。希望从左侧的列表中，提取出财务部的参赛人员名单。F2单元格输入以下公式࿰…...
经济寒冬：竞品凶猛，你的产品如何求生？
那些年曾被竞品干掉的产品 1997年到2010年左右是国内互联网行业的快速发展和多元化发展的时期，这一时期涌现出来一大批优秀的产品，市场竞争越来越激烈。苹果 在20 世纪 80 年代，乔布斯的苹果电脑，在当时可是PC行业的老大…...
信号量——Linux并发之魂
欢迎来到 破晓的历程的 博客 引言 今天，我们继续学习Linux线程本分，在Linux条件变量中，我们对条件变量的做了详细的说明，今天我们要利用条件变量来引出我们的另一个话题——信号量内容的学习。 1.复习条件变量 在上一期博客中&…...
自动驾驶中的逆透视变换（Inverse Perspective Mapping，IPM）详解
前言 IPM（Inverse Perspective Mapping，逆透视变换）图的历史可以追溯到计算机视觉和图像处理领域的发展。逆透视变换是一种用于消除图像中透视效应的技术，使得原本由于透视产生的形变得以纠正，进而更准确地描述和理解图像中的场景。比如在行车中的车道线检测，泊车中的常见…...
Python地震波逆问题解构算法复杂信号分析
🎯要点 🎯时域、时频域以及时间和频率相关联偏振特性分析三种算法 | 🎯时域波参数估计算法 | 🎯机器学习模型波形指纹分析算法 | 🎯色散曲线和频率相关波分析算法 | 🎯动态倾斜校正算法 | 🎯声…...
C语言 -- 深入理解指针（二）
C语言 -- 深入理解指针（二） 1. 数组名的理解2. 使用指针访问数组3. 一维数组传参的本质4. 冒泡排序5. 二级指针6. 指针数组7. 指针数组模拟二维数组8. 字符指针变量9. 数组指针变量2.1数组指针变量是什么？2.2 数组指针变量怎么初始化 10. 二维…...
HTTP协议详解
HTTP协议详解 一、HTTP协议概述二、网络基础与HTTP2.1 TCP/IP协议2.2 发送HTTP请求过程2.3 HTTP请求的组成部分 三、HTTP报文HTTP请求报文HTTP响应报文 结语 一、HTTP协议概述 HTTP，即超文本传输协议（Hypertext Transfer Protocol）ÿ…...
一年时间业绩增长2倍，茅台保健酒业公司在川销售的“三板斧”
执笔 | 尼 奥 编辑 | 扬 灵 作为土地面积全国第5、人口总数全国第3、GDP全国第6的产酒、销酒大省，四川酒类消费总额已达800亿元，其中白酒市场规模达到500亿元。 近年来，随着省外名酒提升对四川市场重视，其市场份额也从20年前的3%…...
土豆炒肉做法
菜单：土豆、葱、铁辣子、纯瘦肉、淀粉、生抽、酱油、刀、案板、十三香、盐巴、擦板 流程： 洗土豆，削皮，擦成条，用凉水过滤两遍淀粉，顺便放个燥里洗肉，切成条，按照生抽、酱油、淀粉、…...
VPS拨号服务器：独享的高效与安全
在当今互联网高速发展的时代，虚拟私人服务器（VPS）已成为许多企业和个人用户托管网站、应用程序的首选。特别是带有拨号功能的VPS服务器，以其独特的优势受到广泛关注。本文将深入探讨VPS拨号服务器的独享特性，以及它如何…...
网络安全设备——防火墙
网络安全设备防火墙是一种用来加强网络之间访问控制的特殊网络互联设备。以下是对防火墙的详细解释： 一、定义与基本概念 定义：防火墙是指设置在不同网络（如可信任的企业内部网和不可信的公共网）或网络安全域之间的一系列部件的…...
Redis 管道技术
Redis 管道技术 引言 Redis，作为一个高性能的键值存储系统，被广泛应用于各种场景，如缓存、消息队列等。为了进一步提高Redis的处理能力和效率，Redis管道技术应运而生。本文将深入探讨Redis管道技术的原理、应用及其优势。 什么是Redis管道技术 Redis管道技术是一种允许…...
使用vue3-treeselect问题
1.当vue3-treeselect是单选时，使用watch监听绑定value，无法监听到值清空 对照后将:value改为v-model，如图 2.使用vue3-treeselect全部清空按钮如何置空select的值，使用watch监听 多选：pageInfo.officeName(val) {// …...
每日直播分享车载知识：硬件在环、UDS诊断、OTA升级、TBOX测试、CANoe、ECU刷写、CAN一致性测试：物理层、数据链路层等
每日直播时间：（进腾讯会议方式：QazWsxEdc_2010） 周一到周五：20：00-23：00（讲一个小时，实操两个小时） 周六与周日：9：00-17：0…...
flex布局---子元素未设置高度，默认与父元素同高---侧轴方向的拉伸
父元素未设置固定高度，由子元素高度撑开，并给父元素开启 flex 布局，成为伸缩容器。 父元素中有三个子元素，为伸缩项目，三个伸缩项目都未指定高度，div.inner1 的高度由内容撑开，div.inner2 和 d…...
资源分享—2021版三调符号库
汇总整理平台软件支持过程中客户项目提供的各类资源（包括但不限于符号库、地图模板等），在客户允许情况下进行集团内分享。 本次分享新版国土空间规划【三调符号库（2021版）】，提供SuperMap格式符号库下载。 …...
解决selenium手动下载驱动问题
解决selenium手动下载驱动问题 每次都需要手动下载驱动很头疼，今天发现一个可以自动下载最新驱动的包webdriver_manager，挺不错的 安装依赖包 pip install selenium pip install webdriver_manager from selenium import webdriver from selenium.webdr…...
使用fifo IP核，给fifo写数据，当检测到ALMOST_EMPTY时，为什么不能立即赋值
这涉及到FIFO（先入先出缓冲器）的内部工作机制和时序考虑。让我详细解释为什么在检测到ALMOST_EMPTY信号时不能立即向FIFO写入数据。 ALMOST_EMPTY信号的特性： ALMOST_EMPTY是一个预警信号，表示FIFO中的数据量已经接近空。这个信号…...
【Python123题库】#汽车迷 #编写函数输出自除数 #身份证号基本信息
禁止转载，原文：https://blog.csdn.net/qq_45801887/article/details/140080109 参考教程：B站视频讲解——https://space.bilibili.com/3546616042621301 有帮助麻烦点个赞 ~ ~ Python123题库 汽车迷编写函数输出自除数身份证号基本信息 汽车…...
Claude in Excel：原生集成的AI表格协作者
1. 项目概述：这不是插件，是Excel里长出来的AI同事“Claude in Excel”这个标题刚看到时，我下意识点开几个技术社区翻了一圈，发现多数人第一反应是：“又一个AI插件？”——其实完全不是。它根本没走传统Offic…...
Unity UGUI轻量UI框架：200行代码实现零GC界面管理
1. 为什么还要自己手写UI框架？——当UGUI原生方案开始“卡脖子”很多人看到这个标题第一反应是：“都2024年了，还手写UI框架？Asset Store里几十个成熟方案，NGUI、FairyGUI、TextMeshPro配套的UI系统一抓一大把ÿ…...
基于2D工程图几何特征与梯度提升模型的制造成本智能预测
1. 项目概述：从图纸到报价的智能革命在制造业，尤其是像汽车零部件这样的离散制造领域，报价速度直接决定了订单的生死。传统上，拿到一张新的2D工程图（DWG格式），成本工程师需要花上几天甚至几周时…...
混合求解器：用神经网络增强传统微分方程数值方法
1. 项目概述：当数值方法遇到机器学习在科学计算和工程仿真领域，求解常微分方程（ODE）和偏微分方程（PDE）是绕不开的核心任务。无论是模拟电路中的电流变化、预测天气系统的演变，还是分析机械结构的…...
【DeepSeek-R1代码相似度引擎解密】：3层语义比对机制、Token归一化偏差修正与Jaccard阈值黄金分割点
更多请点击： https://kaifayun.com 第一章：DeepSeek代码重复检测 DeepSeek-R1 模型在训练过程中引入了严格的代码去重机制，其核心目标是消除训练语料中语义等价或高度相似的代码片段，从而提升模型对真实编程模式的学习能力与泛化…...
别再手动点菜单了！用这招让Cadence Virtuoso Schematic效率翻倍（附Net高亮快捷键配置）
电路设计效率革命：Cadence Virtuoso Schematic高阶快捷键配置指南 在集成电路设计的浩瀚宇宙中，Cadence Virtuoso如同设计师手中的光刻机，每一次精准操作都直接影响最终芯片的性能与可靠性。然而，当面对数百个晶体管组成的复杂模…...
30岁裸辞后，我用两个月拿下AI应用认证，现在OFFER选择困难症犯了
30岁裸辞那天，我最怕的不是没收入，而是突然发现：过去积累的经验，正在被AI重新定价。以前会写方案、做表格、跟项目，算是职场硬通货；到了2026年，招聘JD里开始频繁出现AI工具应用、智能工作流、Pr…...
告别虚频困扰：用VASP+DynaPhoPy搞定高温材料声子谱的保姆级教程
高温材料声子谱计算实战：从虚频困境到非谐解决方案 引言：虚频问题的根源与突破路径 在计算材料学领域，声子谱分析是理解材料动力学稳定性和热力学性质的核心手段。然而许多研究者都遭遇过这样的困境：对实验合成的材料进行简谐近似…...
数组专项（一）：数组排序、去重、查找
大家好，欢迎来到《算法面试60讲（2026最新版全真题带解析）》第19篇！上一篇我们彻底吃透了字符串专项的核心难点——BF暴力匹配与KMP高效匹配算法，搞定了字符串模块面试最难的算法考点。从本节课开始，我们正式进入算法面试第一高频模块：数组专项。 在算法面试中，数组是出…...
Wechat2RSS：微信公众号转RSS订阅工具
文章目录Wechat2RSS：微信公众号转RSS订阅工具Wechat2RSS：微信公众号转RSS订阅工具 ttttmr开源的Wechat2RSS项目，目前在GitHub上获得1409颗Star，项目地址为https://github.com/ttttmr/Wechat2RSS。该工具的核心作用是将微信公众号…...