VUE，使用物理引擎Box2D设计类愤怒小鸟的击球游戏--基本架构设置

本文链接：https://blog.youkuaiyun.com/tyler_download/article/details/80845762

我们都玩过愤怒的小鸟，该游戏一大特点是，两物体碰撞后，它会模拟现实世界物体碰撞后的反弹效果，因此游戏特别具有体感和逼真感，本节我们利用物理引擎Box2D，制作一个类似愤怒小鸟类型的碰撞游戏。

游戏的基本玩法是，用鼠标点击小球，移动鼠标选择小球的发射方向，松开鼠标按钮后，小球按照鼠标指向的方向发射出去，一旦小球与障碍物碰撞后，它会像现实世界那样反复弹跳，如果一系列碰撞后，小球能停留在木架上，游戏就算过关，基本场景如下：

这里写图片描述

它类似于投篮，选定箭头方向，让小球发射后落入到绿色方块中。这个游戏的开发特点在于，我们充分利用物理引擎的帮助来实现像现实世界中的碰撞效果，如果没有引擎，我们必须自己计算小球各个方向的加速度，摩擦力，碰撞后的相互作用力等，那是非常复杂的。有了物理引擎，我们完全可以把各种复杂的细节交给引擎来控制。

接下来我们开始基本场景的设计，先把以前我们准备好的VUE项目复制一份，并改名为BallShooting,同时把相关开发库，例如createjs,Box2D等放入到static目录下：

这里写图片描述

相关的开发库会附带在云课堂的代码附件里。我们进入到根目录，打开index.html，先把各个要用到的第三方库加载进来，代码修改如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="./static/tweenjs-0.5.1.min.js"></script>
    <script type="text/javascript" src="./static/easeljs-0.7.1.min.js"></script>
    <script type="text/javascript" src="./static/movieclip-0.7.1.min.js"></script>
    <script type="text/javascript" src="./static/Box2dWeb-2.1.a.3.min.js"></script>
    <script type="text/javascript" src="./static/preloadjs-0.4.1.min.js"></script>
    <script type="text/javascript">
      window.createjs = createjs
    </script>
    <t