如何通过 JavaScript 编写一个游戏主循环

如何通过 JavaScript 编写一个游戏主循环

“游戏主循环”是一种能够随时间改变状态的用于渲染动画和游戏的技术。它的核心是一个尽可能频繁地运行的方法,来接收用户输入,更新随时间改变的状态,然后绘制当前帧。

在这篇短文中你将了解这些基础技术是如何工作的,并且可以自己制作出基于浏览器的游戏和动画。

JavaScript 中的“游戏主循环”看起来像这样:

requestAnimationFrame 方法请求浏览器在下一次重绘之前尽可能快地调用特定的方法。它是渲染动画专用的 API,但你也可以用 setTimeout 方法设置一个短的超时时间来达到相似的效果。当回调函数开始触发时,requestAnimationFrame 传入一个时间戳作为参数,它包含从窗口加载到现在的毫秒数,等价于 performance.now()

progress 值,或者说每次渲染的时间间隔对于创建流畅的动画是至关重要的。我们通过它来调整 update 方法中的 x 轴和 y 轴的位置,保证动画以稳定的速度运动。

更新位置

我们的第一个动画简单到不行。一个红色的方块向右移动直到碰到画布的边缘,然后回到起始位置。

我们需要存储方块的位置,以及在 update 方法中 x 轴位置的增量。当到达边界时我们可以减掉画布的宽度来让它回到起点。

绘制新一帧

本例使用 <canvas> 元素来渲染图像,不过游戏主循环也可以结合其他输出,比如 HTML 或者 SVG 来使用。

draw 方法简单地渲染游戏世界的当前状态。每一帧我们都要清空画布,然后在state 对象中保存的位置上重新画一个 10px 的红方块。

然后我们就发现它动起来了!

SitePointCodePen 可以查看示例:Game Loop in JavaScript: Basic Movement

注:在这个例子中你可能会注意到画布的大小是通过 CSS 和 HTML 元素的 width, height 属设置的。CSS 样式设置了画布在页面绘画的真实尺寸,而 HTML 属性则设置了画布 API 需要用到的坐标系或者网格的大小。看看 Stack Overflow 上的这个问题来了解更多。

响应用户输入

下面我们要获取键盘输入来控制对象的位置,state.pressedKeys 会追踪用户按下了哪一个键。

我们监听所有的 keydown 和 keyup 事件,并且同步更新 update.pressedKeys。我用 D 键作为向右方向,A 为左,W 为上,S 为下。你可以在这里找到键盘码列表

然后我们就只需要根据按下的键来更新 x轴 和 y轴 的值,并保证对象在边界以内。

现在我们就可以响应用户输入了!

在 SitePoint的 CodePen 可以查看示例:Game Loop in Javascript: Dealing with User Input

行星游戏

既然现在我们已经掌握了基本原理,那么就可以做些更有意思的事了。

做一艘看起来像经典游戏“行星”里的飞船其实一点都不复杂。

state 对象需要额外存储一个向量(一个 x、y 对)用来移动,还要保存一个 rotation 值来标记飞船的方向。

update 方法需要做三件事:

  • 根据左右键更新方向(rotation)
  • 根据上下键和方向更新移动向量(movement)
  • 根据移动向量和画布边界更新对象位置(position)

draw 方法在绘制箭头之前会移动并转动画布的原点。

这就是我们需要重建类似“行星”游戏飞船的所有代码。本例的操作按键和前面那个完全一样(D键向右,A 向左,W向上,S 向下)

在 SitePoint的 CodePen 可以查看示例:Game Loop in JavaScript: Recreating Asteroids

添加行星、子弹和碰撞监测的工作就交给你了~

升级

如果你对本文很感兴趣,那你肯定会喜欢阅读这篇《Mary Rose Cook live-code Space Invaders form scrach》来看一个更复杂的例子。虽然是发表于几年前,但它是一篇介绍开发浏览器游戏的非常棒的文章。

打赏支持我翻译更多好文章,谢谢!

打赏译者

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

1 1 收藏 评论

关于作者:王浩

phper @深圳 个人主页 · 我的文章 · 13 ·  

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部