JS实现FlyBird

放假等毕业还是挺无聊的，正好闲着没事做就学了学JS，也算是重拾吧，照着视频写了一个，然后。。。视频源找不到了

1.环境和工具

windows10

WebStrom2018.1.4

测试直接用的webstrom里面的

2.运行截图

类似于这样，然后分辨率有点小问题，我在这里面直接写死的，不知道为什么用chrom调成iphone7的视图，上面写的分辨率是

但是我在html里面写成这个值的时候在屏幕上显示的只是上面这张图的四分之一左右，而且画面还不完整，不知道为什么，猜测可能是和屏幕的相互对应关系有关系吧。

3.目录树和主要实现思路

先把目录树放上来哈

FlyBird:
│  game.js
│  game.json
│  index.html
│  project.config.json
│  

├─.idea     这个文件里面放的是webstrom里面的配置文件之类的

│  │  misc.xml
│  │  modules.xml
│  │  webStromWorkSpace.iml
│  │  workspace.xml
│  │  
│  └─inspectionProfiles
├─js
│  │  Director.js
│  │  Main.js
│  │  
│  ├─base
│  │      DataStore.js
│  │      Resource.js
│  │      ResourceLoader.js
│  │      Sprite.js
│  │      
│  ├─player
│  │      Birds.js
│  │      Score.js
│  │      StartButton.js
│  │      
│  └─runtime
│          BackGround.js
│          DownPencil.js
│          Land.js
│          Pencil.js
│          UpPencil.js
│          
└─res   这个里面放的是各种资源文件
        background.png
        bgm.mp3
        birds.png
        land.png
        pie_down.png
        pie_up.png

        start_button.png

DataStore类里面有一个map，将需要在其他地方使用的Object都放置在这个map中，有利于统一管理。里面放了各种图片资源(image类型)，甚至new了一个class放进去(像Land,BackGround之类的)，方便在其他地方直接从DataStore里面取出来一样的对象。

因为是彷的微信开发，所以在根目录还有一个game.js文件，其实没有什么用，只有一个作用，就是new一个Main出来。

运行流程是index.html里面写了一个<script src='game.js'>然后game.js new 一个Main，运行Main里面的代码。

Main里面在构造函数中调用ResourceLoader类中的onLoader方法进行资源的预加载，加载完成后会回调Main函数中的onResourceFirstloaded方法，此方法将开始整个游戏的初始化。

init()方法注册鼠标点击事件，并且将铅笔所在的位置提前初始化出来，这时只是数值，还没有转化成真正的铅笔。然后调用Direct类里面的run方法，进行整个游戏图像的绘制过程。

Direct类里面的run方法就是进行各种图像的绘制，像Land，Bird等等

requestAnimationFrame(()=>this.run());

这个方法可以根据浏览器的要求自动进行帧率的设置，也就是自动调节run()方法回调的频率。

所有的需要画出来的对象，像Land，Bird之类的都是继承了一个Sprite基类，这个基类里面有一个draw函数，负责将图像画到屏幕上，通过调用drawImage方式实现，这个方法有很多参数，说一下

这个是webstrom带的自动提示，我懒的找这个函数的api了。。。

好，第1,2个参数是将原始图片从哪开始截取，图片的原点在图像的左上角，右侧和下侧为正。第3,4个参数是截取多少。

第5,6个参数是放在屏幕的那个位置，最后两个参数是屏幕上防止这个图片的位置的大小。如果和这个图片截取的大小不一致的话会对图像进行拉伸处理。

然后以Birds.js为例介绍，其他的都是大同小异。

Birds继承Sprite，其实每一个具体的精灵类的功能只有一个，那就是计算这个精灵的图像要放在哪，然后调用父类的draw方法将图片绘制到屏幕上。Birds的图片其实有三张，就是为了三张图片来回切换时能让其看起来是一个在扇翅膀的小鸟。然后再其中计算了重力加速度，就是对y值的处理，然后通过不停调用draw方法(每次y值不一样)，来实现小鸟的上升下降效果。

Direct类像是Main类的分流吧，帮助Main类计算各种碰撞，方便程序的观看。

4.bug

1.铅笔整个都在屏幕内侧，应该尾部在屏幕之外的

2.然后碰撞函数没写完，也就是说小鸟没办法和铅笔碰撞

3.没有分数统计

完整代码在我的github 

https://github.com/xixihahag/FlyBird