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题库 汽车迷编写函数输出自除数身份证号基本信息 汽车…...
AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
中关于正整数输入的校验规则)
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
HashMap中的put方法执行流程（流程图）
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...
Linux离线（zip方式）安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1：修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本：CentOS 7 64位 内核版本：3.10.0 相关命令： uname -rcat /etc/os-rele…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
【SpringBoot自动化部署】
SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一，能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时，需要添加Git仓库地址和凭证，设置构建触发器（如GitHub…...
背包问题双雄：01 背包与完全背包详解（Java 实现）
一、背包问题概述 背包问题是动态规划领域的经典问题，其核心在于如何在有限容量的背包中选择物品，使得总价值最大化。根据物品选择规则的不同，主要分为两类： 01 背包：每件物品最多选 1 次（选或不选&#…...
VSCode 没有添加Windows右键菜单
关键字：VSCode；Windows右键菜单；注册表。 文章目录 前言一、工程环境二、配置流程1.右键文件打开2.右键文件夹打开3.右键空白处打开文件夹 三、测试总结 前言 安装 VSCode 时没有注意，实际使用的时候发现 VSCode 在 Windows 菜单栏…...