求 谷歌浏览器的小恐龙恐龙小游戏源码

来源：蜘蛛抓取(WebSpider) 时间：2019-06-23 07:17 标签： 谷歌浏览器的小恐龙

教程：用强化学习玩转恐龙跳跳

隱藏在浏览器当中的八项超能力

硬纪元干货|爱奇艺吴霜：看好互动视频、AI陪伴以及VR直播

硬纪元干货|爱奇艺吴霜：看好互动视频、AI陪伴以及VR矗播

《HTML5游戏编程核心技术与实战》——第1章　游戏和HTML5初探1.1 网页游戏和HTML5

如何用算法赋能素材治理和虚假劣质信息say no

基于HTML5的电信网管3D机房监控應用

基于HTML5的WebGL电信网管3D机房监控应用

怎么在谷歌浏览器的小恐龙中安装.crx扩展名的离线Chrome插件？

Chrome 是通向新应用经济的后门

Chrome的恐龙版-超级玛丽彩蛋

使用 React.js 的渐进式 Web 应用程序：第 3 部分 - 离线支持和网络恢复能力

HTML5 不可限量的发展前景

Visual C++】游戏开发笔记之十 基础动画显示（三） 透明动画的实现

使鼡Q-learning算法让Chrome小恐龙自动学习躲避障碍物(示例)

浏览器插件-离线英汉词典 0.0.7

Chrome自带恐龙小游戏的源码研究(一)——绘制地面

　　众所周知Chrome浏览器在网络不通的情况下，会出现一个霸王龙翻越障碍的小游戏： 

　　这个游戏做得小巧精致于是探究了┅下它的源码，发现代码写得相当严谨并且富有技巧性用来学习再好不过了。

　　游戏虽然看起来简单但也有几千行的代码量。主要包括五个构造函数：

  • 游戏逻辑控制函数Runner

　　其余的方法还包含一些对移动设备的适配、针对不同屏幕加载不同的资源 、声音的播放等等這是游戏用到的雪碧图：

　　为方便研究，从简单的背景管理函数开始首先是地面的绘制。地面绘制通过HorizonLine完成： 

25 //在雪碧图中坐标为2和602处汾别为不同的地形
 

 再来看看HorizonLine原型链中的方法：
 
 
 3 //地面在画布上的位置
 9 //返回第一段地形或者第二段地形
37 //同时将第二段地面移动至canvas内
40 //选择随机地形
 

 原型链中的方法实现了地面的运动和随机地形
 
 

 最后测试一下这一段代码：
 
 
 

 
 

 
 
 

 这样地面的绘制及滚动就完成了。

我要回帖

更多关于 谷歌浏览器的小恐龙 的文章

 

随机推荐