html编写贪吃蛇页面小游戏（可以玩）
<!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 {…...
【淘宝购买的源码靠谱吗】
文章目录 前言一、项目需求二、卖家评价三、价格质量四、源码细节五、技术支持六、合法性七、市场环境八、风险评估总结 前言 在淘宝上购买的源码质量和可靠性存在不确定性。淘宝作为一个综合性电商平台，提供了各种各样的商品和服务，包括源代码。然而&a…...
C++ | list
前言 本篇博客讲解cSTL中的list 💓 个人主页：普通young man-CSDN博客 ⏩ 文章专栏：C_普通young man的博客-CSDN博客 ⏩ 本人giee: 普通小青年 (pu-tong-young-man) - Gitee.com 若有问题 评论区见📝 🎉欢迎大家点赞&…...
Vue3 v-bind 指令用法
在 Vue 3 中，v-bind 指令用于将表达式的值绑定到 DOM 元素的属性上。这个指令的语法与 Vue 2 相同，但有一些细微的变化和改进。 以下是 Vue 3 中 v-bind 指令的基本用法： 基本用法: <button v-bind:class"{ active: isActive }"…...
通过Go示例理解函数式编程思维
一个孩子要尝试10次、20次才肯接受一种新的食物，我们接受一种新的范式，大概不会比这个简单。-- 郭晓刚 《函数式编程思维》译者 函数式编程(Functional Programming, 简称fp)是一种编程范式，与命令式编程(Imperative Programming)、面向对象编…...
刷题DAY7
三角形面积 题目：已知三角形的边长a，b和从、，求其面积 输入：输入三个实数a，b，c，表示三边长 输出：输出面积，保留三位小数 输入：1 2 2.5 输出࿱…...
离线数据开发流程小案例-图书馆业务数据
参考 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…...
GPT-5：未来已来，你准备好了吗
GPT-5：未来已来，你准备好了吗？ 在人工智能的浩瀚星空中，自然语言处理（NLP）技术如同璀璨星辰，不断引领着技术革新的浪潮。而在这股浪潮中，OpenAI的GPT（Generative Pre-tr…...
白骑士的Matlab教学高级篇 3.2 并行计算
系列目录 上一篇：白骑士的Matlab教学高级篇 3.1 高级编程技术 并行计算是一种通过同时执行多个计算任务来加速程序运行的方法。在MATLAB中，并行计算工具箱（Parallel Computing Toolbox）提供了丰富的并行计算功能，使用…...
JS中【解构赋值】知识点解读
解构赋值（Destructuring Assignment）是 JavaScript 中一种从数组或对象中提取数据的简便方法，可以将其赋值给变量。这种语法可以让代码更加简洁、清晰。下面我会详细讲解解构赋值的相关知识点。 1. 数组解构赋值 数组解构赋值允许你通过位置…...
【Pyspark-驯化】一文搞懂Pyspark中对json数据处理使用技巧：get_json_object
【Pyspark-驯化】一文搞懂Pyspark中对json数据处理使用技巧：get_json_object 本次修炼方法请往下查看 🌈 欢迎莅临我的个人主页 👈这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合，智慧小天地！ 🎇 …...
第10章 无持久存储的文件系统 （1）
目录 前言 10.1 proc文件系统 10.1.1 /proc 内容 本专栏文章将有70篇左右，欢迎关注，查看后续文章。 前言 即存在于内存中的文件系统。如： proc： sysfs： 即/sys目录。 内容不一定是ASCII文本，可能是二进…...
如何把命令行创建python虚拟环境与pycharm项目管理更好地结合起来
1. 问题的提出 我在linux或windows下的某个目录如“X”下使用命令行的方式创建了一个python虚拟环境（参考文章），对应的目录为myvenv, 现在我想使用pycharm创建python项目myproject，并且利用虚拟环境myvenv，怎么办&…...
keepalived+lvs高可用负载均衡集群配置方案
配置方案 一、配置主备节点1. 在主备节点上安装软件2. 编写配置文件3. 启动keepalived服务 二、配置web服务器1. 安装并启动http服务2. 编写主页面3.配置虚拟地址4. 配置ARP 三、测试 服务器IP： 主负载均衡服务器 master 192.168.152.71备负载均衡服务器 backup 192…...
Azure OpenAI Swagger Validation Failure with APIM
题意：Azure OpenAI Swagger 验证失败与 APIM 问题背景： 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…...
haproxy高级功能配置
介绍HAProxy高级配置及实用案例 一.基于cookie会话保持 cookie value:为当前server指定cookie值，实现基于cookie的会话黏性，相对于基于 source 地址hash 调度算法对客户端的粒度更精准，但同时也加大了haproxy负载，目前此模式使用…...
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 配置…...
直流电机及其驱动
直流电机是一种将电能转换为机械能的装置，有两个电极，当电极正接时，电机正转，当电极反接时，电机反转。 直流电机属于大功率器件，GPIO口无法直接驱动，需要配合电机驱动电路来操作 TB6612是一款双…...
Java-判断一个字符串是否为有效的JSON字符串
在 Java 中判断一个字符串是否为有效的 JSON 字符串，可以使用不同的库来进行验证。常见的库 包括 org.json、com.google.gson 和 com.alibaba.fastjson 等。这里我将展示如何使用 com.alibaba.fastjson 库来实现一个简单的工具类，用于判断给定的字符串…...
FPGA开发板的基本知识及应用
FPGA开发板是一种专门设计用于开发和测试现场可编程门阵列(Field-Programmable Gate Array, FPGA)的硬件平台。FPGA是一种高度可配置的集成电路，能够在制造后被编程以执行各种数字逻辑功能。FPGA开发板通常包含一个FPGA芯片以及一系列支持电路和接口，以便…...
如何快速掌握WarcraftHelper：魔兽争霸III现代化优化的终极指南
如何快速掌握WarcraftHelper：魔兽争霸III现代化优化的终极指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 你是否还记得那些年在《魔兽…...
5分钟上手Efficient-KAN：高效Kolmogorov-Arnold网络实战指南
5分钟上手Efficient-KAN：高效Kolmogorov-Arnold网络实战指南 【免费下载链接】efficient-kan An efficient pure-PyTorch implementation of Kolmogorov-Arnold Network (KAN). 项目地址: https://gitcode.com/GitHub_Trending/ef/efficient-kan 还在为传统神…...
【大模型服务治理实战指南】：奇点智能大会首发的7大避坑法则与3套可落地架构模板
更多请点击： https://intelliparadigm.com 第一章：大模型服务治理：奇点智能大会 在2024年奇点智能大会上，大模型服务治理成为核心议题。随着LLM推理服务规模化部署，企业面临模型版本混乱、流量调度失衡、资源隔离缺失…...
从绝圣弃智到少造机关，老子这一句放进 SAP HANA 开发里，讲的是把聪明收回到模型、数据和执行计划本身
在 SAP HANA 项目里，最容易让团队误判的场景，往往不是某个开发人员不会写 SQL，也不是不会建 Calculation View，而是大家太相信自己的聪明。一个销售分析报表慢了，开发人员立刻想写一段复杂的 SQLScript；一个库存可用量计算不准，团队又想加一层临时表；一个财务口径有争议…...
百度网盘直链解析技术深度解析：突破限速壁垒的工程实践
百度网盘直链解析技术深度解析：突破限速壁垒的工程实践 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 在当今数字化时代，百度网盘作为国内主流云存储服…...
前端工程化：依赖管理最佳实践
前端工程化：依赖管理最佳实践 前言 依赖管理是前端工程化的基础！如果你的项目依赖管理混乱，那你的项目就像一个堆满杂物的仓库，难以维护。今天我就来给大家讲讲前端依赖管理的最佳实践。 为什么需要依赖管理 版本控制：…...
定点FIR滤波器实现：系数量化与嵌入式优化
1. 定点FIR滤波器实现的核心挑战在数字信号处理领域，有限脉冲响应(FIR)滤波器因其绝对稳定性成为基础构建模块。与IIR滤波器不同，FIR系统仅依赖于当前和过去的输入样本，其传递函数不包含反馈回路。这种特性使得FIR滤波器在需要线性相位响应的…...
oh-my-opencode：AI编程操作系统，智能体编排与哈希锚定编辑实战
1. 项目概述：一个为AI编程而生的“操作系统”如果你和我一样，在过去一年里深度使用过Claude Code、Cursor或者各种开源的AI编程工具，那你一定经历过这种痛苦：模型选型让人眼花缭乱，配置流程复杂到让人想放弃࿰…...
《如果你还愿意等》的搜索理由：等待场景怎样被记住
从内容传播角度看，《如果你还愿意等》的优势在于语气。它不是命令，也不是苦情控诉，而是把等待放成一个“如果”：有余地，也有边界。这个标题能自然带出使用场景：未读消息、夜车灯光、异地关系、还没完全离开…...
Conforme配置管理范式：类型安全与约定优先的实践指南
1. 项目概述：Conforme，一个被低估的配置管理范式在软件开发和系统运维的日常里，我们总在和“配置”打交道。数据库连接字符串、API密钥、功能开关、环境变量……这些看似零散的信息，却像乐谱上的音符，共同决定了应用如…...