“小恐龙酷跑”,它是一款有趣的离线游戏,是Google给Chrome浏览器加的一个有趣的彩蛋。当我们浏览器断网时一只像素小恐龙便会出来提示断网。许多人认为这只是一个可爱的小图标,
但当我们按下空格后,小恐龙前面便出现了一片沙漠,小恐龙也随之奔跑起来,我们要做的也就是控制小恐龙跳跃,跨过沙漠中的荆棘,帮助小恐龙跑出沙漠。今天,我们也用豆包的MarsCode AI编程助手来帮助我们用vue来实现这一经典的小游戏。
准备
MarsCode是字节跳动推出的免费AI编程助手,我们使用MarsCode时需要先去官网注册账号,并下载插件安装到我们的IDEA中,还不知道怎么操作的小伙伴可以看我之前的文章IntelliJ IDEA:MarsCode 插件初体验。
静态画面
首先,构成游戏的有五个物体,分别是云、小恐龙、大树、小树和路,我们先把他们都放置在同一个容器div中,通过css调整他们具体的位置。
画面移动
接着,要考虑画面的移动,在画面中,一直在移动的其实只有云,树,路,他们时刻都在发生左移,小恐龙只需要在原地蹦跳。
这时我们CTRL U打开AI聊天界面,问问MarsCode怎么实现左移的效果。
AI让我们加个roadMove的动画,改变路translateX位置,我们来试试看。
嗯