使用 Vue 配合豆包MarsCode 实现“小恐龙酷跑“小游戏

作者:BLACK595

“小恐龙酷跑”,它是一款有趣的离线游戏,是Google给Chrome浏览器加的一个有趣的彩蛋。当我们浏览器断网时一只像素小恐龙便会出来提示断网。许多人认为这只是一个可爱的小图标, 但当我们按下空格后,小恐龙前面便出现了一片沙漠,小恐龙也随之奔跑起来,我们要做的也就是控制小恐龙跳跃,跨过沙漠中的荆棘,帮助小恐龙跑出沙漠。今天,我们也用豆包MarsCode AI编程助手来帮助我们用vue来实现这一经典的小游戏。

准备

豆包MarsCode 是字节跳动推出的免费AI编程助手,我们使用豆包MarsCode 时需要先去官网注册账号,并下载插件安装到我们的IDEA中,还不知道怎么操作的小伙伴可以看我之前的文章IntelliJ IDEA:MarsCode 插件初体验。

静态画面

首先,构成游戏的有五个物体,分别是云、小恐龙、大树、小树和路,我们先把他们都放置在同一个容器div中,通过css调整他们具体的位置。

画面移动

接着,要考虑画面的移动,在画面中,一直在移动的其实只有云,树,路,他们时刻都在发生左移,小恐龙只需要在原地蹦跳。 这时我们CTRL+U打开AI聊天界面,问问豆包MarsCode 怎么实现左移的效果。

 AI让我们加个roadMove的动画,改变路translateX位置,我们来试试看。

嗯😶‍🌫️,确实移动起来了,但是这路越跑越少,我们需要的是像轮播图一样的,能一直循环跑下去的。

好的,它叫我们加个road2在road的后面,在添加个动画在rode2上,试一下:

现在这样就很ok,两个road轮着跑,看上去就是一直在向前了。
路没问题了,再给树和云添加上动画,树和云跟路有些不同的时,树和云从最右侧出来向左匀速移动,直到移动到最左侧,来看看 AI 给的代码。

上贴上来后,发现这树跑的好慢,和路都不同步。

我们这里自己给它改一下,把速度和路同步,并且云和大树也加上这个动画。

这回速度虽然和路同步了,但是又粘在一起了,需要让云和大树分别先延时不同时间再执行动画,再css中 加上animation-delay: 3s;

恐龙移动

除了画面在移动外,我们还需要让恐龙看起来也在移动,让它跑起来,也就是多张恐龙图片的切换,但是多张图片切换切图数量太多,我们用雪碧图实现,把多个动作放在一张图片上,通过改变background-position实现动作切换。原理知道后,先看看AI给我们生成的代码。
第一次给我们的是使用css的动画效果。

显然,这是有问题的,恐龙移动不能像画面移动那么平滑,它要在短时间内马上切换到下一张图。可能是我描述的不太准确,给 AI 说了它还是给我们的动画切换。
看来我们要直接给它讲方法,用定时器做到每0.2秒切换一帧,这下就符合要求了。

恐龙跳跃

恐龙能动了后,还需要它能够跳跃,也就是当我们按下空格后,恐龙的跳跃动画,让恐龙升高之后再下降,还需要考虑加速度,不然动作显得太硬了。功能很简单,但如果自己想代码肯定很打脑壳,我们还是交给 AI 先来生成看看吧。

看这代码还真有板有眼的,先不管,把代码粘贴进来试试效果。

呦,还真行,就是跳的高度还不够,再手动给它调高点translateY(-80px)就可以了。

碰撞检测

在完成小游戏基本的动画和事件监听后,我们要来加上游戏结束的条件了,也就是当小恐龙碰到树就game over了,专业一点的名字叫“碰撞检测”。还是直接老样子,AI,直接上代码。

可以看到给我们的代码主体判断部分还是可以的,但是触发条件是animationiteration,也就是当小恐龙重新播放动画的时候才触发,但是我们小恐龙用的定时器都没用动画,这个监听器便永远触发不了,我把他改为用定时器,每0.1秒判断一次是否发生了碰撞,再来试一下。

嗯🌟,不错不错🥰,虽然功能被阉割了,但小恐龙终归是跑起来了,后面有时间再给他完善下,加上计分和下蹲功能。
完整代码:(writing_front: 小恐龙酷跑 (gitee.com))了。

结语

豆包MarCode 着实能够为我们节省大量的开发时间。有 bug 时,可以先让它进行检查;面对功能点需求时,也能让它先生成代码给我们试试,看看它的思路。不过,它生成的代码或许并不完全符合我们的预期,此时我们需要添加更为详细的描述,或者换种思路的代码让它再试试。AI 在算法和逻辑方面表现得极为强大,但在具体功能实现方面,当我们参考它生成的代码时,仍需进行一定的调整。最后,希望咱们的豆包MarCode 在未来的发展道路上能够稳中求进,不断完善,为用户带来更多的惊喜与便利。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/59238.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Attention is all you need详细解读

transformer目的是解决NLP中使用RNN不能并行计算问题。 Encoder-Decoder, Attention, Transformer 三者关系 1.基础储备 (1)CV基础知识 1.首先拿CV中的分类任务来说,训练前我们会有以下几个常见步骤: 2.获取图片 3.定义待分类的类…

面向对象的需求分析和设计(一)

[toc] 1. 引言 前一篇文章《我对需求分析的理解》提到了面向对象分析和设计,正好最近又重新有重点的读了谭云杰著的《Think in UML》,感觉有必要写把书中一些核心内容观点以及自己的想法整理出来,一是方便自己日后的复习,另外也…

Window下PHP安装最新sg11(php5.3-php8.3)

链接: https://pan.baidu.com/s/10yyqTJdwH_oQJnQtWcwIeA 提取码: qz8y 复制这段内容后打开百度网盘手机App,操作更方便哦 (链接失效联系L88467872) 1.下载后解压文件,将对应版本的ixed.xx.win文件放进php对应的ext目录下,如图所示 2.修改ph…

基于Spring Boot与Redis的令牌主动失效机制实现

目录 前言1. 项目结构和依赖配置1.1 项目依赖配置1.2 Redis连接配置 2. 令牌主动失效机制的实现流程2.1 登录成功后将令牌存储到Redis中2.2 使用拦截器验证令牌2.3 用户修改密码后删除旧令牌 3. Redis的配置与测试4. 可能的扩展与优化结语 前言 在现代Web系统中,用…

Linux学习笔记之组管理和权限管理

组管理 文件/目录 所有者 一般文件所有者是文件的创建者,谁创建了该文件,就自然成为该文件的所有者 ls -ahl (查看文件的所有者) chown 用户名 文件名 (修改文件所有者) 文件/目录 所在组 当某个用户…

『黄河遗韵』数字非遗馆的守护之旅

创意定位 腾讯云推出的以“守护黄河文明,探索数字非遗馆”为主题的创意H5作品,通过长卷寻宝VR展馆形式,描绘了黄河文明中的非物质文化遗产,旨在唤起公众对黄河文明的保护意识,并邀请大家参与互动,深入了解…

前端监控与埋点 全总结

一、概念 前端埋点是指在网页或者应用程序中插入特定的代码,用于收集用户的行为数据并发送给服务器进行分析。这些数据可以包括用户的点击、浏览、输入等操作,帮助开发者了解用户的在其网站中的行为,从而进行针对性的优化和改进。 前端埋点…

全面介绍软件安全测试分类,安全测试方法、安全防护技术、安全测试流程

一、软件系统设计开发运行安全 1、注重OpenSource组件安全检查和版本更新(black duck) 现在很多云、云服务器都是由开源的组件去搭成的,对于OpenSource组件应该去做一些安全检查和版本更新,尤其是版本管理,定期对在运…

十、文件上传和下载

文章目录 1. 文件下载2. 文件上传 1. 文件下载 使用ResponseEntity实现下载文件的功能 2. 文件上传

Springboot整合Prometheus+grafana实现系统监控

前言 Prometheus是一个开源的服务监控系统和时序数据库,它提供了强大的功能和灵活的架构,是目前主流的监控和管理应用系统的工具。 而Grafana是一个开源的数据可视化工具,与Prometheus集成,就可以可视化地监控系统的各个指标。 …

新增支持Elasticsearch数据源,支持自定义在线地图风格,DataEase开源BI工具v2.10.2 LTS发布

2024年11月11日,人人可用的开源BI工具DataEase正式发布v2.10.2 LTS版本。 这一版本的功能变动包括:数据源方面,新增了对Elasticsearch数据源的支持;图表方面,对地图类和表格类图表进行了功能增强和优化,增…

常用数字器件的描述-时序逻辑器件的描述

目录 锁存器与触发器 寄存器与移位寄存器 分频器及其应用 偶分频器 奇分频器 半整数分频器 分频器的应用 锁存器与触发器 锁存器与触发器是两种最基本的存储电路。 锁存器是电平敏感器件,而触发器是边沿触发器件。 为了使用灵活方便,商品化的锁…

今天出了10个4声母 .com

价格蛮低的 ,VJ.VT.Q.Q 十个 遥想当年6.5万收的5个四声母.com,上面有2个就在下图中呀,赔大发了

【JAVA】使用IDEA创建maven聚合项目

【JAVA】使用IDEA创建maven聚合项目 1.效果图 2.创建父模块项目 2.1删除父模块下面的src目录以及不需要的maven依赖 3创建子模块项目 3.1右击父模块项目选择Module… 3.2创建子模块 3.3删除子模块下不需要的maven依赖 4.子模块创建完成后引入SpringBoot依赖启动项目

OKG Research:用户意图驱动的Web3应用变革

出品| OKG Research 作者|Samuel QIN 当前加密市场的快速演变中,用户增长成为行业可持续发展的基石。目前主流观点在推动行业前进的路上,从单纯的技术探索在向更注重应用价值的方向转变。尽管近年来Web3生态系统发展迅速&#xf…

云渲染与云电脑,应用场景与技术特点全对比

很多朋友问,你们家一会宣传云渲染,一会宣传云电脑的,我到底用哪个?今天,渲染101云渲染和川翔云电脑就来对比下两者的区别! 渲染101&川翔云电脑,都是我们的产品,邀请码6666 一、…

鸿蒙进阶篇-属性动画-animateTo转场动画

大家好啊,这里是鸿蒙开天组,今天我们来学习属性动画-animateTo&转场动画,咱们先来学习属性动画-animateTo 属性动画-animateTo 属性动画 animation是作为属性使用,而animateTo显示动画是一个系统的内置函数,可以…

我谈正态分布——正态偏态

目录 pdf和cdf参数 标准正态分布期望和方差分布形态 3 σ 3\sigma 3σ原则 正态和偏态正态偏态瑞利分布偏度 (Skewness)峰度 (Kurtosis) 比较 正态分布的英文是Normal Distribution,normal是“正常”或“标准”的意思,中文翻译是正态,多完美的…

从无音响Windows 端到 有音响macOS 端实时音频传输播放

以下是从 Windows 端到 macOS 端传输音频的优化方案,基于上述链接中的思路进行调整: Windows 端操作 安装必要软件 安装 Python(确保版本兼容且已正确配置环境变量)。安装 PyAudio 库,可通过 pip install pyaudio 命令…

AI知识库在行业应用中的未来趋势与案例分析

在数字化转型的浪潮中,AI知识库正成为企业提升效率和创新能力的关键工具。本文将探讨AI知识库在不同行业的应用案例,并分析其未来发展趋势。 一、汽修行业的AI知识库应用 汽修行业正通过构建内部知识库来提升服务质量和工作效率。一个完善的内部知识库能…