使用 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系统中,用…

sql专题 之 sql的执行顺序

文章目录 sql的执行顺序sql语句的格式实际的执行顺序:虚拟表 vs 数据集虚拟表 结果集总结嵌套查询在sql查询中的执行顺序 前文我们了解了sql常用的语句,这次我们对于这些语句来个小思索 戳这里→ sql专题 之 常用命令 sql的执行顺序 SQL语句的执行顺序是…

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

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

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

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

前端监控与埋点 全总结

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

2411d,右值与移动

原文 概述 添加语言内部__rvalue(Expression)函数,指示对匹配函数参数,按右值对待式.这在用非引用语义调用函数时启用移动语义. 移动语义对运行时和资源效率是可取的,因为可移动资源到新对象,而不是复制然后析构.其他语言(如C)有流行的移动语义. 先前的工作 C移动语义这里…

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

一、软件系统设计开发运行安全 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数据源的支持;图表方面,对地图类和表格类图表进行了功能增强和优化,增…

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

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

机器视觉和计算机视觉的区别

机器视觉和计算机视觉的区别 1、本质上两者是一样的,都是将光信号转换成电信号,然后交给计算机处理; 2、二者侧重点不同,计算机视觉更偏向研究,更前沿,采集到图像后交给计算机进行分析处理,包括…

网络安全-Linux基础(bash脚本)

文章目录 bash脚本编写基础使用的脚本解析器/bin/bash(声明)bash脚本需要拥有执行权限bash脚本语法输入与输出函数的封装条件判断语句条件符号 循环语句模块化编程 Linux进程操作查看寻找进程终止进程暂停与恢复进程后台运行 bash脚本编写系统内存资源占…

今天出了10个4声母 .com

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

【网络安全 | 甲方建设】构建安全的密码重置功能

未经许可,不得转载。 文章目录 一、密码存储的安全策略二、发送新密码与发送重置链接的比较三、用户验证:邮箱还是用户名?四、用户过滤五、电子邮件通知变更总结任何需要登录的网站,都需为用户提供“找回密码”功能,以便在用户忘记密码时可以重新获得访问权限。但要做到安…

【echarts图轮播tooltips】

echarts饼状图轮播tooltips 定义echarts图写定时任务调用定时任务 定义echarts图 let chartDom document.getElementById(id); let myChart echarts.init(chartDom);写定时任务 通过echarts的events来控制高亮以及tooltips的现实 /**params dom dom元素params chartOption…

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

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