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芯片以及一系列支持电路和接口，以便…...
【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
JavaScript 中的 ES|QL：利用 Apache Arrow 工具
作者：来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗？了解下一期 Elasticsearch Engineer 培训的时间吧！ Elasticsearch 拥有众多新功能，助你为自己…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时，你可能需要保留重要的数据，例如通讯录。好在，将通讯录从 iPhone 转移到 Android 手机非常简单，你可以从本文中学习 6 种可靠的方法，确保随时保持连接，不错过任何信息。 第 1…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如 中文，英文，日语），语音情感（如 开心，悲伤）&#x…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...
)
OpenLayers 分屏对比(地图联动)
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...