窃取JavaScript以获取乐趣和收益：第二部分

在本系列的第一部分，你学到了足够的JavaScript和CSS，使周围浏览器中的动画角色的举动。 在这篇文章中，我将探讨一些电脑游戏技术，使我们的动画精灵多，也让他们互相交流。

如果您想在家里这段代码做实验，随意下载代码归档这篇文章 。

循环回路

在以前的文章中显示的演示了一个简单的计时器，触发了两次第二; 这种移动的背景图形的位置，使我们的动画精灵。 这个计时器是什么游戏开发人员调用循环，使事情发生。 显然，我们可以给每个精灵，我们在它自己的计时器，但是这可能会导致一些同步问题，当我们开始测试的冲突，我们必须同步所有的游戏对象。

首先，我们需要一个控对象将管理我们的循环。 在该示例中，对象被调用GameCanvas 。 除了主要的计时器，这个对象将负责管理游戏画面，以及手柄之类的东西得分上一个完整的游戏。 对于一个示例游戏循环的基本代码将如下：

 var GameCanvas = Class.create({ 

   sprites: null, 

   loopTimer: null, 


   initialize: function(element) { 

     this.sprites = new Array();  

     this.element = $(element); 

     this.start(); 

  }, 

  

  loop: function() { 

    this.checkCollisions(); 

    for(var i = 0; i < this.sprites.length; i++) { 

      sprite = this.sprites[i]; 

      sprite.render(); 

    }  

  }, 

  

  checkCollisions: function() { 

    // This will be implemented soon. 

  },  

  

  start: function() { 

    this.loopTimer = setInterval(this.loop.bind(this), 1); 

  } 

}); 

基本上，循环运行的checkCollisions功能，我们将在不久左右交谈。 然后，它遍历精灵阵列，并呼吁每个精灵的渲染功能。 你们有些人可能已经注意到， loopTimer触发每秒1000次，其中，如果JavaScript是线程，会导致一切真的快速运行。 正如我所提到的前一篇文章中，JavaScript是不带螺纹的，所以在循环中的代码将有效地阻止执行，直到它完成，推出比我们要求较长的延迟。 我们的时间间隔设置为1，尽快确保代码运行。

时间带出的数学

我已经举行了足够长的时间。 不幸的是，你可能不得不退出的几何和三角学书为下一个任务：碰撞引擎。 这样做是为了检查是否有重叠屏幕上的精灵; 如果是这样，我们有一个碰撞。 发生这种情况时，我们可以运行一些代码来解决这一问题。 这可能包括从在其电流方向进一步移动，开始动画序列，或者完全去除精灵停止精灵。

我们来看看该系统是基于矩形元素，因为大多数我们正在使用的精灵是矩形。 如果我们知道这两个元素的坐标，我们可以很容易地计算出如何远离他们彼此。 我们通过检查两个精灵的中心距离小于一半的宽度和每个精灵的不到一半的高度的总和做到这一点。

赦免？ 我觉得需要一个图来使这更容易理解：

碰撞检测的伪代码：

  distance_x = absolute_value_of(centre_x_coordinate_of_obj_1 - centre_x_coordinate_of_obj_2) 

 distance_y = absolute_value_of(centre_y_coordinate_of_obj_1 - centre_y_coordinate_of_obj_2) 


 if(distance_x is <= width_of_obj_1 / 2 + width_of_obj_2 / 2 and distance_y <= height_of_obj_1 / 2 + height_of_obj_2 / 2) 

   // Collision! 

 } 

所以，这个公式可以让我们知道，如果有冲突，但我们真的需要知道的方向为好。 这是因为，将在其顶部碰撞要执行的动作可能需要从左碰撞不同。 对于那些你们谁记得矢量运算，你就会知道，如果我们减去两个向量，我们可以得到一个幅度（或距离）和角度; 这正是我们需要的。 该vector.js文件包含将使我们能够执行一些基本的矢量运算，包括转换到极坐标，当我们需要在以后工作了某些角度看，这将成为重要的类。

该Math.atan2功能会给我们需要的角度值。 这也被称为的反正切，其中， 根据所述的Mozilla参考：

这是逆时针角度，以弧度测量的正x轴之间，和点（X，Y）。

如果我们有表示两个子画面的中心点的两个向量，我们减去一个从另一个用于表示从所述两个中心点位移的单个载体。 一旦你已经确定，弧度计算的角度是一个简单的问题：

 angle = Math.atan2(vector.y, vector.x); 

对于那些谁不记得如何从弧度通过PI转换为度，你多180和鸿沟。 为了执行由180乘反向您可以通过PI和分裂，所以：

 degrees = radians * 180 / pi 

radians = degrees * pi / 180 

如果我们分裂每个精灵（好像他们是广场）到宿舍的每个角落，像我们的三明治切成学校，我们对每个方向发展。

学位	碰撞的方向
45-135度	最佳
135-225度	剩下
225-315度	底部
315-45度	对

所述collision_engine.js文件包含CollisionEngine用于检查碰撞条件，并确定碰撞的角度类。 有一个基地CollisionEngine类和两个子类： SquareCollisionEngine和CircleCollisionEngine 。 这些有不同的方式来计算的中心坐标和碰撞角度对不同形状的精灵。

这可能是一个很好的时间来解释这个系统的功能。 每个精灵都有一些自定义事件处理程序： onTopCollision ， onRightCollision ， onBottomCollision和onLeftCollision 。 如果你通过代码，你会发现， CharacterSprite发生碰撞引擎，不会做任何事情！ 其结果是，它依赖于周围的对象发送它的碰撞事件。 这听起来可能在第一次反直觉的，但如果我们看看算算，这是有道理的。 下面是说明该问题的图：

正如你所看到的，如果精灵的大小不同，角度会，除非我们翻转它周围报告错误的方向。

这是很难解释矢量数学的所有复杂这样的一篇文章中，所以如果你有兴趣，并希望做一些进一步阅读，有一个名为“伟大的教程矢量数学三维计算机图形学 “。

我们已经做了数学，现在的一些物理

在web开发工作，我希望避免物理只要有可能，但偶尔也派上用场了。 如果我们正在围绕着屏幕，跳跃的字符和下降会使事情看起来更逼真一点 - 这里的地方物理学可以帮助我们。 给定一个恒定加速度（重力），初始速度，以及时间单元，可以计算出一个最终速度。

 final_velocity = initial_velocity - gravity * time 

我们可以通过设置时间为值1（任意时间单元）简化公式：

 final_velocity = initial_velocity - gravity 

在游戏中，速度数字变成添加到精灵的当前y坐标来计算新的y坐标量。 我们还需要包括方向的值1,0或-1取决于是否sprite时向上移动，静止的，​​或向下移动。 初始速度被此方向值相乘。 对于循环的每个周期我们就可以绘制在y轴上精灵的新位置。

如果你认为的马里奥精灵如何跳这会更清楚。 如果子画面跳转，速度图形被初始设置为一个高的号码，然后逐渐减小; 这意味着，量子画面沿y轴线移动通过重力常数减少每个周期。 从外观上看，精灵似乎有所放缓，因为它接近其跳跃的顶点。 当速度达到0时，跳跃的顶部已经到达其方向是相反的。 在相反方向上，从子画面的Y扣除量坐标与每个周期的增加，模拟加速作为子画面下降。 与其他合适的精灵底部发生碰撞，像砖头例如，将立即停止下跌。

所有的物理代码可以在sprite.js各种精灵类中找到。 有一个很好看的CharacterSprite类和渲染功能，看看如何马里奥精灵移动。

滚动屏幕

最后一部分的游戏滚动窗口。 我们有一个通过平铺从左至右的背景图像。 事实上，整个“水平”是在6,000px宽。 为了得到侧涡影响，我们需要使用window.scrollTo JavaScript函数居中屏幕周围的精灵。 简单地说，我们检查了精灵的当前x值，并设置滚动条到这个值，再加上半个屏幕宽度：

  window.scrollTo(this.getX() - (window.innerWidth / 2), 0); 

当我第一次使用这种技术，还有在屏幕上闪烁可怕。 我跟踪它回到左，右箭头键射击事件，造成屏幕滚动这是有道理的; 可惜是滚动的方式不对！ 幸运的是，有一个简单的办法：只需捕获事件，并忽略它。 不幸的是，我无法工作，如何动态地应用事件监听器，所以我不得不这样做旧学校的方式。 不要恨我。

  <script type="text/javascript"> 

 function stopScroll(e) { 

   keynum = window.event ? e.keyCode : e.which; 

   return keynum != Event.KEY_LEFT && keynum != Event.KEY_RIGHT; 

 } 

 </script> 

 <body onkeydown="return stopScroll(event);"> 

嗯，这基本上涵盖在JavaScript构建横向卷轴平台游戏的这个盛大的概述。 我们已经介绍了大量工作，有些是只轻轻带过，但是你现在应该能够去通过完整的源代码，并了解发生了什么事情。 我们已经看到了动画，游戏圈，一个基本的碰撞引擎和物理引擎，以及一些浏览器的技巧，让一切举动顺利。 所以你现在的挑战是采取代码，使自己的80年代风格的滚屏游戏。

在此期间，去和玩游戏 。 需要注意的是，尽管原型做熨平浏览器不兼容的一个合理的工作，它不能保证在所有浏览器正常工作。 我能说什么 - 你不能赢得他们所有。 欢迎来到最前沿！

From: https://www.sitepoint.com//javascript-fun-profit-part-2/