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

chatGPT写的网页版贪吃蛇小游戏

news 2026/3/30 5:20:08

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文件，然后用浏览器打开这个文件，就可以在浏览器中直接运行这个贪吃蛇游戏了。按方向键控制蛇的移动，吃到食物后蛇会变长。玩得开心！

chatGPT写的网页版贪吃蛇小游戏

chatGPT写的网页版贪吃蛇小游戏前言网页版贪吃蛇小游戏前言之前无聊，让ChatGPT写了一段基于html语言的贪吃蛇小游戏代码网页版贪吃蛇小游戏将以下内容复制到记事本，重命名为xxx.html即可打开浏览器游玩这里是一个使用HTML、CSS和JavaScript编写…...

编程日记 2025/2/4 19:52:54

Python量化交易助手：xtquant的安装与应用

Python量化交易助手：xtquant的安装与应用技术背景和应用场景在量化交易领域，Python因其强大的库支持和灵活性成为了许多开发者的首选语言。其中，xtquant 是迅投官方开发的一个Python包，专门用于与miniqmt通信，实现…...

编程日记 2025/2/4 19:51:53

前缀和算法

文章目录算法总览题目1371.每个元音包含偶数次的最长子字符串算法总览题目 1371.每个元音包含偶数次的最长子字符串 1371.每个元音包含偶数次的最长子字符串参考博主的讲解思路分析：就是得使用前缀和记录情况，dp[i][j]表示s[0] 到s[i] 中&…...

编程日记 2025/2/4 19:49:51

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 例…...

编程日记 2025/2/4 19:47:49

《最小阻力之路》关于愿景的理解和思考

一、愿景的形成机制 1. 愿景的三层来源来源层级形成机制案例潜在偏差风险① 本能冲动层对快感/痛苦的即时反应"想暴富"源于缺钱焦虑易被短期情绪劫持② 社会镜像层内化外界标准（家庭/社会/文化）"必须考研"因家人期待混淆他人需求…...

编程日记 2025/2/4 19:44:46

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.…...

编程日记 2025/2/4 19:42:43

虚幻基础17：动画层接口

能帮到你的话，就给个赞吧 😘 文章目录 animation layer interface animation layer interface 动画层接口：动画图表的集。仅有名字。添加到动画蓝图中，由动画蓝图实现动画图表。...

编程日记 2025/2/4 19:41:41

无人机PX4飞控 | PX4源码添加自定义uORB消息并保存到日志

PX4源码添加自定义uORB消息并保存到日志 0 前言 PX4的内部通信机制主要依赖于uORB（Micro Object Request Broker），这是一种跨进程的通信机制，一种轻量级的中间件，用于在PX4飞控系统的各个模块之间进行高效的数据交换…...

编程日记 2025/2/4 19:36:34

HTMLCSS ：下雪了

这段代码创建了一个动态的雪花飘落加载动画，通过 CSS 技术实现了雪花的下落和消失效果，为页面添加了视觉吸引力和动态感。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能…...

编程日记 2025/2/4 19:35:33

如何处理 Typecho Joe 主题被抄袭或盗版的问题

在开源社区中，版权保护是一个非常重要的话题。如果你发现自己的主题（如 Joe 主题）被其他主题（如子比主题）抄袭或盗版，你可以采取以下措施来维护自己的权益。一、确认侵权行为在采取任何行动之前&#xf…...

编程日记 2025/2/4 19:34:32

利用Vue和javascript分别编写一个“Hello World”的定时更新

目录一、利用Vue编写一个“Hello World”的定时更新（1）vue编码在Html文件中（2）vue编码在js文件中二、利用javascript编写一个“Hello World”的定时更新一、利用Vue编写一个“Hello World”的定时更新 （1&#xff…...

编程日记 2025/2/4 19:32:29

问题说明本人在前期读Netty源码时看到这样一段源码和注释： private boolean invokeHandler() {// Store in local variable to reduce volatile reads.int handlerState this.handlerState;return handlerState ADD_COMPLETE || (!ordered && handlerS…...

编程日记 2025/2/4 19:24:21

bootstrap.yml文件未自动加载问题解决方案

在添加bootstrap.yml文件后,程序未自动扫描到,即图标是这样的: 查了一些资料,是缺少bootstrap相关依赖,虽然已经添加了spring-cloud-context依赖,但是这个依赖并未引入bootstrap依赖,可能是版本问题,需要手动引入 <dependency><groupId>org.springframework.cloud&…...

编程日记 2025/2/4 19:22:14

编程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 …...

编程日记 2025/2/4 19:20:11

前端知识速记--CSS篇：display

前端知识速记–CSS篇：display 一、什么是 display 属性？ display 属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式，还对元素的布局、结构以及与其他元素之间的关系产生重要影响。二、常用 display 属性值 1. block …...

编程日记 2025/2/4 19:19:10

51单片机 01 LED

一、点亮一个LED 在STC-ISP中单片机型号选择 STC89C52RC/LE52RC；如果没有找到hex文件（在objects文件夹下），在keil中options for target-output- 勾选 create hex file。如果要修改编程 ：重新编译-下载/编程-单片机重…...

编程日记 2025/2/4 19:18:05

WPF进阶 | WPF 动画特效揭秘：实现炫酷的界面交互效果

WPF进阶 | WPF 动画特效揭秘：实现炫酷的界面交互效果前言一、WPF 动画基础概念1.1 什么是 WPF 动画1.2 动画的基本类型1.3 动画的核心元素二、线性动画详解2.1 DoubleAnimation 的使用2.2 ColorAnimation 实现颜色渐变三、关键帧动画深入3.1 DoubleAnimationUsin…...

编程日记 2025/2/4 19:08:54

分页按钮功能

前言在前端开发中，分页功能是一个常见的需求，特别是当需要展示大量数据时，它能有效提升用户体验。该文章结合运用了HTML，CSS，JS实现网页的分页按钮功能，并且可以选择每页显示的条数试试更新总页数及显示当…...

编程日记 2025/2/4 19:07:53

数据分析系列--⑦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 结果汇总 …...

编程日记 2025/2/4 19:06:52

集合通讯概览

集合通信概览 （1）通信的算法是根据通讯的链路组成的 （2）因为通信链路跟硬件强相关，所以每个CCL的库都不一样芯片与芯片、不同U之间是怎么通信的多卡训练：多维并行（xxx并行在上一期已经讲述…...

编程日记 2025/2/4 18:56:41

YimMenu终极指南：5大核心功能打造安全的GTA5增强体验

YimMenu终极指南：5大核心功能打造安全的GTA5增强体验【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMe…...

编程新知 2026/3/30 4:05:22

企业级前端基建：如何将离线npm包（tgz）安全迁移到Nexus 3私库？

企业级前端基建：如何将离线npm包（tgz）安全迁移到Nexus 3私库？ 当企业面临安全合规审计或网络隔离需求时，如何将分散在各处的npm离线包（tgz格式）安全、高效地迁移至Nexus私有仓库，成为…...

编程新知 2026/3/30 3:43:06

智能预处理预览功能详解：Anything to RealCharacters 2.5D引擎稳定性保障机制

智能预处理预览功能详解：Anything to RealCharacters 2.5D引擎稳定性保障机制 1. 项目概述 Anything to RealCharacters 2.5D转真人引擎是一款专为RTX 4090显卡优化的图像转换系统，能够将卡通、二次元、2.5D风格的图像高质量转换为写实真人照片。该系统…...

编程新知 2026/3/30 3:26:51