DeepSeek最新玩法,5分钟搭建html实用工具

大家好,我是程序员小灰。

说起AI编程,早已不是一个新鲜的概念。

早在2023年初,小灰就曾经尝试利用GPT-4帮我生成Python小游戏的代码。

到了2024年,随着Cursor等AI编程工具的兴起,AI编程越来越流行。许多人甚至利用AI开发出了商业化的应用,赚取了第一桶金。

不过,对于并不熟悉编程的普通人而言,AI编程却普遍存在一个绕不过去的问题:繁琐的配置问题。

我们虽然可以用AI模型帮我们快速生成代码,却无法直接执行这段代码,必须在本地安装自己的IDE,配置环境变量,创建项目和文件,再把代码粘贴到本地,执行代码。

Cursor这样的工具虽然解决了代码复制粘贴的问题,但环境配置的问题仍然难以快速解决,从而劝退绝大多数想要尝试AI编程的普通人。

怎么解决这个问题呢?我们可以尝试让AI模型直接为我们生成html代码。

目前为止,DeepSeek-V3、Claude 3.5等AI模型都支持在对话页面直接执行html代码,非常适合小白上手AI编程。

虽然这种方式无法构建复杂的应用,但是制作一些小工具、小游戏却是绰绰有余的。

今天小灰来演示两个例子,让我们看看如何用DeepSeek快速生成开箱即用的html项目。

例子1:生成“吃豆人”游戏代码

“吃豆人”是一款非常古老的游戏,可以追溯到上世纪80年代的。

我们让DeepSeek也复刻一款吃豆人游戏。提示词非常简单,只需要一句话即可:

生成吃豆人游戏的代码,用html实现。

经过了大约5分钟时间,DeepSeek回复了完整的HTML代码,由于代码太长,我们就不全部展示了:

在代码的末尾,我们可以直接点击右下角的执行按钮来运行这段html代码:

运行效果如下:

尽管游戏中有些小bug,但整体上已经很不错了。

我们不仅可以再DeepSeek页面上执行,也可以把代码保存在本地执行,只要把代码粘贴到本地文本文件当中,再把文件扩展名改为.html即可。

例子2:生成数据结构与算法的可视化演示工具

对于新人程序员来说,数据结构与算法的学习是一个分水岭,许多人觉得算法非常抽象难懂。

这时候,如果有一个可视化的工具,可以把复杂的算法工作原理用可视化的方式生动展示给大家,一定会对广大新人程序员有所帮助。

因此,我们可以让DeepSeek制作一系列数据结构与算法的可视化演示工具,其中的每一个小工具可以独立演示一种算法或数据结构。

算法与数据结构的种类非常多,我们这里尝试生成两个小工具,一个是选择排序算法的演示工具,一个是二叉查找树的演示工具。

其中选择排序算法演示工具的提示词如下:

用技术动画的形式演示选择排序的原理,以html格式输出。

直接在DeepSeek页面执行项目,效果如下:

在这个可视化演示工具当中,支持随机生成新数组,自动演示排序过程,还支持一步一步手动操作演示进程,非常方便直观。

我们再来看一看二叉查找树的演示工具,提示词如下:

用技术动画的形式演示二叉查找树的原理,以html格式输出。

直接在DeepSeek页面执行项目,效果如下:

在本工具当中,用户可以一个一个节点来构建自己想要的二叉查找树,每次插入新的节点都会详细展示插入过程,而且还可以演示二叉树的前序、中序、后序遍历过程,非常灵活。

好了,关于如何利用DeepSeek快速搭建html项目、制作开箱即用的游戏和工具,我们就介绍到这里。

欢迎大家多多尝试DeepSeek这款优秀的国产大模型,挖掘出更多有趣又有用的玩法。

相关文章

CSS基础(CSS基础知识点总结)

CSS介绍CSS(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种语言CSS的作用美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式控制页面布局, 比如: 设置浮...

CSS选择器瘦身记::is()和:where()如何让你的代码少掉一半?

当CSS选择器开始"减肥"你是否也曾面对这样的CSS代码发愁?header p:hover, main p:hover, footer p:hover { color: red;...

css篇一 什么是css、css的作用以及css的基本格式

一、什么是csscss的英文全称是:Cascading Style Sheets,翻译过来叫:层叠样式表。这其中有两个关键字,一个是层叠一个是样式。样式指的是给html调整样式层叠指的是可以叠加调整,...

你不知道的css小技巧(你不知道的css小技巧在哪)

提示:点击上方"蓝色字体"↑ 可订阅!关于我们 51RGB官方微信CSS中的级联(cascade)在同一时间可谓是幸福的,也可以说是痛苦不堪的。通常能工作得非常好,但有问题的时候,也让人们都很激动,甚...

css入门(CSS入门教程)

文章目录CSS入门一、CSS概述1、概述2、CSS的作用3、初体验4、CSS基础语法4、HTML引入CSS二、选择器 1、基本选择器2、扩展选择器3、超链接选择器三、样式权重问题1、权重计算规则2、权...

HTML+CSS基础训练之实现一个“真实”的网页

一、任务介绍:高保真的完成下图布局:二、分析布局首先要分析一下各个模块的布局我们依旧使用的盒子模型。首先先分为两个大盒子(红色边框)header 盒子和 content 盒子。其中content中相对...