chatGPT写的网页版贪吃蛇小游戏
chatGPT写的网页版贪吃蛇小游戏
- 前言
- 网页版贪吃蛇小游戏
前言
之前无聊，让ChatGPT写了一段基于html语言的贪吃蛇小游戏代码
网页版贪吃蛇小游戏
将以下内容复制到记事本，重命名为xxx.html即可打开浏览器游玩
这里是一个使用HTML、CSS和JavaScript编写的可以在浏览器中直接运行的贪吃蛇游戏代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Snake Game by OpenAI</title><style>canvas {display: block;margin: 0 auto;border: 1px solid black;}</style>
</head>
<body><canvas id="gameCanvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const snakeSize = 10;let snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}, {x: 120, y: 150}];let food = {x: 0, y: 0};let dx = 10;let dy = 0;let changingDirection = false;function drawSnakePart(snakePart) {ctx.fillStyle = 'green';ctx.strokeStyle = 'black';ctx.fillRect(snakePart.x, snakePart.y, snakeSize, snakeSize);ctx.strokeRect(snakePart.x, snakePart.y, snakeSize, snakeSize);}function drawSnake() {snake.forEach(drawSnakePart);}function moveSnake() {const head = {x: snake[0].x + dx, y: snake[0].y + dy};snake.unshift(head);const didEatFood = snake[0].x === food.x && snake[0].y === food.y;if (didEatFood) {createFood();} else {snake.pop();}}function changeDirection(event) {const LEFT_KEY = 37;const RIGHT_KEY = 39;const UP_KEY = 38;const DOWN_KEY = 40;if (changingDirection) return;changingDirection = true;const keyPressed = event.keyCode;const goingUp = dy === -10;const goingDown = dy === 10;const goingRight = dx === 10;const goingLeft = dx === -10;if (keyPressed === LEFT_KEY && !goingRight) {dx = -10;dy = 0;}if (keyPressed === UP_KEY && !goingDown) {dx = 0;dy = -10;}if (keyPressed === RIGHT_KEY && !goingLeft) {dx = 10;dy = 0;}if (keyPressed === DOWN_KEY && !goingUp) {dx = 0;dy = 10;}}function createFood() {food.x = Math.floor(Math.random() * canvas.width / 10) * 10;food.y = Math.floor(Math.random() * canvas.height / 10) * 10;snake.forEach(part => {if (part.x === food.x && part.y === food.y) {createFood();}});}function drawFood() {ctx.fillStyle = 'red';ctx.strokeStyle = 'black';ctx.fillRect(food.x, food.y, snakeSize, snakeSize);ctx.strokeRect(food.x, food.y, snakeSize, snakeSize);}function checkCollision() {for (let i = 4; i < snake.length; i++) {if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {return true;}}const hitLeftWall = snake[0].x < 0;const hitRightWall = snake[0].x > canvas.width - snakeSize;const hitTopWall = snake[0].y < 0;const hitBottomWall = snake[0].y > canvas.height - snakeSize;return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;}function gameLoop() {if (checkCollision()) {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = 'black';ctx.font = '30px Arial';ctx.fillText('Game Over!', 150, 200);return;}changingDirection = false;setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height);drawFood();moveSnake();drawSnake();gameLoop();}, 100);}createFood();document.addEventListener('keydown', changeDirection);gameLoop();</script>
</body>
</html>
将上面的代码保存为一个.html文件，然后用浏览器打开这个文件，就可以在浏览器中直接运行这个贪吃蛇游戏了。按方向键控制蛇的移动，吃到食物后蛇会变长。玩得开心！
- end
相关文章：
chatGPT写的网页版贪吃蛇小游戏
chatGPT写的网页版贪吃蛇小游戏 前言网页版贪吃蛇小游戏 前言 之前无聊，让ChatGPT写了一段基于html语言的贪吃蛇小游戏代码 网页版贪吃蛇小游戏 将以下内容复制到记事本，重命名为xxx.html即可打开浏览器游玩 这里是一个使用HTML、CSS和JavaScript编写…...
Python量化交易助手：xtquant的安装与应用
Python量化交易助手：xtquant的安装与应用 技术背景和应用场景 在量化交易领域，Python因其强大的库支持和灵活性成为了许多开发者的首选语言。其中，xtquant 是迅投官方开发的一个Python包，专门用于与miniqmt通信，实现…...
前缀和算法
文章目录 算法总览题目1371.每个元音包含偶数次的最长子字符串 算法总览 题目 1371.每个元音包含偶数次的最长子字符串 1371.每个元音包含偶数次的最长子字符串 参考博主的讲解 思路分析：就是得使用前缀和记录情况，dp[i][j]表示s[0] 到s[i] 中&…...
Qt常用控件 输入类控件
文章目录 1.QLineEdit1.1 常用属性1.2 常用信号1.3 例子1，录入用户信息1.4 例子2，正则验证手机号1.5 例子3，验证输入的密码1.6 例子4，显示密码 2. QTextEdit2.1 常用属性2.2 常用信号2.3 例子1，获取输入框的内容2.4 例…...
《最小阻力之路》关于愿景的理解和思考
一、愿景的形成机制 1. 愿景的三层来源 来源层级形成机制案例潜在偏差风险① 本能冲动层对快感/痛苦的即时反应"想暴富"源于缺钱焦虑易被短期情绪劫持② 社会镜像层内化外界标准（家庭/社会/文化）"必须考研"因家人期待混淆他人需求…...
Ubuntu 22.04系统安装部署Kubernetes v1.29.13集群
Ubuntu 22.04系统安装部署Kubernetes v1.29.13集群 简介Kubernetes 的工作流程概述Kubernetes v1.29.13 版本Ubuntu 22.04 系统安装部署 Kubernetes v1.29.13 集群 1 环境准备1.1 集群IP规划1.2 初始化步骤（各个节点都需执行）1.2.1 主机名与IP地址解析1.…...
虚幻基础17：动画层接口
能帮到你的话，就给个赞吧 😘 文章目录 animation layer interface animation layer interface 动画层接口：动画图表的集。仅有名字。 添加到动画蓝图中，由动画蓝图实现动画图表。...
无人机PX4飞控 | PX4源码添加自定义uORB消息并保存到日志
PX4源码添加自定义uORB消息并保存到日志 0 前言 PX4的内部通信机制主要依赖于uORB（Micro Object Request Broker），这是一种跨进程的通信机制，一种轻量级的中间件，用于在PX4飞控系统的各个模块之间进行高效的数据交换…...
HTMLCSS ：下雪了
这段代码创建了一个动态的雪花飘落加载动画，通过 CSS 技术实现了雪花的下落和消失效果，为页面添加了视觉吸引力和动态感。 大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能…...
如何处理 Typecho Joe 主题被抄袭或盗版的问题
在开源社区中，版权保护是一个非常重要的话题。如果你发现自己的主题（如 Joe 主题）被其他主题（如子比主题）抄袭或盗版，你可以采取以下措施来维护自己的权益。 一、确认侵权行为 在采取任何行动之前…...
利用Vue和javascript分别编写一个“Hello World”的定时更新
目录 一、利用Vue编写一个“Hello World”的定时更新（1）vue编码在Html文件中（2）vue编码在js文件中 二、利用javascript编写一个“Hello World”的定时更新 一、利用Vue编写一个“Hello World”的定时更新 （1ÿ…...
volatile变量需要减少读取次数吗
问题说明 本人在前期读Netty源码时看到这样一段源码和注释： private boolean invokeHandler() {// Store in local variable to reduce volatile reads.int handlerState this.handlerState;return handlerState ADD_COMPLETE || (!ordered && handlerS…...
bootstrap.yml文件未自动加载问题解决方案
在添加bootstrap.yml文件后,程序未自动扫描到,即图标是这样的: 查了一些资料,是缺少bootstrap相关依赖,虽然已经添加了spring-cloud-context依赖,但是这个依赖并未引入bootstrap依赖,可能是版本问题,需要手动引入 <dependency><groupId>org.springframework.cloud&…...
编程AI深度实战：AI编程工具哪个好? Copilot vs Cursor vs Cody vs Supermaven vs Aider
系列文章： 编程AI深度实战：私有模型deep seek r1，必会ollama-CSDN博客 编程AI深度实战：自己的AI，必会LangChain-CSDN博客 编程AI深度实战：给vim装上AI-CSDN博客 编程AI深度实战：火的编程AI，都在用语法树（AST）-CSDN博客 编程AI深度实战：让verilog不再是 AI …...
前端知识速记--CSS篇：display
前端知识速记–CSS篇：display 一、什么是 display 属性？ display 属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式，还对元素的布局、结构以及与其他元素之间的关系产生重要影响。 二、常用 display 属性值 1. block …...
51单片机 01 LED
一、点亮一个LED 在STC-ISP中单片机型号选择 STC89C52RC/LE52RC；如果没有找到hex文件（在objects文件夹下），在keil中options for target-output- 勾选 create hex file。 如果要修改编程 ：重新编译-下载/编程-单片机重…...
WPF进阶 | WPF 动画特效揭秘：实现炫酷的界面交互效果
WPF进阶 | WPF 动画特效揭秘：实现炫酷的界面交互效果 前言一、WPF 动画基础概念1.1 什么是 WPF 动画1.2 动画的基本类型1.3 动画的核心元素 二、线性动画详解2.1 DoubleAnimation 的使用2.2 ColorAnimation 实现颜色渐变 三、关键帧动画深入3.1 DoubleAnimationUsin…...
分页按钮功能
前言 在前端开发中，分页功能是一个常见的需求，特别是当需要展示大量数据时，它能有效提升用户体验。该文章结合运用了HTML，CSS，JS实现网页的分页按钮功能，并且可以选择每页显示的条数试试更新总页数及显示当…...
数据分析系列--⑦RapidMiner模型评价(基于泰坦尼克号案例含数据集)
一、前提 二、模型评估 1.改造⑥ 2.Cross Validation算子说明 2.1Cross Validation 的作用 2.1.1 模型评估 2.1.2 减少过拟合 2.1.3 数据利用 2.2 Cross Validation 的工作原理 2.2.1 数据分割 2.2.2 迭代训练与测试 2.2.3 结果汇总 …...
集合通讯概览
集合通信概览 （1）通信的算法 是根据通讯的链路组成的 （2）因为通信链路 跟硬件强相关，所以每个CCL的库都不一样 芯片与芯片、不同U之间是怎么通信的 多卡训练：多维并行（xxx并行在上一期已经讲述…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代，智能代理（agents）不再是孤立的个体，而是能够像一个数字团队一样协作。然而，当前 AI 生态系统的碎片化阻碍了这一愿景的实现，导致了“AI 巴别塔问题”——不同代理之间…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
浅谈不同二分算法的查找情况
二分算法原理比较简单，但是实际的算法模板却有很多，这一切都源于二分查找问题中的复杂情况和二分算法的边界处理，以下是博主对一些二分算法查找的情况分析。 需要说明的是，以下二分算法都是基于有序序列为升序有序的情况…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...