Gemini 开发植物大战僵尸
Gemini 开发植物大战僵尸
Gemini 开发植物大战僵尸 Gemini 开发植物大战僵尸 Modified July 21, 2025 No access Gemini 2.5 Pro Preview 05 06 1 00:00 No access Gemini 2.5 Pro Preview 05 06 2 00:00 No access Gemini 2.5 Pro Preview 05 06 3 00:00 这里，出现了问题，点击开始游戏后，就一直报错，点击修复，整个都炸了，估计是超出限制了。 复制代码到一个新对话，让他再次修改。就好了。 但问题又来了，怎么突然又多了一个开始游戏的按钮，首页中明明就有框啊，哈哈，没关系，直接把 bug 反馈。直接修改好。 在游戏中，感觉这个草坪有点丑，让他替换成更真实一点吧，比如这样： 确实跟换真实了，但整个画面感，嗯，多少还是有些违和😂。 直接让他按照我给的背景图来改得了，左边是我家的房子，打僵尸的操作应该是在院子里进行的。 让他改完后，阳光又无法搜集了，好家伙，点击直接无效果。再改吧，我的好 AI。 一顿嘴轰后，感觉游戏结束应该是被吃掉了脑子，点击屏幕任意位置可以重新开始游戏。 这个时候又又出现 2 个问题，僵尸走出绿色草坪了，而且走的也太快了，直接让他调整。（没关系，哪个程序员不出点 bug 呢，AI 也一样。) 中途如果出现卡顿的情况，完全可以复制代码，新建窗口，重新开始。 经过一番调整，这个效果，我还是比较满意的。 No access Gemini 2.5 Pro 5 00:00 源码我也分享给大家：（元素需要自己的 CDN 替换一下） Code block XML Copy <!DOCTYPE html <html lang="zh CN" <head <meta charset="UTF 8" <meta name="viewport" content="width=device width, initial scale=1.0" <title 网页版植物大战僵尸 (元素调大)</title <script src="https://cdn.tailwindcss.com" </script <link rel="preconnect" href="https://fonts.googleapis.com" <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" <style body { font family: 'Inter', 'SimHei', sans serif; display: flex; flex direction: column; align items: center; justify content: center; min height: 100vh; background color: 333; / Fallback background / margin: 0; overflow: hidden; / Prevent scrollbars from body / } start screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background size: cover; background position: center; display: flex; flex direction: column; align items: center; justify content: center; z index: 1000; cursor: pointer; } start screen h1 { font family: 'Press Start 2P', cursive; font size: 2.5rem; / Responsive font size / color: FFD700; / Gold color / margin bottom: 2rem; text shadow: 0 0 10px rgba(255, 215, 0, 0.8); } start button { / Kept for potential future use, but screen click starts game / display: none; } game container { background size: cover; background position: center top; / Lawn typically at the top/center / border: none; box shadow: none; position: relative; border radius: 0; display: none; / Initially hidden, shown by JS / width: 100%; height: 100vh; / Game container takes full screen height / z index: 1; / Flex settings to position canvas and spacer / display: flex; flex direction: column; justify content: flex end; / Aligns items (canvas, spacer) to the bottom / align items: center; / Centers items horizontally / } canvas { display: block; border radius: 0; / No rounded corners for the game canvas itself / pointer events: auto; / Allow clicks on canvas / z index: 0; / Canvas behind UI panel / / background color: rgba(0,0,0,0.1); / For debugging canvas bounds / } / Spacer div to push the canvas up by two row heights / bottom spacer { height: 200px; / 2 CELL SIZE (2 100px) / width: 100%; / Take full width / flex shrink: 0; / Prevent spacer from shrinking / } .ui panel { position: absolute; / UI panel remains at top of game container / top: 0; left: 50%; No access Gemini 2.5 Pro Preview 05 06 1 00:00 No access Gemini 2.5 Pro Preview 05 06 1 00:00 No access Gemini 2.5 Pro Preview 05 06 2 00:00 No access Gemini 2.5 Pro Preview 05 06 2 00:00 No access Gemini 2.5 Pro Preview 05 06 3 00:00 No access Gemini 2.5 Pro Preview 05 06 3 00:00 这里，出现了问题，点击开始游戏后，就一直报错，点击修复，整个都炸了，估计是超出限制了。 复制代码到一个新对话，让他再次修改。就好了。 但问题又来了，怎么突然又多了一个开始游戏的按钮，首页中明明就有框啊，哈哈，没关系，直接把 bug 反馈。直接修改好。 在游戏中，感觉这个草坪有点丑，让他替换成更真实一点吧，比如这样： 确实跟换真实了，但整个画面感，嗯，多少还是有些违和😂。 直接让他按照我给的背景图来改得了，左边是我家的房子，打僵尸的操作应该是在院子里进行的。 让他改完后，阳光又无法搜集了，好家伙，点击直接无效果。再改吧，我的好 AI。 一顿嘴轰后，感觉游戏结束应该是被吃掉了脑子，点击屏幕任意位置可以重新开始游戏。 这个时候又又出现 2 个问题，僵尸走出绿色草坪了，而且走的也太快了，直接让他调整。（没关系，哪个程序员不出点 bug 呢，AI 也一样。) 中途如果出现卡顿的情况，完全可以复制代码，新建窗口，重新开始。 中途如果出现卡顿的情况，完全可以复制代码，新建窗口，重新开始。 经过一番调整，这个效果，我还是比较满意的。 No access Gemini 2.5 Pro 5 00:00 No access Gemini 2.5 Pro 5 00:00 源码我也分享给大家：（元素需要自己的 CDN 替换一下） 其实，说实话，还有很多想要调整的，比如僵尸走路不自然，比如设置关卡。以及更多好玩的规则。 但需要花一些时间了，大家可以自行去实践，我抛砖引玉。 由此可见 Gemini 2.5 Pro Preview 05 06 不愧为当下最强的编码模型。 我实际只花费不到 3 个小时，就让 Gemini 帮我开发完了这个植物大战僵尸的游戏，而且接近逼真。 全程我甚至没写过一行代码，我假装自己是老板在不断的给需求，AI 在不断的改问题，不断的调整。 最终达到我满意的效果。 这或许才是 AI 编程该有的样子，接触不接触代码，真的有那么重要吗？ 用嘴编程的时代一定会到来。 这一刻，我既欣喜，又失落。 欣喜的是，我发现每一次大模型的迭代，给我带来一种前所未有的震撼感。 这是一种站在这个时代下，亲眼目睹变化的快感。 但我同时又有些失落，登顶的为什么不能是我们的模型。 我很想很想，这一刻，能大声并自豪的说出，我们遥遥领先。 虽然我认可 AI 应用是王道，但大模型底座的升级是王道中的基石。 模型即是应用，我们不该只关注应用而忽略大模型的研发，特别是大厂，更该责任肩负起这个重担。 但我始终相信，终有一日，我们必将登顶，全方位碾压。 到那时，我会笑着和我儿子说： 看，这是我们中国的大模型！ 大家好，我是小林，这篇教程作者是苍何，AI 编程开源知识库作者。 谷歌最近在 AI 上的动作有点儿频繁，又更新了一波自家的 Gemini 大模型。 将原先的 Gemini 2.5 Pro 升级为 Gemini 2.5 Pro Preview 05 06。 PS：很不明白为啥每次命名都这么不好记，就不能 V1，V2 吗？再者说，这么多模型把人都搞晕了。 PS：很不明白为啥每次命名都这么不好记，就不能 V1，V2 吗？再者说，这么多模型把人都搞晕了。 但这次不起眼的更新，却一点儿也不简单，新的模型各方面表现很优秀，借个图，先浅浅感受下。 特别是在编码能力上，直接超过 Claude 3.7 ，登顶全球最强模型。 可能这么说，你没什么体感，还以为我在吹大牛，用几个网友的例子，你可以真实的先感受一波。 1、将图像转换为基于代码的动画： 2、从草图构建应用程序： 3、一张图开发一个游戏 除此之外，还有一个比较有意思的 case，Gemini 2.5 Pro Preview 05 06 超强的多模态理解能力，直接可以理解视频，并生成可视化网页。 比如我在 YouTube 上看 NotebookLM 教程，现在直接可以将视频甩给他，并带上这段卡神的 Prompt。 打开后就可以看到这样的可视化页面： 这次，我比较关注的是他的代码能力，从上面几个 case 来看，确实很棒，在前端的渲染以及审美上，和 Claude 3.7 相比，有过之而不不及。 于是我灵机一动，何不用他做个植物大战僵尸小游戏试试，毕竟当年老爱玩这游戏了。 开整，为了对比，我先直接给了 Claude 3.7 一句话需求："做一个网页版的植物大战僵尸游戏"。 但是，没法使用啊，阳光也不掉落，感觉需要多轮对话调教。 接下来，我给了 Gemini 2.5 Pro Preview 05 06 同样的需求。 好家伙，直接就是个可以玩的游戏啦，你别说，还真有那么回事了，只是植物、阳光这些元素看着还有点儿丑。 而且，真的能 gameover😂 功能能用了，但是对应元素得用图片换掉。比如阳光，我在 iconfont 上找了个阳光的 SVG，将代码丢给 Gemini，让他换下。 但光图标肯定不行，像向日葵，豌豆射手这种还得是用 CDN 图片来整。 于是我让 GPT4o 帮我生成，上传到 CDN，直接丢到 Gemini 做替换。 一顿替换下来，效果好很多啦。可以对比感受一下。 No access Gemini 2.5 Pro 5 00:00 No access Gemini 2.5 Pro 5 00:00 真实了不少，但还是感觉怪怪的，连个开始游戏的菜单都没有，不是个好游戏，好，继续搞个首页图，让他改吧。 报了个错，直接点击修正，让他自己修正吧，作为一个合格 AI，写出 bug 没关系，自己修吧。