JS实现FlyBird

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

1.环境和工具

windows10

WebStrom2018.1.4

测试直接用的webstrom里面的

2.运行截图

JS实现FlyBird_第1张图片

类似于这样,然后分辨率有点小问题,我在这里面直接写死的,不知道为什么用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里面写了一个

你可能感兴趣的:(JS实现FlyBird)