谷歌浏览器小恐龙游戏代码,chrome小恐龙源代码
给谷歌Chrome浏览器加了个有趣的彩蛋。本文详细介绍了用Vue实现Chrome恐龙游戏的示例代码，具有一定的参考价值。有兴趣的可以看看。
目录
前言再现图片动画效果道路动画障碍动画恐龙动画响应事件碰撞检测部署总结
前言
几年前，谷歌在Chrome浏览器中加入了一个有趣的彩蛋：如果你在没有连接互联网的情况下访问一个网页，你会在一只像素恐龙旁边看到“无法连接互联网”或“没有互联网”的提示。
很多人可能会认为这只恐龙只是一个在断网时陪伴用户的可爱小图标。但是后来有人按了空格键，小恐龙就开始跑了！
这只可爱的小恐龙是设计师塞巴斯蒂安加布里埃尔的作品。他在接受采访时表示，感觉没有wifi的时代就像史前时代，很多人已经忘记了只能在公司、学校或者网吧上网的时代，所以他以史前代表3354恐龙为图标断网。
本文的主要内容是如何用Vue实现这个小彩蛋游戏。感兴趣的同学可以直接看效果：游戏地址。
复刻画面
首先，我们把这个小游戏的风格摆出来。可以看出，它主要包括以下几个要素
恐龙路云障碍积分主要就是这些内容，我们可以通过css放到合适的位置。
动画效果
路面动画
在初步重新雕刻了小游戏的图片后，我们需要移动图片。我们可以看到，其实在游戏过程中，小恐龙并不是在水平方向移动，而是道路一直在移动，看起来小恐龙也在移动，所以我们需要给道路添加动画效果。
获取roadStyle() {
return { transform:` translate x($ { this . road translate } px)` }；
}
startGamerInterval() {
clear interval(this . timer)；
this.timer=setInterval(()={
if(this . GameStatus===GameStatus。跑步){
this . updategamestatus()；
}
}, 100);
}
updateGameStatus() {
if (this.roadTranslate=-600) {
this . road translate=0；
}
this.roadTranslate -=GameConfig。道路速度；
//.
}
可以看出，主要是通过setInterval启动一个定时任务，然后在里面修改roadTranslate。
障碍物动画
坚硬的物体也会随着路面水平移动。这部分和路面的动画部分基本相同。不同的是障碍物中可能有一棵树或者多棵树，实际上是通过精灵贴图和背景-位置来实现的。通过精灵贴图，可以有效的减少切割图像的数量。
updateGameStatus() {
this . tree items . foreach((item)={
if(item . treetranlatex 0){
const isBigTree=GetRandomNum(0，100) % 2？真：假；
const itemWidth=isBigTree？25 : 17;
const itemHeight=isBigTree？50 : 35;
const itemCount=GetRandomNum(1，3)；
const offset position=GetRandomNum(0，2)；
item . treetrantranslatex=GetRandomNum(600，1200)；
item.isBigTree=isBigTree
item . width=item width * item count；
item.height=itemHeight
item . background position=-item width * offset position；
}否则{
item . treetranlatex-=game config。树_速度；
}
});
}
也是在updateGameStatus中定期修改障碍物的treeTranslateX。不同的是障碍物的宽度和背景位置需要用随机树来设置。
同时，当treeTranslateX为0时，表示障碍物已经通过，需要重置状态。
恐龙动画
除了移动的道路背景，为了让恐龙看起来移动，我们还需要给恐龙添加动画效果。其实通过切换画面，恐龙看起来是在跑，这也是雪碧实现的。
另外，当我们按下空格键的时候，恐龙需要做一个跳跃的动画。
updateGameStatus() {
if (this.rexItem.isInJump) {
//跳转动画
this . rex item . rex translate y-=this . rex item . rex velocity；
if(this . rex item . rex translate y=-game config。REX_MAX_JUMP) {
this . rex item . rex velocity=-game config。雷克斯_速度；
} else if(this . rex item . rex translate y=0){
this . rex item . isin jump=false；
this . rex item . rex translate y=0；
this . rex item . rex velocity=0；
}
}否则{
//跳转动画
if(this . rex item . rexbackgroundposition=-220){
this . rex item . rexbackgroundposition=0；
}否则{
this . rex item . rexbackgroundposition-=44；
}
}
}
如上，主要是奔跑和跳跃动画，其中跳跃动画需要在达到最大高度后修改速度的方向。
响应事件
在这个小游戏中，我们还需要响应键盘事件。
游戏未开始时，按空格键开始游戏，按空格键跳跃，再按空格键重启创建的(){
window.addEventListener(keyup ，this . submit)；
}
提交(事件：键盘事件){
if (event.code===Space) {
如果(
this.gameStatus===GameStatus。等待
this.gameStatus===GameStatus。结束
) {
这个游戏状态=游戏状态。跑步；
this . init game()；
this . start game()；
} else if(this . GameStatus===GameStatus。跑步){
if(this . rex item . rex translate y===0){
if(this . rex item . is injump===false){
this . rex item . isin jump=true；
this . rex item . rex velocity=game config。雷克斯_速度；
}
}
}
}
}
碰撞检测
在图片被复制并使其移动后，接下来要做的就是检测恐龙与障碍物的碰撞，实际上就是确定两个矩形是否相交。我们可以判断不重叠的情况，然后反过来。
iso overlap(Rect 1:Rect，rect2: Rect) {
const startx 1=rect 1 . x；
const start 1=rect 1 . y；
const endx 1=startx 1 rect 1 . width；
const end 1=start y1 rect 1 . height；
const start x2=rect 2 . x；
const start y2=rect 2 . y；
const end x2=start x2 rect 2 . width；
const end y2=start y2 rect 2 . height；
回归！（
结束2开始1
endY1 startY2
startX1 endX2
startX2 endX1
);
}
部署
通过以上步骤，我们的小游戏基本开发完成，然后部署。没有我们自己的服务器，我们可以使用GitHub页面来部署我们的项目。
我们使用打包的dist目录作为Github页面的根目录，从而实现发布和部署。将Vue项目打包部署到GitHub页面的具体步骤，请参考：将Vue项目打包部署到GitHub页面。
总结
地址：https://github.com/shenzhen2017/vue-rex
游戏地址：shenzhen2017.github.io/vue-rex/
本文关于Vue实现Chrome恐龙游戏的样例代码到此为止。更多关于Vue Chrome恐龙游戏的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。