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题库 汽车迷编写函数输出自除数身份证号基本信息 汽车…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
【位运算】消失的两个数字（hard）
消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码 题⽬链接：⾯试题 17.19. 消失的两个数字 题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
算法笔记2
1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下，卢森堡罗伯特舒曼医院（the Robert Schuman Hospitals, HRS）凭借在无菌制剂生产流程中引入增强现实技术（AR）创新项目，荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三，HubSpot宣布已构建与ChatGPT的深度集成，这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋，但同时也存在一些关于数据安全的担忧。 许多网络声音声称，这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成
一个面向 Java 开发者的 Sring-Ai 示例工程项目，该项目是一个 Spring AI 快速入门的样例工程项目，旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计，每个模块都专注于特定的功能领域，便于学习和…...