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

html编写贪吃蛇页面小游戏（可以玩）

news 文章来源：https://blog.csdn.net/Oxford1151/article/details/141104881 2025/1/19 14:09:57 

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贪吃蛇小游戏</title><style>body {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;margin: 0;}#gameCanvas {border: 1px solid black;}.buttons {margin-top: 20px;}</style>
</head>
<body><canvas id="gameCanvas" width="400" height="400"></canvas><div class="buttons"><button id="startButton">开始游戏</button><button id="endButton" disabled>结束游戏</button></div><script>// 获取画布和上下文const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const boxSize = 20;let snake = [{x: 10, y: 10}];let food = {x: 15, y: 15};let dx = boxSize;let dy = 0;let gameLoop;// 绘制游戏画面function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);// 移动蛇let head = {x: snake[0].x + dx / boxSize, y: snake[0].y + dy / boxSize};// 检查是否撞墙if (head.x < 0 || head.x >= canvas.width / boxSize || head.y < 0 || head.y >= canvas.height / boxSize) {endGame();return;}// 检查是否撞到自己if (snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {endGame();return;}snake.unshift(head);// 检查是否吃到食物if (head.x === food.x && head.y === food.y) {food = {x: Math.floor(Math.random() * (canvas.width / boxSize)), y: Math.floor(Math.random() * (canvas.height / boxSize))};} else {snake.pop();}// 画蛇snake.forEach(segment => {ctx.fillStyle = 'green';ctx.fillRect(segment.x * boxSize, segment.y * boxSize, boxSize, boxSize);});// 画食物ctx.fillStyle = 'red';ctx.fillRect(food.x * boxSize, food.y * boxSize, boxSize, boxSize);}// 开始游戏function startGame() {snake = [{x: 10, y: 10}];food = {x: 15, y: 15};dx = boxSize;dy = 0;document.getElementById('startButton').disabled = true;document.getElementById('endButton').disabled = false;gameLoop = setInterval(draw, 200); // 增加时间间隔以降低速度}// 结束游戏function endGame() {clearInterval(gameLoop);alert('游戏结束');document.getElementById('startButton').disabled = false;document.getElementById('endButton').disabled = true;}document.getElementById('startButton').addEventListener('click', startGame);document.getElementById('endButton').addEventListener('click', endGame);document.addEventListener('keydown', (e) => {if (e.key === 'ArrowUp' && dy === 0) {dx = 0;dy = -boxSize;} else if (e.key === 'ArrowDown' && dy === 0) {dx = 0;dy = boxSize;} else if (e.key === 'ArrowLeft' && dx === 0) {dx = -boxSize;dy = 0;} else if (e.key === 'ArrowRight' && dx === 0) {dx = boxSize;dy = 0;}});</script>
</body>
</html>

（AI教授的，算是自娱自乐吧。这代码还挺有意思的。）

相关文章：

html编写贪吃蛇页面小游戏（可以玩）

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>贪吃蛇小游戏</title><style>body {…...

编程日记 2024/8/14 18:09:04

【淘宝购买的源码靠谱吗】

文章目录 前言一、项目需求二、卖家评价三、价格质量四、源码细节五、技术支持六、合法性七、市场环境八、风险评估总结 前言 在淘宝上购买的源码质量和可靠性存在不确定性。淘宝作为一个综合性电商平台&#xff0c;提供了各种各样的商品和服务&#xff0c;包括源代码。然而&a…...

编程日记 2024/8/14 18:08:03

C++ | list

前言 本篇博客讲解cSTL中的list &#x1f493; 个人主页&#xff1a;普通young man-CSDN博客 ⏩ 文章专栏&#xff1a;C_普通young man的博客-CSDN博客 ⏩ 本人giee: 普通小青年 (pu-tong-young-man) - Gitee.com 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&…...

编程日记 2024/8/14 18:07:00

Vue3 v-bind 指令用法

在 Vue 3 中&#xff0c;v-bind 指令用于将表达式的值绑定到 DOM 元素的属性上。这个指令的语法与 Vue 2 相同&#xff0c;但有一些细微的变化和改进。 以下是 Vue 3 中 v-bind 指令的基本用法&#xff1a; 基本用法: <button v-bind:class"{ active: isActive }"…...

编程日记 2024/8/14 18:04:56

通过Go示例理解函数式编程思维

一个孩子要尝试10次、20次才肯接受一种新的食物&#xff0c;我们接受一种新的范式&#xff0c;大概不会比这个简单。-- 郭晓刚 《函数式编程思维》译者 函数式编程(Functional Programming, 简称fp)是一种编程范式&#xff0c;与命令式编程(Imperative Programming)、面向对象编…...

编程日记 2024/8/14 18:02:51

刷题DAY7

三角形面积 题目&#xff1a;已知三角形的边长a&#xff0c;b和从、&#xff0c;求其面积 输入&#xff1a;输入三个实数a&#xff0c;b&#xff0c;c&#xff0c;表示三边长 输出&#xff1a;输出面积&#xff0c;保留三位小数 输入&#xff1a;1 2 2.5 输出&#xff1…...

编程日记 2024/8/14 18:00:47

离线数据开发流程小案例-图书馆业务数据

参考 https://blog.csdn.net/m53931422/article/details/103633452 https://www.cnblogs.com/jasonlam/p/7928179.html https://cwiki.apache.org/confluence/display/Hive/LanguageManualUDF https://medium.com/jackgoettle23/building-a-hive-user-defined-function-f6abe9…...

编程日记 2024/8/14 17:58:44

GPT-5：未来已来，你准备好了吗

GPT-5&#xff1a;未来已来&#xff0c;你准备好了吗&#xff1f; 在人工智能的浩瀚星空中&#xff0c;自然语言处理&#xff08;NLP&#xff09;技术如同璀璨星辰&#xff0c;不断引领着技术革新的浪潮。而在这股浪潮中&#xff0c;OpenAI的GPT&#xff08;Generative Pre-tr…...

编程日记 2024/8/14 17:57:42

白骑士的Matlab教学高级篇 3.2 并行计算

系列目录 上一篇&#xff1a;白骑士的Matlab教学高级篇 3.1 高级编程技术 并行计算是一种通过同时执行多个计算任务来加速程序运行的方法。在MATLAB中&#xff0c;并行计算工具箱&#xff08;Parallel Computing Toolbox&#xff09;提供了丰富的并行计算功能&#xff0c;使用…...

编程日记 2024/8/14 17:55:37

JS中【解构赋值】知识点解读

解构赋值&#xff08;Destructuring Assignment&#xff09;是 JavaScript 中一种从数组或对象中提取数据的简便方法&#xff0c;可以将其赋值给变量。这种语法可以让代码更加简洁、清晰。下面我会详细讲解解构赋值的相关知识点。 1. 数组解构赋值 数组解构赋值允许你通过位置…...

编程日记 2024/8/14 17:54:34

【Pyspark-驯化】一文搞懂Pyspark中对json数据处理使用技巧：get_json_object

【Pyspark-驯化】一文搞懂Pyspark中对json数据处理使用技巧&#xff1a;get_json_object 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; …...

编程日记 2024/8/14 17:53:32

第10章 无持久存储的文件系统 （1）

目录 前言 10.1 proc文件系统 10.1.1 /proc 内容 本专栏文章将有70篇左右&#xff0c;欢迎关注&#xff0c;查看后续文章。 前言 即存在于内存中的文件系统。如&#xff1a; proc&#xff1a; sysfs&#xff1a; 即/sys目录。 内容不一定是ASCII文本&#xff0c;可能是二进…...

编程日记 2024/8/14 17:50:27

如何把命令行创建python虚拟环境与pycharm项目管理更好地结合起来

1. 问题的提出 我在linux或windows下的某个目录如“X”下使用命令行的方式创建了一个python虚拟环境&#xff08;参考文章&#xff09;&#xff0c;对应的目录为myvenv, 现在我想使用pycharm创建python项目myproject&#xff0c;并且利用虚拟环境myvenv&#xff0c;怎么办&…...

编程日记 2024/8/14 17:48:22

keepalived+lvs高可用负载均衡集群配置方案

配置方案 一、配置主备节点1. 在主备节点上安装软件2. 编写配置文件3. 启动keepalived服务 二、配置web服务器1. 安装并启动http服务2. 编写主页面3.配置虚拟地址4. 配置ARP 三、测试 服务器IP&#xff1a; 主负载均衡服务器 master 192.168.152.71备负载均衡服务器 backup 192…...

编程日记 2024/8/14 17:45:18

Azure OpenAI Swagger Validation Failure with APIM

题意&#xff1a;Azure OpenAI Swagger 验证失败与 APIM 问题背景&#xff1a; Im converting the Swagger for Azure OpenAI API Version 2023-07-01-preview from json to yaml 我正在将 Azure OpenAI API 版本 2023-07-01-preview 的 Swagger 从 JSON 转换为 YAML。 My S…...

编程日记 2024/8/14 17:43:14

haproxy高级功能配置

介绍HAProxy高级配置及实用案例 一.基于cookie会话保持 cookie value:为当前server指定cookie值&#xff0c;实现基于cookie的会话黏性&#xff0c;相对于基于 source 地址hash 调度算法对客户端的粒度更精准&#xff0c;但同时也加大了haproxy负载&#xff0c;目前此模式使用…...

编程日记 2024/8/14 17:42:12

XXL-JOB分布式定时任务框架快速入门

文章目录 前言定时任务分布式任务调度 1、XXL-JOB介绍1.1 XXL-JOB概述1.2 XXL-JOB特性1.3 整体架构 2、XXL-JOB任务中心环境搭建2.1 XXL-JOB源码下载2.2 IDEA导入xxljob工程2.3 初始化数据库2.4 Docker安装任务管理中心 3、XXL-JOB任务注册测试3.1 引入xxl-job核心依赖3.2 配置…...

编程日记 2024/8/14 17:41:08

直流电机及其驱动

直流电机是一种将电能转换为机械能的装置&#xff0c;有两个电极&#xff0c;当电极正接时&#xff0c;电机正转&#xff0c;当电极反接时&#xff0c;电机反转。 直流电机属于大功率器件&#xff0c;GPIO口无法直接驱动&#xff0c;需要配合电机驱动电路来操作 TB6612是一款双…...

编程日记 2024/8/14 17:39:05

Java-判断一个字符串是否为有效的JSON字符串

在 Java 中判断一个字符串是否为有效的 JSON 字符串&#xff0c;可以使用不同的库来进行验证。常见的库 包括 org.json、com.google.gson 和 com.alibaba.fastjson 等。这里我将展示如何使用 com.alibaba.fastjson 库来实现一个简单的工具类&#xff0c;用于判断给定的字符串…...

编程日记 2024/8/14 17:37:01

FPGA开发板的基本知识及应用

FPGA开发板是一种专门设计用于开发和测试现场可编程门阵列(Field-Programmable Gate Array, FPGA)的硬件平台。FPGA是一种高度可配置的集成电路&#xff0c;能够在制造后被编程以执行各种数字逻辑功能。FPGA开发板通常包含一个FPGA芯片以及一系列支持电路和接口&#xff0c;以便…...

编程日记 2024/8/14 17:35:59

JVM知识总结（性能调优）

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 性能调优 何时进行JVM调优&#xff1f; 遇到以下情况&#xff0c…...

编程日记 2024/8/14 17:33:56

基于Ascend C的Matmul算子性能优化最佳实践

矩阵乘法是深度学习计算中的基础操作&#xff0c;对于提升模型训练和推理速度至关重要。昇腾AI处理器是一款专门面向AI领域的AI加速器&#xff0c;其AI Core采用达芬奇架构&#xff0c;以高性能Cube计算引擎为基础&#xff0c;针对矩阵运算进行加速&#xff0c;可大幅提高单位面…...

编程日记 2024/8/14 17:32:54

SQL注入之EVAL长度限制突破技巧

要求&#xff1a; PHP Eval函数参数限制在16个字符的情况下 &#xff0c;如何拿到Webshell&#xff1f; widows小皮环境搭建&#xff1a; 使用phpstudy搭建一个网站。 随后在该eval文件夹下创建一个webshell.php文件&#xff0c;并在其输入代码环境 解题思路&#xff1a; 通…...

编程日记 2024/8/14 17:31:52

稀疏注意力：时间序列预测的局部性和Transformer的存储瓶颈

时间序列预测是许多领域的重要问题&#xff0c;包括对太阳能发电厂发电量、电力消耗和交通拥堵情况的预测。在本文中&#xff0c;提出用Transformer来解决这类预测问题。虽然在我们的初步研究中对其性能印象深刻&#xff0c;但发现了它的两个主要缺点:(1)位置不可知性:规范Tran…...

编程日记 2024/8/14 17:30:50

详谈系统中的环境变量

目录 前言1. 指令背后的本质2. 环境变量背后的本质3. 环境变量到底是什么4. 命令行参数5. 本地变量 与 内置命令6. 环境变量的相关命令 前言 相信在 it 行业学习或者工作的小伙伴们&#xff0c;基本都配置过环境变量&#xff08;windows环境下&#xff09;&#xff0c;如果你也…...

编程日记 2024/8/14 17:29:48

RAG与LLM原理及实践（11）--- Milvus hybrid search 源码分析及思想

目录 背景 hybrid search 源码分析 WeightedRanker 源码 hybrid search 核心 参数详解 基本入参 扩展入参 aysnc方式代码调用案例 说明 源码逻辑 prepare 调用过程 stub 调用结果 stub 调用过程 blocking 与 async 调用方式 深入内部core weightedRanker 的ch…...

编程日记 2024/8/14 17:27:44

JavaScript模拟空调效果

JavaScript模拟空调效果https://www.bootstrapmb.com/item/15074 在JavaScript中模拟空调效果主要依赖于前端界面的交互和状态变化&#xff0c;因为实际的温度调节、风扇速度调整等硬件操作无法直接通过JavaScript在浏览器中实现。不过&#xff0c;我们可以通过JavaScript来模…...

编程日记 2024/8/14 17:25:38

14.2 Pandas数据处理

欢迎来到我的博客，很高兴能够在这里和您见面！欢迎订阅相关专栏： 工💗重💗hao💗：野老杂谈 ⭐️ 全网最全IT互联网公司面试宝典：收集整理全网各大IT互联网公司技术、项目、HR面试真题. ⭐️ AIGC时代的创新与未来：详细讲解AIGC的概念、核心技术、应用领域等内容。 ⭐…...

编程日记 2024/8/14 17:24:36

python学习7---多进程

一、介绍 多进程是指在同一程序中创建多个独立的进程来执行任务。每个进程都有自己独立的内存空间&#xff0c;相互之间不干扰。 因为GIL锁的存在&#xff0c;对于CPU密集型任务&#xff08;例如计算密集型操作&#xff09;&#xff0c;使用多进程可以提高程序的效率。 优点&am…...

编程日记 2024/8/14 17:23:35

基于Spring + Vue的旅游景区项目+源代码+文档说明

文章目录 源代码下载地址项目介绍项目功能界面预览 项目备注源代码下载地址 源代码下载地址 点击这里下载源码 项目介绍 基于Spring Vue的旅游景区项目 项目功能 民宿管理员&#xff1a;订单数量统计&#xff0c;订单交易额统计&#xff0c;客房统计饼图&#xff0c;酒店…...

编程日记 2024/8/14 17:22:33

淄博网站制作定制技术/网站整合营销推广

ls -F一种非常有用的ls格式 tz/y/yupeng > ls -F#q# News/ doc/ images/ mbox postponedMail/ dead.letter html mail/ myftp/ 这种命令格式可以很明显的显示出那些是目录那些是文件。 tz/y/yupeng &…...

编程日记 2025/1/19 10:38:57

泰兴做网站的公司/市场营销毕业论文

题目描述 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长连续子字符串 的长度。 示例 示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子字符串是 “abc”&#xff0c;所以其长度为 3。 示例 2: 输入: s “bbbbb” 输出: 1 解释: 因…...

编程日记 2025/1/19 7:56:05

做网站 什么语言/友情链接软件

计算机一级考试理论知识也会考很多&#xff0c;下面是&#xff0c;欢迎练习。一、选择题1、下列软件中____一定是系统软件。A、自编的一个C程序&#xff0c;功能是求解一个一元二次方程 B、WINDOWS操作系统C、用汇编语言编写的一个练习程序 D、存储有计算机基本输入输出系统的R…...

编程日记 2025/1/19 4:10:33

做c语言题目的网站/智能识别图片

Writer&#xff1a;BYSocket(泥沙砖瓦浆木匠)一、前言针对并发&#xff0c;老生常谈了。目前一个通用的做法有两种&#xff1a;锁机制&#xff1a;1.悲观锁&#xff1b;2.乐观锁。但是这篇我主要用于记录我这次处理的经历&#xff0c;另外希望能看的大神&#xff0c;大牛&#…...

编程日记 2025/1/18 17:45:36

企业网站建设包括哪些/抖音优化是什么意思

请转到 my ccna book 目录下载全部访问列表提供了另一个控制网络的有力工具&#xff0c;它增加了过滤数据流的灵活性&#xff0c;在不妨碍合法通信连接的同时阻止了非法或不必要的流量经过&#xff0c;保护了网络资源。转载于:https://blog.51cto.com/gooltsing/1542493...

编程日记 2025/1/18 14:42:36

自助建站教程/宁波网络推广团队

因操作系统问题&#xff0c;我的 EC2 Linux 实例的实例状态检查失败。如何解决此问题&#xff1f;上次更新时间&#xff1a;2020 年 6 月 2 日由于操作系统问题&#xff0c;我的 Amazon Elastic Compute Cloud (Amazon EC2) Linux 实例的实例状态检查失败。现在&#xff0c;它不…...

编程日记 2025/1/18 14:23:21