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并行在上一期已经讲述…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
边缘计算医疗风险自查APP开发方案
核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...
Redis：现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发，其初衷是为了满足他自己的一个项目需求，即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源，Redis凭借其简单易用、…...
【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验
Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...
【UE5 C++】通过文件对话框获取选择文件的路径
目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ，这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器，右键点击 .uproject 文件，选择 "Generate Visual Studio project files"，重…...
ui框架-文件列表展示
ui框架-文件列表展示 介绍 UI框架的文件列表展示组件，可以展示文件夹，支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项，适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...