不晓得大家在使用 Chrome 浏览器时，有没有玩过这么个恐龙小游戏：

这款 404 小游戏于 2014 年，由谷歌 Chrome UX 团队开发。游戏嵌入谷歌浏览器后，大获用户好评，每月甚至可有 2.7 亿游戏次数。

小恐龙跑酷游戏的画面简洁，游戏简单。玩家只需要操作小恐龙跃过沙漠中随机出现的仙人掌即可，而当小恐龙失手撞上仙人掌时，即意味着游戏结束 GAME OVER。

作为网页游戏，小恐龙游戏可以在 Lightly 中用 HTML + CSS + JavaScript 实现。代码：https://179f55890e-share.lightly.teamcode.com

小恐龙游戏的原理

这款游戏的操作逻辑可能比想象中还要简单，图中的小恐龙虽然看着正在跑动，但他其实只是在上下跳跃而已，实际上移动的是带随机仙人掌的画布，因此操作小恐龙只需上下两个按键即可。

定位小恐龙与地面

让小恐龙跑动之前，我们需要在游戏画布中为小恐龙定位，固定小恐龙出现的地方。同时，我们也需要固定地面的位置，让程序知道小恐龙究竟要踩在哪块土地上。

实现地面移动

前面说了，游戏中的小恐龙其实是在原地跳跃，所以我们只需要通过 update() 函数将地面无限向左滚动即可。

create() {this.gameSpeed = 10;// rest of the code
}update() {this.ground.tilePositionX += this.gameSpeed;
}

让小恐龙跳起来

create() {// rest of the codethis.dino = this.physics.add.sprite(0, height, 'dino-idle').setCollideWorldBounds(true).setGravityY(5000).setOrigin(0, 1); this.createControll();
}createControll() {this.input.keyboard.on('keydown_SPACE', () => {if (!this.dino.body.onFloor()) { return; }this.dino.setTexture('dino', 0);this.dino.setVelocityY(-1600);})
}

setGravityY 会为小恐龙增加重力，这里添加的是 5000；如果不设置 setColliderWorldBounds 的话，小恐龙就会无视地面，直接掉到画面外了，诶嘿。

最后增加控制，每当我们按下空格键时，小恐龙就会以每秒 1600 的速度向上，也就是抵消了那一秒中的部分重力，实现跳跃效果。

最后，自然是再加上亿点点细节，让恐龙实现跑动效果，也添加不同种类的仙人掌，让小恐龙跨越沙漠的过程没有那么无聊。

查看完整的小恐龙源代码：https://179f55890e-share.lightly.teamcode.com

如何打开并编辑他人用 Lightly 分享的项目？

Lightly - 新一代的 HTML + CSS + JavaScript IDE

Chrome 里的小恐龙游戏是怎么做出来的？相关推荐

小恐龙游戏python_补一波之前说好的用DQN自动玩Chrome浏览器的小恐龙游戏呗~
原文链接补一波之前说好的用DQN自动玩Chrome浏览器的小恐龙游戏呗~mp.weixin.qq.com 效果展示在cmd窗口运行如下命令即可: 模型训练: python TRexRush.py ...
chrome恐龙游戏java_自动玩Chrome浏览器的小恐龙游戏
开发工具 Python版本:3.6.4 相关模块: opencv-python模块: numpy模块: selenium模块: pillow模块: 以及一些Python自带的模块. 环境搭建安装Py ...
html5游戏刷分,google chrome浏览器离线小恐龙游戏刷分bug
搜索热词 F12打开开发者工具->console->输入如下代码,分数要多少有多少 Runner.instance_.setSpeed(99999); 试试瞬间满分 window.te ...
Chrome 的小恐龙游戏，被我破解了...
一个阳光明媚的周末,透光的窗帘把我从睡梦中叫醒,大脑说今天是周六,可以慵懒个一上午,于是开心地打开我的 Mac 准备看两集Rick and Morty再起床洗漱. 我迫不及待打开了对应的网站,发现浏览 ...
Chrome 的小恐龙游戏，被破解了...
一个阳光明媚的周末,透光的窗帘把我从睡梦中叫醒,大脑说今天是周六,可以慵懒个一上午,于是开心地打开我的 Mac 准备看两集 Rick and Morty 再起床洗漱. 我迫不及待打开了对应的网站,发现 ...
【MM32F5270开发板试用】移植Google Chrome小恐龙游戏到MM32F5270
本篇文章来自极术社区与灵动组织的MM32F5270开发板评测活动,更多开发板试用活动请关注极术社区网站.作者:曾是一颗薏米一.项目背景在几年前,Google 给 Chrome 浏览器加了一个有趣的 ...
python实现图片找不同游戏_用Python实现谷歌的小恐龙游戏
(给Python开发者加星标,提升Python技能) 来源: Charles的皮卡丘-白露未晞me理谷歌流量器中有个很有名的彩蛋:当你网络出现问题时,就会出现一个"小恐龙游戏". ...
Java 独门绝技用Java玩谷歌小恐龙游戏（有源码）
目录 1.Swing成品演示 2.简介 3.Java的Robot类 4.实战开发例子 1.Swing成品演示 2.简介 Java有一个很厉害的类Robot类,这个类可以模仿人的手去操作电脑,鼠标移动, ...
java小恐龙游戏_用Python实现谷歌的小恐龙游戏
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 谷歌流量器中有个很有名的彩蛋:当你网络出现问题时,就会出现一个"小恐龙游戏&quo ...
小恐龙游戏制作挑战：第8天-确定图片如何制作
第8天小恐龙游戏程序进度图像部分代码部分当日记录定位日期小恐龙游戏程序进度图像部分虽然我现在的绘画功底不好,但我可以先描线,先找找绘画空间分配的手感.小恐龙的图像也不用非在网上找,我可 ...

Chrome 里的小恐龙游戏是怎么做出来的？

小恐龙游戏的原理

Chrome 里的小恐龙游戏是怎么做出来的？相关推荐

最新文章

热门文章