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题库 汽车迷编写函数输出自除数身份证号基本信息 汽车…...
解锁3大高效创作模式：无需安装的在线演示神器全解析
解锁3大高效创作模式：无需安装的在线演示神器全解析 【免费下载链接】PPTist PowerPoint-ist（/pauəpɔintist/）, An online presentation application that replicates most of the commonly used features of MS PowerPoint, allowing for …...
Libsvm 编译mex不同平台兼容性问题 Application not supported on glnxa64 due to platform dependencies. Intended pl
matlab线上算法执行报错：Application not supported on glnxa64 due to platform dependencies. Intended platforms include: win64 排查后发现是使用了libsvm-3.3, 而libsvm编译的时候是基于win64编译的导致出现此bug.(因为libsvm的开源代码不是matlab࿰…...
3款自动化工具提升文档下载效率：智能识别与批量处理完整指南
3款自动化工具提升文档下载效率：智能识别与批量处理完整指南 【免费下载链接】kill-doc 看到经常有小伙伴们需要下载一些免费文档，但是相关网站浏览体验不好各种广告，各种登录验证，需要很多步骤才能下载文档，该脚本就是…...
【后端】主流后端语言横向对比：JAVA、C、C++、GO、PYTHON的实战应用与选型指南
1. 五种主流后端语言的核心特性对比 第一次接触后端开发时，面对众多编程语言的选择确实容易犯难。我至今记得2013年参与电商系统重构时，团队为选择Java还是Go争论了两周。这五种语言就像不同的工具——没有绝对的好坏，关键要看用在什么场景。…...
新手友好：通过快马平台轻松上手vc16188视频处理开发
作为一个刚接触视频处理的新手，我最近在InsCode(快马)平台上尝试了一个vc16188视频基础处理项目，整个过程比我预想的顺利很多。这个平台最让我惊喜的是，它能根据我的需求描述直接生成完整可运行的项目代码，而且代码结构清晰、注释…...
5分钟搞定Phi-4-mini-reasoning：轻量级推理模型部署与使用教程
5分钟搞定Phi-4-mini-reasoning：轻量级推理模型部署与使用教程 1. 模型简介 Phi-4-mini-reasoning是一个专注于高质量推理任务的轻量级开源模型，属于Phi-4模型家族。这个140亿参数的模型经过专门训练，擅长处理需要复杂推理的任务࿰…...
Reloadium数据库回滚功能：SQLAlchemy和Django ORM的10个最佳实践指南
Reloadium数据库回滚功能：SQLAlchemy和Django ORM的10个最佳实践指南 【免费下载链接】reloadium Hot Reloading, Profiling and AI debugging for Python 项目地址: https://gitcode.com/gh_mirrors/re/reloadium Reloadium是一款强大的Python热重载工具&am…...
ReefwingLSM9DS1库：面向nRF52840的九轴IMU同步驱动
1. ReefwingLSM9DS1库概述：面向Arduino Nano 33 BLE的LSM9DS1九轴IMU驱动实现ReefwingLSM9DS1是一个专为Arduino Nano 33 BLE硬件平台优化的C类库，用于驱动STMicroelectronics出品的LSM9DS1高精度九轴惯性测量单元（Inertial Measurement Unit…...
干农活总腰疼？农民朋友别再硬扛腰突
经常弯腰种地、扛重物、干农活，很多农民朋友常年腰疼，总觉得累点正常，咬牙硬扛。 殊不知慢慢发展成腰间盘突出，坐骨神经疼、腿麻无力，后期连农活都干不了。乱贴偏方、盲目正骨，还容易加重病情。我院 30 多年…...
BetterNCM Installer：5分钟极速安装网易云音乐插件的终极指南
BetterNCM Installer：5分钟极速安装网易云音乐插件的终极指南 【免费下载链接】BetterNCM-Installer 一键安装 Better 系软件 项目地址: https://gitcode.com/gh_mirrors/be/BetterNCM-Installer 还在为网易云音乐插件安装的繁琐步骤而头疼吗？Bet…...