常平网站建设/百度商品推广平台
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并行在上一期已经讲述…...
【FreeRTOS 教程 八】直达任务通知
目录 一、FreeRTOS 直达任务通知： （1）直达任务通知基本介绍： （2）更新目标通知的值： （3）性能优势和使用限制： 二、直达任务通知 API： &#…...
Ubuntu 18.04安装Emacs 26.2问题解决
个人博客地址：Ubuntu 18.04安装Emacs 26.2问题解决 | 一张假钞的真实世界 no X development libraries were found checking for X... no checking for X... true configure: error: You seem to be running X, but no X development libraries were found. You …...
nodejs：js-mdict 的下载、安装、测试、build
js-mdict 项目的目录结构：js-mdict 项目教程 js-mdict 下载地址: js-mdict-master.zip 先解压到 D:\Source\ js-mdict 6.0.2 用了 ts (TypeScript) 和 Jest，增加了应用开发的难度，因为先要了解 ts 和 Jest。 参阅：测试与开发&a…...
CSS关系选择器详解
CSS关系选择器详解 学习前提什么是关系选择器？后代选择器（Descendant Combinator）语法示例注意事项 子代选择器（Child Combinator）语法示例注意事项 邻接兄弟选择器（Adjacent Sibling Combinator࿰…...
Python在线编辑器
from flask import Flask, render_template, request, jsonify import sys from io import StringIO import contextlib import subprocess import importlib import threading import time import ast import reapp Flask(__name__)RESTRICTED_PACKAGES {tkinter: 抱歉&…...
蓝桥杯备考：高精度算法之除法
我们除法的高精度其实也不完全是高精度，而是一个高精度作被除数除以一个低精度 模拟我们的小学除法 由于题目中我们的除数最大是1e9，当它真正是1e9的时候，t是有可能超过1e9的，所以要用long long...
笔试-业务逻辑4
应用 小明在玩一个数字加减游戏，输入4个正整数：s、t、a、b，其中s>1，b<105，a!b。只使用加法或者减法，使得st。 每回合，小明用当前的数字，加上或减去一个数字；目前有…...
《Linux服务与安全管理》| 数据库服务器安装和配置
《Linux服务与安全管理》| 数据库服务器安装和配置 目录 《Linux服务与安全管理》| 数据库服务器安装和配置 任务一： 安装PostgreSQL数据库，设置远程登录，客户端可以成功登录并操作数据库。 任务二： 安装MySQL数据库…...
麦芯 (MachCore) 应用开发教程 6：一台设备中多台电脑主从机的设置
麦芯是构建在windows系统上的设备应用操作系统，利用该系统可以快速高效的开发一款设备专用软件。希望进一步了解请email: acloud163.com 黄国强 2025/02/03 在麦芯（MachCore）应用开发过程中，多机协同工作的场景十分常见…...
RAG 与历史信息相结合
初始化模型 # Step 4. 初始化模型, 该行初始化与 智谱 的 GLM - 4 模型进行连接，将其设置为处理和生成响应。 chat ChatZhipuAI(model"glm-4",temperature0.8, ) 此提示告诉模型接收聊天历史记录和用户的最新问题，然后重新表述问题&#x…...