用AI写游戏1——js实现贪吃蛇
使用模型通义千问
提示词：
用js html css 做一个贪吃蛇的动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Snake Game</title><link rel="stylesheet" href="css/test023.css">
</head>
<body>
<div id="gameBoard"></div>
<script src="js/test023.js"></script>
</body>
</html>
body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;margin: 0;
}#gameBoard {display: grid;width: 400px;height: 400px;grid-template-columns: repeat(20, 1fr);grid-template-rows: repeat(20, 1fr);border: 5px solid #333;
}.cell {width: 100%;height: 100%;background-color: #ccc;border: 1px solid #ddd;
}.snake {background-color: #28a745;
}.food {background-color: #dc3545;
}
const board = document.getElementById('gameBoard');
const rows = 20, cols = 20;
let snake = [{ x: 10, y: 10 }];
let direction = { x: 0, y: -1 };
let food = createFood();
let gameOver = false;function createBoard() {for (let row = 0; row < rows; row++) {for (let col = 0; col < cols; col++) {const cell = document.createElement('div');cell.classList.add('cell');board.appendChild(cell);}}
}function updateBoard() {const cells = document.querySelectorAll('.cell');cells.forEach(cell => cell.className = 'cell');snake.forEach(segment => {const index = segment.y * cols + segment.x;cells[index].classList.add('snake');});const foodIndex = food.y * cols + food.x;cells[foodIndex].classList.add('food');
}function createFood() {let newFood;do {newFood = { x: Math.floor(Math.random() * cols), y: Math.floor(Math.random() * rows) };} while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));return newFood;
}function moveSnake() {const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };if (head.x < 0 || head.x >= cols || head.y < 0 || head.y >= rows || snake.some(segment => segment.x === head.x && segment.y === head.y)) {gameOver = true;return;}snake.unshift(head);if (head.x === food.x && head.y === food.y) {food = createFood();} else {snake.pop();}
}document.addEventListener('keydown', event => {switch (event.key) {case 'ArrowUp':if (direction.y === 0) direction = { x: 0, y: -1 };break;case 'ArrowDown':if (direction.y === 0) direction = { x: 0, y: 1 };break;case 'ArrowLeft':if (direction.x === 0) direction = { x: -1, y: 0 };break;case 'ArrowRight':if (direction.x === 0) direction = { x: 1, y: 0 };break;}
});createBoard();const gameLoop = setInterval(() => {if (gameOver) {clearInterval(gameLoop);alert('Game Over!');return;}moveSnake();updateBoard();
}, 100);
这段代码创建了一个基础的贪吃蛇游戏，包括了游戏区域的渲染、蛇的移动与增长、食物的生成及蛇吃到食物后的增长逻辑。通过监听键盘事件改变蛇的方向，并使用setInterval函数控制游戏循环。请注意，这只是一个基础示例，实际开发中可能需要添加更多功能如分数统计、游戏重置等。
实现效果
相关文章：
用AI写游戏1——js实现贪吃蛇
使用模型通义千问 提示词： 用js html css 做一个贪吃蛇的动画 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Snake Game</title><link rel"stylesheet" href"c…...
星闪开发入门级教程之安装编译器与小项目烧录
系列文章目录 星闪开发入门级教程 好久不见，已经好几年没有发文章了，星闪-作为中国原生的新一代近距离无线联接技术品牌。我想着写点东西。为了适合新手，绝对小白文。 文章目录 系列文章目录前言一、Hispark Studio1.安装Hispark Studio2.安…...
java求职学习day32
JavaScript 详解 课程目标： 1 、 JavaScript 介绍 2 、 HTML 和 JavaScript 结合方式 3 、 JavaScript 的使用 4 、 DOM 操作 5 、 BOM 操作 1. JavaScript介绍 (1)虽然是 java 作为前缀，但 java 和 javascript 的关系，就像老婆和老婆…...
【Markdown语法】锚点机制：跳转任意位置
最近写文章时，发现有一个需求：想要实现一种点击跳转到文档中任意位置的功能，这就是锚点机制，就像游戏中的传送锚点，于是写成文章记录一下使用方式。 本文将详细介绍如何使用Markdown创建文档内部跳转（即锚…...
Docker安装pypiserver私服
Docker安装pypiserver私服 1 简介 Python开源包管理工具有pypiserver、devpi和Nexus等，pypiserver安装部署比较简单，性能也不错。 搭建pypiserver私服，可以自己构建镜像，也可以使用官网的docker镜像。 # Github地址 https://g…...
基于微信小程序的居住证申报系统设计与实现（LW+源码+讲解）
专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。 技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容：…...
网站改HTTPS方法
默认的网站建设好后打开的样子那看起来像是钓鱼网站，现在的浏览器特别只能，就是你新买来的电脑默认的浏览器同样也会出现这样“不安全”提示。 传输协议启动了向全球用户安全传输网页内容的流程。然而，随着HTTPS的推出，传输协议通…...
什么是三层交换技术？与二层有什么区别？
什么是三层交换技术？让你的网络飞起来！ 一. 什么是三层交换技术？二. 工作原理三. 优点四. 应用场景五. 总结 前言 点个免费的赞和关注，有错误的地方请指出，看个人主页有惊喜。 作者：神的孩子都在歌唱 大家好…...
极客说｜利用 Azure AI Agent Service 创建自定义 VS Code Chat participant
作者：卢建晖 - 微软高级云技术布道师 「极客说」 是一档专注 AI 时代开发者分享的专栏，我们邀请来自微软以及技术社区专家，带来最前沿的技术干货与实践经验。在这里，您将看到深度教程、最佳实践和创新解决方案。关注「极客说」&a…...
)
Rust语言进阶之标准输入: stdin用法实例(一百零五)
简介： CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布：《Android系统多媒体进阶实战》🚀 优质专栏： Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏： 多媒体系统工程师系列【…...
力扣刷题思路
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言递归70. 爬楼梯112. 路径总和509. 斐波那契数 分治169. 多数元素240.搜索二维矩阵 II --- 二分查找 单调栈 ---「找最近一个比当前值大/小」的问题739. 每日温度…...
MUX-VLAN实验
一、搭建实验拓扑图 二、基本设备配置 设备接口IP地址子网掩码网关PC1E0/0/110.0.1.1255.255.255.0N/APC2E0/0/110.0.1.2255.255.255.0N/APC3E0/0/110.0.1.3255.255.255.0N/APC4E0/0/110.0.1.4255.255.255.0N/APC5E0/0/110.0.1.6255.255.255.0N/Aserver-1E0/0/110.0.1.5255.2…...
音频进阶学习十二——Z变换
文章目录 前言一、Z变换1.Z变换的作用2.Z变换公式3.Z的状态表示1） r 1 r1 r12） 0 < r < 1 0<r<1 0<r<13） r > 1 r>1 r>1 4.关于Z的解释 二、收敛域1.收敛域的定义2.收敛域的表示方式3.ROC的分析1）当 …...
理解推理型大语言模型
构建和改进推理模型的方法与策略 本文描述了构建推理模型的四种主要方法，以及我们如何增强大型语言模型（LLM）的推理能力。我希望这能为你提供有价值的见解，并帮助你了解这一领域快速发展的文献和热潮。 在2024年，LLM…...
【Brinson 绩效归因模型】
Brinson 绩效归因模型 1、前言2、Brinson模型介绍2.1 归因方式2.1.1 BHB 超额收益分解方案2.1.2 BF 超额收益分解方案 2.2 多期 Brinson 模型 1、前言 如此之多的基金，收益率各有不同，即使同等收益率的基金也各有不同的成因。在这种形势下，广…...
如何轻松将Matlab生成的图表嵌入PowerPoint演示文稿
文章目录 Matlab将生成的图添加PPT中一、Matlab脚本1.添加图片函数2.使用示例 总结 Matlab将生成的图添加PPT中 在许多科学、工程和商业领域，Matlab作为一款强大的数值计算和可视化工具，被广泛应用于数据分析和模型构建。然而，当涉及到分享这…...
)
组合(力扣77)
从这道题开始，我们正式进入回溯算法的学习。之前在二叉树中只是接触到了一丢丢，而这里我们将使用回溯算法解决很多经典问题。 那么这道题是如何使用回溯算法的呢？在讲回溯之前，先说明一下此题是如何递归的。毕竟回溯递归不分家&a…...
2.7学习
crypto buu-还原大师 仔细阅读题目，这里有一段字符串，但是其中有四个大写字母被替换成了‘？’，那么我们写脚本：首先将四个问号均换成26个大写字母并且组成不同的组合， 所以有四个循环让四个问号都遍历26个…...
)
[开源/教程]使用Ollama+ESP32实现本地对话助手(可接入deepseek等模型)
[开源/视频教程]使用OllamaESP32实现本地对话助手(可接入deepseek等模型) 简介 使用ollama实现本地模型的定制, 可以做到数据不泄露以及绕开检测的效果, 之后使用嘉立创的esp32开发板实现简单的对话助手 同时接入本文档, 可以直接使用AI对话的方式进行文档处理 XuSenfeng/ai…...
Swagger2 自定义排序
分享一下SpringSwagger2在线文档自定义排序的代码。 这里参考swagger2 接口排序_swagger接口排序-CSDN博客提供的思路，并在此基础上做了优化。 1、引用pom信息 <!--swagger依赖(pojo注解)--><dependency><groupId>io.swagger</groupId>&l…...
sentinel的限流原理
Sentinel 的限流原理基于 流量统计 和 流量控制策略，通过动态规则对系统资源进行保护。其核心设计包括以下几个关键点： 流量统计模型：滑动时间窗口 Sentinel 使用 滑动时间窗口算法 统计单位时间内的请求量，相比传统的固定时间窗…...
Mac 部署Ollama + OpenWebUI完全指南
文章目录 💻 环境说明🛠️ Ollama安装配置1. 安装[Ollama](https://github.com/ollama/ollama)2. 启动Ollama3. 模型存储位置4. 配置 Ollama 🌐 OpenWebUI部署1. 安装Docker2. 部署[OpenWebUI](https://www.openwebui.com/)（可视化…...
C/C++ 面试智能指针
说下你对智能指针的理解 回答1: 因为C使用内存的时候很容易出现野指针、悬空指针、内存泄露的问题。所以C11引入了智能指针来管理内存。有四种： auto_ptr：已经不用了unique_ptr：独占式指针，同一时刻只能有一个指针指向同一个对…...
Halcon缓存？内存泄漏？
目录 1、前言 2、图片缓存 3、全局内存缓存 4、临时内存缓存 5、处理 HALCON 中的疑似内存泄漏 6、其他 1、前言 除⾮必要，否则不建议修改 HALCON 自带的缓存设置。 2、图片缓存 图像通常需要大量内存，而分配大块内存的过程较慢。因此，当释放图像时，HALCON并…...
升级 SpringBoot3 全项目讲解 — 周边店铺展示功能如何实现
学会这款 🔥全新设计的 Java 脚手架 ，从此面试不再怕！ 1. 升级 Spring Boot 到 3.x 在升级 Spring Boot 之前，我们需要确保项目的依赖和配置与新版本兼容。以下是升级的主要步骤： 1.1 更新 pom.xml 文件 首先&#…...
系统学习笔记【并利用腾讯云的CODING和Windows上的Git工具来实操】)
Git(分布式版本控制系统)系统学习笔记【并利用腾讯云的CODING和Windows上的Git工具来实操】
Git的概要介绍 1️⃣ Git 是什么？ Git 是一个 分布式版本控制系统（DVCS），用于跟踪代码的变更、协作开发和管理项目历史。 由 Linus Torvalds（Linux 之父）在 2005 年开发，主要用于 代码管理。…...
光学和光子学模拟工具在 AR/VR 中的作用
AR/VR 中的光学和光子学 增强现实 (AR) 和虚拟现实 (VR) 站在数字进化的前沿。光学和光子学这一复杂的科学深入研究了光的产生、检测和操控，在这一转变中发挥着至关重要的作用。 图 1 (a) 展示了 AR 系统的设计，强调了光学的关键作用。该图描绘了光的旅…...
大模型产品Deepseek（四）、本地安装部署（Ollama方式）
Ollama与DeepSeek的本地安装与部署教程（Windows/MacOS） 在许多AI应用场景中，您可能希望将智能模型本地化，以便更高效地处理数据并减少对外部云服务的依赖。本文将介绍如何在Windows和macOS上直接安装和配置Ollama，以及如何基于Ollama平台部署DeepSeek模型并进行本地交互。…...
visual studio安装
一、下载Visual Studio 访问Visual Studio官方网站。下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux 在主页上找到并点击“下载 Visual Studio”按钮。 选择适合需求的版本，例如“Visual Studio Community”（免费版本）&#x…...
AI大模型——DeepSeek模型部署实战
摘要 文章主要介绍了DeepSeek大模型的本地部署方法、使用方式以及API接入相关内容。首先指出可通过下载Ollama来部署DeepSeek-R1模型，并给出了模型不同参数版本及存储信息。接着说明了如何通过Chatbox官网下载并接入DeepSeek API，以及如何接入本地部署模…...
音视频的文件封装——AVI、MP4、MKV
3.MKV (Matroska Video File) Matroska （俄语： матроска ）是一种多媒体封装格式，可把多种不同编码的影像、不同格式的音频、不同语言的字幕封装到一个文件内。也是一种开放源代码的多媒体封装格式。 Matroska 支持多种文件…...
讯飞绘镜（ai生成视频）技术浅析（五）：视频生成
讯飞绘镜（AI生成视频）是一种先进的AI视频生成技术，能够将静态的分镜画面转换为动态视频，并使画面中的元素按照一定的逻辑和动作进行动态展示。 一、讯飞绘镜视频生成技术概述 讯飞绘镜的视频生成技术主要包含以下几个核心模块： 1.视频生成模型：包括生成对抗网络（GAN）…...
【FPGA】 MIPS 12条整数指令 【3】
实现乘除 修改框架 EX：实现带符号乘除法和无符号乘除法 HiLo寄存器：用于存放乘法和除法的运算结果。Hi、Lo为32bit寄存器。电路描述与实现RegFile思想一致 仿真 代码 DataMem.v include "define.v"; module DataMem(input wire clk,input…...
【补充】RustDesk一键部署及账号登录配置
前言 之前分享的配置rustdesk的帖子只是搭建了一个简易服务器，仅能实现简单的远程桌面功能。在后续的使用中切换设备使用时无法看到之前连接的设备，必须知道每个设备的id号，才能在新设备上连接。数据无法在设备间迁移，感觉很麻烦…...
2025.2.6 数模AI智能体大更新，更专业的比赛辅导，同提示词效果优于gpt-o1/o3mini、deepseek-r1满血
本次更新重新梳理了回复逻辑规则，无任何工作流，一共3.2k字细节描述。具体效果可以看视频，同时也比对了gpt-o1、gpt-o3mini、deepseek-r1-67BI，从数学建模题目解答上来看，目前我的数模AI智能体具有明显优势。 AI智能体优…...
昇腾，Ascend，NPU，mindie，镜像，部署vllm：第3篇，补档，没事可以看看这个readme
文章目录 前言文件位置已改变atb model和mindie的关系前言 在之前的版本中，我们提到了一个帮助文档（Readme），这个文档告诉我们，当时的mindie版本不支持0.5b版本的通义千问2.5 我现在就很好奇，新版的mindie，是否支持0.5b的版本呢？ 文件位置已改变 之前的文件位置： …...
PbootCMS 修改跳转提示，修改笑脸时间
在使用时，每次都提示这个： 修改方法： 修改跳转时间：找到 handle.php 文件编辑 ，调整 setTimeout 函数的时间参数。 修改提示文字：编辑 handle.php 文件，修改提示文字的内容。 隐藏提示页面&am…...
Python办公笔记——将csv文件转Json
目录 专栏导读1、背景2、库的安装3、代码1—自定义表头4、代码2—全字段5、代码3—全字段总结 专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手 🏳️🌈 博客主页：请点击——> 一晌…...
25/2/7 ＜机器人基础＞雅可比矩阵计算 雅可比伪逆
雅可比矩阵计算 雅可比矩阵的定义 假设我们有一个简单的两个关节的平面机器人臂，其末端执行器的位置可以表示为： 其中： L1 和 L2 是机器人臂的长度。θ1 和 θ2是关节的角度。 计算雅可比矩阵 雅可比矩阵 JJ 的定义是将关节速度与末…...
流媒体缓存管理策略
缓存管理策略是指为了优化性能、资源使用和用户体验而对缓存数据进行管理的方法和规则。以下是一些常见的缓存管理策略： 1. LRU（Least Recently Used，最近最少使用） 原理：当缓存满了，需要腾出空间时&…...
【Sql Server】sql server 2019设置远程访问，外网服务器需要设置好安全组入方向规则
大家好，我是，欢迎来到《小5讲堂》。 这是《Sql Server》系列文章，每篇文章将以博主理解的角度展开讲解。 温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！ 目录 前言1、无法链接2、数…...
阿里云 | DeepSeek人工智能大模型安装部署
ModelScope是阿里云人工智能大模型开源社区 ModelScope网络链接地址 https://www.modelscope.cn DeepSeek模型库网络链接地址 https://www.modelscope.cn/organization/deepseek-ai 如上所示，在阿里云人工智能大模型开源社区ModelScope中，使用阿里云…...
Spring Test 教程大纲
Spring Test 教程大纲 目标：基于 JUnit 5，系统学习 Spring Test 的核心原理、注解使用、测试框架集成及扩展开发。 第 1 章：Spring Test 简介与核心原理 1.1 Spring Test 的作用与优势 简化 Spring 应用的单元测试与集成测试。核心目标&am…...
MySQL数据库基础（创建/删除 数据库/表）
一、数据库的操作 1.1 显示当前数据库 语法：show databases； <1>show 是一个关键字，表示要执行的操作类型 <2>databases 是复数，表示显示所有数据库 上面的数据库中，除了java113，其它的数据库…...
Llama最新开源大模型Llama3.1
Meta公司于2024年7月23日发布了最新的开源大模型Llama 3.1，这是其在大语言模型领域的重要进展。以下是关于Llama 3.1的详细介绍： 参数规模与训练数据 Llama 3.1拥有4050亿（405B）参数，是目前开源领域中参数规模最大的…...
PHP 面向对象编程详解
PHP 面向对象编程详解 引言 PHP 作为一种广泛使用的服务器端脚本语言，自诞生以来就以其简洁、易学、高效的特点受到开发者的喜爱。随着互联网技术的不断发展，PHP 也在不断地进化，其中面向对象编程（OOP）已经成为 PHP …...
YOLOv11-ultralytics-8.3.67部分代码阅读笔记-files.py
files.py ultralytics\utils\files.py 目录 files.py 1.所需的库和模块 2.class WorkingDirectory(contextlib.ContextDecorator): 3.def spaces_in_path(path): 4.def increment_path(path, exist_okFalse, sep"", mkdirFalse): 5.def file_age(path__fi…...
安卓开发，打开PDF文件
1、把PDF文件复制到raw目录下 （1）新建一个Android Resource Directory (2)Resource type 改成 raw (3) 把PDF文件复制到raw目录下 2、activity_main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayoutxmlns:and…...
标准模版——添加蜂鸣器及继电器功能模块
一、peripheral.h代码 #include "STC15F2K60S2.H"void Set_Peripheral(unsigned char Buzzer_Status,unsigned char Relay_Status); 二、peripheral.c代码 #include "peripheral.h"void Set_Peripheral(unsigned char Buzzer_Status,unsigned char Rela…...
嵌入式工程师面试经验分享与案例解析
嵌入式工程师岗位受到众多求职者的关注。面试流程严格，技术要求全面，涵盖C/C编程、数据结构与算法、操作系统、嵌入式系统开发、硬件驱动等多个方向。本文将结合真实案例，深入剖析嵌入式工程师的面试流程、常见问题及应对策略，帮助…...