江苏龙网

  1. 首页 > 人文 > >

『小熊带你玩科技』KB代码实现3D赛车游戏？2kPlus Jam大赛了解一下，如何用2( 八 )


按下鼠标后 ， 游戏就会开始 ， HUD显示剩余的时间和当前距离 。 在这个条件语句块中 ， 时间也会被更新 ， 因为它只在比赛开始后才会减少 。
在这个庞大的更新函数的最后 ， 它调用「requestAnimationFrame(Update)」来触发下一次更新 。
『小熊带你玩科技』KB代码实现3D赛车游戏？2kPlus Jam大赛了解一下，如何用2
文章图片
if(mousePressed){time=Clamp(time-timeDelta,0,maxTime);//updatetimeDrawText(Math.ceil(time),9);//showtimecontext.textAlign='right';//rightalignmentDrawText(0|position.z/1e3,c.width-9);//showdistance}else{context.textAlign='center';//centeralignmentDrawText('HUEJUMPER',c.width/2);//drawtitletext}
requestAnimationFrame(Update);//kickoffnextframe
}//endofupdatefunction
最后一点代码
我们需要调用一次上面巨大的更新函数 ， 以启动更新循环 。
此外 ， HTML需要一个关闭脚本标签来让所有代码实际运行 。
Update();//kickoffupdateloop
极致压缩
整个游戏的业务逻辑就是如此！以下是用彩色编码将其压缩以显示不同部分后的最终结果 。 完成所有这些工作之后 ， 可以想象 ， 在这样一小段代码中看到我的整个游戏是多么令人满足 。 之后的zip操作通过消除重复的代码将文件大小几乎又减少了一半 。
HTML–Red
函数–Orange
设置–Yellow
玩家更新–Green
背景渲染–Cyan
道路渲染–Purple
对象渲染–Pink
HUD渲染–Brown
『小熊带你玩科技』KB代码实现3D赛车游戏？2kPlus Jam大赛了解一下，如何用2
文章图片
说明
其他方法也可以实现同时提供性能和视觉效果的3D渲染 。 如果我有更多的空间 ， 我更愿意使用像「three.js」这样的WebGLAPI ， 我在我去年制作的游戏《BogusRoads》中就用到了它 。 此外 ， 因为它使用的是「requestAnimationFrame」 ， 所以确实需要一些额外的代码来确保帧速率限制在60fps ， 我将它们添加到了增强版本中 。 我更喜欢使用「requestAnimationFrame」而不是「setInterval」 ， 因为它的渲染结果更平滑 ， 因为它将被垂直同步（让显卡的运算和显示器刷新率一致以稳定输出的画面质量） 。 这段代码的一个主要有点是它的兼容性非常好 ， 可以在任何设备上运行 ， 不过在我那台老旧的iPhone上运行速度有点慢 。
结语
读完本文 ， 希望大家有所收获 。
这个游戏的代码在GPL-3.0开源协议下 ， 在GitHub上已经开源了 ， 你可以在自己的项目中随意使用它 。 该repo还包含2k版本 ， 该版本在发布时仅为2031字节！你也可以加入一些额外的功能如音乐和音效来实现「增强」版本 。 （https://killedbyapixel.itch.io/hue-jumper）
GitHub地址：https://github.com/KilledByAPixel/HueJumper2k
【『小熊带你玩科技』KB代码实现3D赛车游戏？2kPlus Jam大赛了解一下，如何用2】原文链接：http://frankforce.com/?p=7427


推荐阅读


上一篇：【暖特加低氮燃气锅炉】暖特加--燃气锅炉·领跑者

下一篇：「华为荣耀」狙杀荣耀X10！红米K30新版入网：1799元起性价比炸裂！