使用 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.rhkb.cn/news/470039.html

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

相关文章

案例精选 | 河北省某检察院安全运营中异构日志数据融合的实践探索

河北省某检察院是当地重要的法律监督机构,肩负着维护法律尊严和社会公平正义的重要职责。该机构依法独立行使检察权,负责对犯罪行为提起公诉,并监督整个诉讼过程,同时积极参与社会治理,保护公民权益,推动法…

7天用Go从零实现分布式缓存GeeCache(学习)(3)

目录结构 ├── geecache │ ├── byteview.go │ ├── cache.go │ ├── consistenthash │ │ ├── consistenthash.go │ │ └── consistenthash_test.go │ ├── geecache.go │ ├── go.mod │ ├── http.go │ ├── lru │ …

力扣 LeetCode 142. 环形链表II(Day2:链表)

解题思路&#xff1a; 使用set判断是否重复添加&#xff0c;如果set加入不进去证明之前到达过该节点&#xff0c;有环 public class Solution {public ListNode detectCycle(ListNode head) {Set<ListNode> set new HashSet<>();ListNode cur head;while (cur …

CLion配置QT开发环境

一、将qmake工程转为cmake工程&#xff08;方法一&#xff1a;用工具转换并做适当修改&#xff09; 1、工具链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1grW2QY3sW8X2JaHWM_ePPw 提取码&#xff1a;7at4 工具源码:https://github.com/milahu/qmake2cmake 2、执行…

《AI 使生活更美好》

《AI 使生活更美好》 当我们步入科技腾飞的时代&#xff0c;人工智能&#xff08;AI&#xff09;如同一颗璀璨的新星&#xff0c;照亮了我们生活的每一个角落。它以惊人的速度改变着我们的世界&#xff0c;从医疗到教育&#xff0c;从交通到娱乐&#xff0c;AI 正以前所未有的力…

项目模块十七:HttpServer模块

一、项目模块设计思路 目的&#xff1a;实现HTTP服务器搭建 思想&#xff1a;设计请求路由表&#xff0c;记录请求方法与对应业务的处理函数映射关系。用户实现请求方法和处理函数添加到路由表&#xff0c;服务器只接受请求并调用用户的处理函数即可。 处理流程&#xff1a; …

ODOO学习笔记(1):ODOO的SWOT分析和技术优势是什么?

ODOO是一款开源的企业管理软件套件&#xff0c;广泛应用于企业管理中。它由比利时的Odoo S.A.公司开发&#xff0c;最初名为OpenERP&#xff0c;现在已经成为全球流行的ERP解决方案之一。ODOO集成了ERP、CRM、电子商务和CMS等多种功能模块&#xff0c;适用于各种规模的企业应用…

出海攻略,如何一键保存Facebook视频素材

提词宝&#xff1a;快速保存Facebook视频教程 目标人群与痛点 目标人群&#xff1a;经常在Facebook上浏览视频但不知道如何保存的用户&#xff0c;包括学生、内容创作者、营销从业者&#xff0c;以及需要保存重要视频素材的人。 痛点与场景&#xff1a; 看到喜欢的视频&…

【Playwright + Python】系列(十)利用 Playwright 完美处理 Dialogs 对话框

哈喽&#xff0c;大家好&#xff0c;我是六哥&#xff01;今天我来给大家分享一下如何使用playwight处理Dialogs对话框&#xff0c;面向对象为功能测试及零基础小白&#xff0c;这里我尽量用大白话的方式举例讲解&#xff0c;力求所有人都能看懂&#xff0c;建议大家先收藏&…

LLM - 使用 LLaMA-Factory 微调大模型 Qwen2-VL SFT(LoRA) 图像数据集 教程 (2)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/143725947 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 LLaMA-…

自动驾驶3D目标检测综述(一)

文章地址&#xff1a;[2206.09474] 3D Object Detection for Autonomous Driving: A Comprehensive Survey (arxiv.org) 这篇综述简单易懂&#xff0c;非常合适对自动驾驶和3D目标检测感兴趣的小白阅读&#xff0c;对相关算法进行初步理解。 目录 一、摘要 &#xff08;一&a…

回归分析学习

学习视频链接&#xff1a; 【回归分析,一套搞定】&#xff01;全网最通俗易懂的回归分析教程&#xff0c;我终于学明白了&#xff01;_哔哩哔哩_bilibili 相关分析&#xff1a;2个或两个以上的变量之间的相关程度及大小的统计方法&#xff1b; 回归分析&#xff1a;存在相关关…

LabVIEW 实现 find_nearest_neighbors 功能(二维平面上的最近邻查找)

1. 背景介绍 在数据分析和图像处理领域&#xff0c;经常需要查找给定点的最近邻居点。在LabVIEW中&#xff0c;计算二维平面上多个点之间的欧氏距离&#xff0c;并返回距离最近的几个点是一种常见操作。find_nearest_neighbors 函数用于实现这个功能。 2. 欧氏距离计算 在二维…

后端:Aop 面向切面编程

文章目录 1. Aop 初步学习面向切面编程&#xff0c;EnableAspectJAutoProxy2. AOP的核心概念3. 前置通知&#xff08;Before&#xff09;4. 后置通知&#xff08;After&#xff09;5. 返回通知&#xff08;AfterReturning&#xff09;6. 异常通知&#xff08;AfterThrowing&…

无插件H5播放器EasyPlayer.js网页web无插件播放器vue和react详细介绍

EasyPlayer.js H5播放器&#xff0c;是一款能够同时支持HTTP、HTTP-FLV、HLS&#xff08;m3u8&#xff09;、WS、WEBRTC、FMP4视频直播与视频点播等多种协议&#xff0c;支持H.264、H.265、AAC、G711A、Mp3等多种音视频编码格式&#xff0c;支持MSE、WASM、WebCodec等多种解码方…

管家婆财贸ERP BB045.销售批量收款

最低适用版本: 财贸系列 22.8 插件简要功能说明: 销售类单据支持批量收款,简化收款做单流程更多细节描述见下方详细文档插件操作视频: 进销存类定制插件--销售批量收款 插件详细功能文档: 1. 应用中心增加菜单【销售批量收款】 a. 参考23.0应用中心-移动管理-物联宝-【…

基于MATLAB+opencv人脸疲劳检测

我们可以通过多种方式从现实世界中获取数字图像&#xff0c;比如&#xff1a;数码相机、扫描仪、计算机扫描和磁共振成像等等。在这些情况中&#xff0c;虽然我们肉眼看到的是图像&#xff0c;但是当需要将图像在数字设备中变换传输时&#xff0c;图像的每个像素则对应一个数值…

Prompt 工程

Prompt 工程 1. Prompt 工程简介 “预训练-提示预测”范式是近年来自然语言处理&#xff08;NLP&#xff09;领域的一个重要趋势&#xff0c;它与传统的“预训练-微调-预测”范式相比&#xff0c;提供了一种更为灵活和高效的模型应用方式。 Prompt工程是指在预训练的大型语言…

【Python TensorFlow】进阶指南(续篇一)

在前两篇文章中&#xff0c;我们介绍了TensorFlow的基础知识及其在实际应用中的初步使用&#xff0c;并探讨了更高级的功能和技术细节。本篇将继续深入探讨TensorFlow的高级应用&#xff0c;包括但不限于模型压缩、模型融合、迁移学习、强化学习等领域&#xff0c;帮助读者进一…