首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

GPT-4写代码,DALL·E 3+MJ搞定画面,AI版「愤怒的南瓜」来袭

完整代码可见:https://bestaiprompts.art/angry-pumpkins/sketch.js 作者在游戏中加入了很多细节,比如不同的粒子效果、不同种类的物体。...他使用了一些小技巧和 prompt,首先从简单的事情开始做起,比如「我能不能使用 matter.js 和 p5.js 创建一个愤怒的小鸟风格的游戏?...只需要用鼠标控制,设定好发射角度和力度,然后撞击一堆由 2D 物理效果堆叠的箱子。」 接着持续添加更多的元素和功能,遇到问题详细说明错误的地方,让程序自我修正。...比如「现在我问你,你了解愤怒的小鸟游戏中玩家在屏幕上滑动手指来发射小鸟吗?把这种方式添加到要创建的游戏里,不过要改成用鼠标控制。」...再比如「把怪物设计成圆形」、「我想用粒子效果制作一个火炬,是否可以通过 p5.js 来实现?」如此种种,不断与 GPT-4 进行交互试验,最终有了现在的游戏效果。

39020
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    p5.js画布操作实战:创建,绑定指定元素,动态调整大小,隐藏滚动条,删除画布

    theme: smarblue 文章简介 之前在 《p5.js 光速入门》 里粗略讲过一下如何使用 p5.js 创建画布。 这次要介绍几个 p5.js 提供的画布相关的方法。 创建画布时的相关配置。...创建画布 在 p5.js 里创建画布的方法叫 createCanvas,但其实如果你不使用该方法一样可以创建画布。...如果你使用了p5.js 的 setup() 或者 draw() 之类的生命周期函数,它们也会默认在页面上创建一个画布。...让画布绑定指定元素 使用前面提到的方法创建画布,p5.js 默认会帮我们把画布添加到 标签的最后面。如下图所示。...这种情况就需要使用 noCanvas() 方法。 这个方法在需要时直接调用即可,我就不再录屏展示了。 noCanvas()

    53741

    p5.js 变换操作

    p5.js 同样具备变换功能,而且还封装了很多方便的函数去实现变换功能。本文就简单介绍一下 p5.js 的变换操作方法。 为了方便讲解(我懒),本文使用 CDN 的方式引入 p5.js。...如果你在项目中使用 npm 的方式安装 p5.js ,可以参考 《p5.js 使用npm安装p5.js后如何使用?》 的用法。...// 省略部分代码 translate(createVector(60, 60)) 在画布只有1个元素的情况下,也可以使用 translate() 的方式实现 《p5.js 使用npm安装p5.js后如何使用...旋转使用的方法名叫 rotate(),语法如下: rotate(angle) angle 是旋转弧度。注意,是弧度! 但对于受过九年义务教育的我来说,用角度去计算会更加直观。...transform() 方法更好用的话,可以使用 p5.js 提供的 applyMatrix() 方法。

    1.8K10

    p5.js 视频播放指南

    ---- theme: smartblue 本文简介 在刚接触 p5.js 时我以为这只是一个艺术方向的 canvas 库,没想到它还支持视频文件和视频流的播放。...本文简单讲讲如何使用 P5.js 播放视频。 播放视频文件 p5.js 除了可以使用 video 元素播放视频外,还支持使用 image 控件播放视频。...preload() 是 p5.js 提供的一个生命周期,我们通常会将“加载静态资源”这个步骤放在 preload() 里执行。在 《p5.js光速入门》的图片 章节里介绍过。...playing; } 上面的代码中,我在 setup() 里使用了 video.hide() 方法将 createVideo() 创建出来的 元素隐藏起来,因为这次我们需要将视频渲染到画布中...接着我们在 draw() 里用 image 不断刷新视频,所以上面这样写是对的。 其他地方没变化。 接入摄像头 如果你的设备有摄像头,p5.js 是支持调用摄像头并将内容展示在画布上的。

    33750

    p5.js 开发点彩画派的绘画工具

    本文简介 这几天在整理书柜时看到这套书,看到梵高,想起他的点彩画。 想到点彩画派,不得不提的一个画家叫乔治·皮埃尔·秀拉。据说梵高也模仿过他的画作。...然后我又继续想啊想,想到我们用 canvas 好像也能做出一款点彩画的绘图工具,但用原生的方式写是不可能的,因为我懒。思前想后,还是觉得用 p5.js 写会好点,毕竟这个库也是个比较知名的艺术库。...主要工作就是以上几步,而且这几步都用了 p5.js 提供的方法去实现。 主要用到的生命周期有 setup 和 draw,这部分我在 p5.js 光速入门 里有讲到。...绘制过程的代码写在 draw 周期里,使用了 circle() 方法创建圆形,圆形的坐标就是鼠标绘画时的当前坐标,圆形的尺寸是取滑块的值,圆形的颜色取了颜色选择器的值。...p5.js,用法上和 npm 下载的 p5.js 是有一丢丢区别的,想了解这方面知识可以看看 《p5.js 使用npm安装p5.js后如何使用?》

    36231

    Steam公布2018上半年VR畅销榜,4款国产游戏登榜

    《GORN》 《GORN》是一款由Free Lives,Broforce和Genital Jousting共同制作的VR动作游戏,拥有独特的完全由物理驱动的战斗引擎。...目前在VR游戏中,格斗类游戏还不是很多,像《GORN》这样直接暴力的类型更是相当少数,不少玩家都表示因为太过投入而砸坏手柄,所以在游戏开始前一定要保证足够的空间。...在游戏中,当玩家静止不动时,就会进入子弹时间,此时玩家可以看到所有敌人的子弹轨迹,从而决定接下来的行动路线。 《Orbus VR》 ?...玩家可以通过收集掉落的金币、经验来点亮不同的天赋值,增强自己在游戏中的实力。 Steam平台VR月活跃用户情况分析 当然了,这么多VR畅销游戏的出现,对VR用户的数量又有什么影响呢?...在上述的VR畅销游戏中,射击类游戏占比是最大的,但这些射击类游戏似乎都千篇一律,没有多少创新。厌倦了射击类游戏的玩家,不妨来体验一下这款小编最钟爱的音游——《Beat Saber》。

    75530

    在浏览器中使用TensorFlow.js和Python构建机器学习模型(附代码)

    TensorFlow.js的两个组件——Core API和Layer API。 了解如何构建一个很棒的使用Tensorflow.js对网络摄像头中的图像进行分类的模型。...所以,当我第一次遇到TensorFlow.js(以前是deeplearn.js)时,我的心都要炸开了。在浏览器中构建机器学习模型?使用JavaScript?听起来好得令人难以置信!...相反,我将简单地向你展示如果不使用TensorFlow.js将会错过什么。那么,让我们在5分钟内构建一个应用程序,来使用你的网络摄像头对图像进行分类。没错——我们将直接进入代码部分!...现在,让我们看看TensorFlow.js提供的强大功能,以及如何利用它们在浏览器中部署机器学习模型。...我们将使用ml5.js库来使用PoseNet。ml5.js是一个基于TensorFlow.js和p5.js的库。p5.js是另一个库可以使你更容易在浏览器中访问网络摄像头。

    2.2K00

    p5.js 使用npm安装p5.js后如何使用?

    ---- 本文简介 点赞 + 关注 + 收藏 = 学会了 在 《p5.js 光速入门》 中都是使用 CDN 的方式去使用 p5.js 的,不太符合当下的开发习惯。...不管是使用 Vue 还是 React,我们日常项目大部分应该都是使用脚手架的方式进行开发了,按照 《p5.js 光速入门》 的方式在 module 模式下使用 p5.js ,如果不出意外的话肯定会有意外...所以,本文会把 《p5.js 光速入门》 缺省的 module 开发模式补全。 环境搭建 为了方便,我将使用 vite 搭建一个原生项目。...p5.js 版本,在写本文时所用的是 v1.5.0 此时如果你打算像 《p5.js 光速入门》 那样直接使用 setup() 创建画布是不可能的了,因为在 module 模式下引入的 p5.js 的...在 module 模式下开发,可以使用 import p5 from 'p5' 的方式引入 p5.js。 使用 new p5(sketch) 的方式创建 p5 程序。

    2.7K10

    10月13日,我们一起搞事情!

    ; 《王者荣耀》、《天龙八部》两款爆款手游的制作者亲临现场,讲述他们是如何让 LBS 发挥最大价值; 当面对决技术大咖,诸多难题为你解答,现场更有诸多惊喜等你来拿。...分享主题:连接游戏与真实世界 — POI 在 LBS 游戏的应用 主题简介:腾讯《一起来捉妖》即将上线,在游戏中,我们将现实世界的地图数据带入了游戏中。里面的祈愿鼓和擂台是如何产生的?...如何利用地图能力在游戏中布置怪物的属性?如何保障游戏游玩区域的安全?本次分享将介绍游戏数据背后的技术和未来潜在的场景。 ?...分享主题:腾讯位置服务在《天龙八部》手游中的应用 主题简介:《天龙八部》手游与 LBS 有着深度的结合,想知道有哪些玩法使用了腾讯位置服务的功能吗?开发过程中有哪些与位置服务相关的坑需要注意呢?...如在报名中遇到任何问题,请添加微信小助手解决(ID:geekbang111)。 ? 点击"阅读原文"

    1K10

    p5.js 到底怎么设置背景图?

    ---- theme: smartblue 本文简介 在 《p5.js 光速入门》 里我们学过加载图片元素,学过过背景色的用法,但当时没提到背景图要怎么使用。...本文就把背景图这部分内容补充完整,并且会提到在 p5.js 里使用背景图的一些注意点。 背景图的用法 在 p5.js 里使用背景图只需做以下几步操作即可。.../images/bg.png') } function draw() { // 将图片添加到背景里 background(bg) } 出来的结果是这样 在这个例子中,我准备的图片的尺寸是 3073...为什么在 setup() 里一次性把图片加载并添加到背景是错误的写法呢? 因为图片作为一种资源文件加载肯定是需要时间的,在没加载完就使用的话会比较容易出问题。...所以在 p5.js 官网的例子中,会在 setup() 里加载图片资源,然后在 draw() 里再把图片绘制出来。 但其实还有更安全的写法。

    42030

    区块链链游项目系+统开+发

    区块链游 戏是促进游 戏资产交易的最优解交易更加灵活,玩家不止限于游 戏,更是在投资加密市场。但目前似乎是 DeFi 大于 Game。...Kantan Ga mes Inc.的首席执行官兼创始人 Serkan Toto 曾表示,许多这些区块链游 戏似乎是被迫练习,基本上试图使用区块链将数字所有权货币化。...因此,如何保证区块链游戏中资产数据的安全,解决后端开发限制,打破头部垄断,为游戏产业及加密市场双向赋能,在未来发展中显得尤为重要。...;2)时序数据:块链式数据结构携带时间戳,为数据添加时间维度,使得数据能够验证与追溯;3)集体维护:区块链系统使用特有的激励机制以保证系统中所有节点均愿意参与区块的验证,在此过程中采用共识算法选择特定节点...现在的区块链游戏即为一类特殊的 dApp,拥有更复杂的智能合约(后端)与更精美的前端,而 NFT 可以为游戏中的物品提供所有权记录,促进游戏中的经济发展,甚至可以在游戏完成后将其出售来获取利益,因为 NFT

    1K40

    p5.js 3D图形-立方体

    theme: smartblue 本文正在参加「金石计划」 本文简介 带尬猴,我嗨德育处主任 前面写了几篇 p5.js 文章 都还没涉及到3D图形,但其实 p5.js 是提供了基础的3D图形的。...本文就从最简单的立方体讲起,并做几个小demo和各位工友一起掌握立方体的用法。 jcode 立方体的基础用法 在 p5.js 里使用 box() 方法可以创建立方体。...我先用图片资源举例。 加载资源需要在 preload() 这个生命周期里处理,我在 《p5.js 光速入门》 里有讲到,忘记这知识点的工友可以去看看。...非常适合在掘金整活~ 案例1:Rotate Push Pop 第一个案例叫《Rotate Push Pop》,是 processing 的一个例子,我把他的代码转成使用 p5.js 编写。....js 状态管理》 和 《p5.js map映射》 的知识,工友们可以先自行理解,如果不明白的话我再在评论区留下该例子的注解。

    2.2K40

    p5.js 光速入门

    因为官方文档主要讲解api的用法,第一次接触p5.js的工友可能不是那么容易将各个知识点串联起来。 本文在基于官方案例的基础上,把我觉得入门必学的知识点过一遍,然后串起来搞一个小特效。...什么是p5.js p5.js 简介 引用官网的话: p5.js 是个 JavaScript 创意编程程式库,其专注在让编程更易于使用及更加广泛的包容艺术家、设计师、教育家、初学者以及任何人!...--save 引入 import p5 from 'p5' 在画布创建一个圆形 我使用的开发工具是 vs code,并装了 Live Server 插件。...接下来我就用角度的方式去画图展示一下 arc() 是如何使用的。 我画4个弧形,分别表示 90°、180° 、270° 和 360°。...这不是本文的重点。 HSB 和 HSL 在 用法 上差不多,但和 RGB 是有区别的。 使用 HSB 和 HSL 前,要设置颜色模式,告诉 p5.js 要使用哪种颜色模式去渲染。

    5.3K41

    本体行业观点 | GameFi 的过去、现在和未来(上)

    酝酿时期 2014 - BitQuest *图源:ccn.com 这是与 BTC 结合的 Minecraft(我的世界),玩家可以在游戏中通过打怪和交易获得、使用BTC。...但该游戏还不是链游,仅是在游戏中加入了加密通证。 2014 - Huntercoin *图源:xaya.io 这是2014年2月上线的远古项目,同时也最早的链游。...此时,链游的发展处于非常早期的状态,更多的想法是使用通证来辅助已有的游戏行业而不是进行“破坏性的创新”。...安全性 无论是传统游戏,还是链游,安全性也是需要开发团队给予足够重视的一环。而在链游中,开发团队需要考虑如何使用去中心化技术,不仅保障用户的数字资产不被盗取,更要保护用户的身份与隐私数据不被侵犯。...那么 GameFi 在以上维度中达到什么样的水平了呢?这些维度又应该如何去权衡优先级呢?我们将在下一篇中为大家具体分析!

    45110

    第四章5:创建猜单词游戏(Hangman)

    正如往常一样,随着项目代码写入,我们将引入新的概念。今天,我们的目标是创建功能齐全的Hangman游戏,在这个游戏里,我们可以猜词,减少生命值,并最后赢或输掉游戏。在这个游戏中,我们不会创建图象。...在我们共同完成项目后,你可以根据自己的需求随意添加图形。...你可以在下面的例子中看到: 1|if num > 1: ▢▢▢ 3| # 新代码将写在这里 5| print(▢▢▢ 当我们在先前编写的代码之间添加行时,我将使用这三个正方形来表示哪一行应在我们正在编写的代码之上和之下...为更清楚的理解,请查看表4-5中有关该过程的示例。让我们在单词中使用“ pop”,在“ p”中使用为猜测。...请自己务必花一些时间对这些概念进行练习或通过完成每天的练习来实践这些概念。我们介绍了为什么列表在Python中如此重要以及如何在我们的程序中使用它们。

    2.2K20

    你手机的电都去哪儿了?

    天天飞车 14% 全民飞机大战 11% 我叫MT Online 12% 可见这几个游戏的CPU平均使用率大约分布在11%~17%上下(小米2S是4核手机,25%为其中一核满负载)。...LBS: 虽然不少游戏中有LBS功能,一般用于查找附近的玩家,实际玩游戏过程中使用的并不频繁,甚至是比较少的,所以LBS这一块对手游的整体耗电影响很有限。...耗电因素影响度: 因素 影响度 说明 GPU 高 GPU是耗电主要原因,而且是手游可以优化的。 CPU 中 观察CPU是否在正常范围,如果游戏使用CPU经常处于全速运行模式,也是非常耗电的。...LBS 低 游戏中虽然有LBS,但是使用的频度较低。...手游如何省电: 套用前段时间比较火的一个句式:用电容易,充电不易,且用且珍惜,上面各个因素都对耗电有或多或少的影响,那么如何做才可以让手游省电呢?

    2K30

    【Python】Python 实现猜单词游戏——挑战你的智力和运气!

    欢迎来到我们精心准备的文字游戏世界。今天,我将向大家介绍一款有趣而又考验智力的游戏——猜单词游戏。在游戏中,你将面临一个神秘的单词,你需要凭借自己的智慧和运气来猜测这个单词是什么。...将字符串转换为列表,可以使用list()函数,例如clue = list('?????'),将包含五个问号的字符串转换为一个包含五个元素的列表。 循环的使用。...主循环使用了while语句,可以在满足条件(lives > 0)的情况下重复执行一段代码块。 while循环的终止条件是生命次数不大于0,即玩家没有生命次数剩余。 条件判断和分支控制。...在函数体内部,使用 while 循环和条件判断,根据用户猜测的字母更新猜测进度列表。...在每次循环中,打印可选的单词列表,显示剩余生命次数,并通过 input() 函数获取用户的猜测。

    37710
    领券