├── .gitignore
├── js
    ├── loadImage.js
    ├── birds.js
    ├── land.js
    ├── pipe.js
    ├── util.js
    └── sky.js
├── imgs
    ├── sky.png
    ├── .DS_Store
    ├── birds.png
    ├── bksky.png
    ├── land.png
    ├── bkbirds.png
    ├── bkland.png
    ├── bkpipeUp.png
    ├── pipeDown.png
    ├── pipeUp.png
    └── bkpipeDown.png
├── screenshot.png
├── README.md
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | *.swp
2 | .DS_Store
3 | 
4 | 


--------------------------------------------------------------------------------
/js/loadImage.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Created by Sorzen on 2016/6/26.
3 |  */
4 | 


--------------------------------------------------------------------------------
/imgs/sky.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/imgs/sky.png


--------------------------------------------------------------------------------
/js/birds.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/js/birds.js


--------------------------------------------------------------------------------
/js/land.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/js/land.js


--------------------------------------------------------------------------------
/js/pipe.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/js/pipe.js


--------------------------------------------------------------------------------
/js/util.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/js/util.js


--------------------------------------------------------------------------------
/imgs/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/imgs/.DS_Store


--------------------------------------------------------------------------------
/imgs/birds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/imgs/birds.png


--------------------------------------------------------------------------------
/imgs/bksky.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/imgs/bksky.png


--------------------------------------------------------------------------------
/imgs/land.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/imgs/land.png


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/screenshot.png


--------------------------------------------------------------------------------
/imgs/bkbirds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/imgs/bkbirds.png


--------------------------------------------------------------------------------
/imgs/bkland.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/imgs/bkland.png


--------------------------------------------------------------------------------
/imgs/bkpipeUp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/imgs/bkpipeUp.png


--------------------------------------------------------------------------------
/imgs/pipeDown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/imgs/pipeDown.png


--------------------------------------------------------------------------------
/imgs/pipeUp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/imgs/pipeUp.png


--------------------------------------------------------------------------------
/imgs/bkpipeDown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Soneji/flappy-musk/HEAD/imgs/bkpipeDown.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # flappy-musk 
2 | 
3 | flappy bird, but elon style (all html/static)
4 | 
5 | ## accessible _NOW_ at <https://github.soneji.xyz/flappy-musk/>
6 | 
7 | ## Screenshot
8 | ![screenshot](screenshot.png)


--------------------------------------------------------------------------------
/js/sky.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Sorzen on 2016/6/28.
 3 |  */
 4 | function Sky(pragram){
 5 |     this.options = {
 6 |         frame:0,
 7 |         x:0,
 8 |         y:0
 9 |     }
10 |     extend(this.options,pragram);
11 |     extend(Sky.prototype,{
12 |         draw:function(){
13 |             this.options.ctx.drawImage(this.options.img,this.options.x,this.options.y,this.options.img.width,this.options.img.height);
14 |         }
15 |     })
16 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head lang="en">
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6 |     <title>Flappy Bird</title>
  7 |     <style>
  8 |         #cvs{
  9 |             display: block;
 10 |             margin: 0 auto;
 11 |         }
 12 |         #score{
 13 |             width: 140px;
 14 |             height: 40px;
 15 |             line-height: 40px;
 16 |             /*background-color: red;*/
 17 |             position: absolute;
 18 |             top:30px;
 19 |             right: 320px;
 20 |             text-align: center;
 21 |             font-size: 16px;
 22 |             color: rgba(255, 255, 255, 0.7);
 23 |             font-family: "微软雅黑";
 24 |         }
 25 |     </style>
 26 | </head>
 27 | <body>
 28 | <canvas id="cvs" width="800" height="600" style="border: 1px solid rgba(0,0,0,0);"></canvas>
 29 | <div id="score"></div>
 30 | <script src="./js/util.js"></script>
 31 | <!--<script src="./js/loadImage.js"></script>-->
 32 | <script src="./js/birds.js"></script>
 33 | <script src="./js/pipe.js"></script>
 34 | <script src="./js/sky.js"></script>
 35 | <script src="./js/land.js"></script>
 36 | <script>
 37 | 
 38 |     //    var cvs = document.getElementById("cvs");
 39 |     //    var ctx = cvs.getContext('2d');//设置画笔
 40 |     //
 41 |     //
 42 |     //    var img = new Image();
 43 |     //    var keyCode = 0;
 44 |     //    document.addEventListener("keydown", function (e) {
 45 |     //        console.log(e.keyCode);
 46 |     //        keyCode = e.keyCode;
 47 |     //    })
 48 |     //    var bird = new Bird({
 49 |     //        ctx: ctx,
 50 |     //        img: img,
 51 |     //        frame: 0,
 52 |     //        direction: 0,
 53 |     //        clipX: 0,
 54 |     //        clipY: 0,
 55 |     //        clipW: 52,
 56 |     //        clipH: 45,
 57 |     //        x: 30,
 58 |     //        y: 30,
 59 |     //        width: 52,
 60 |     //        height: 45,
 61 |     //        speedY: 4,
 62 |     //    });
 63 |     //    console.log(bird);
 64 |     //
 65 |     //
 66 |     //    img.addEventListener("load", function () {
 67 |     //        setInterval(function () {
 68 |     //            ctx.clearRect(0, 0, cvs.width, cvs.width);
 69 |     //            bird.draw();
 70 |     //            bird.update();
 71 |     //        }, 1000 / 10)
 72 |     //
 73 |     //        cvs.addEventListener("click", function () {
 74 |     //            bird.options.speedY = -4;
 75 |     //        })
 76 |     //    })
 77 | 
 78 | 
 79 |     (function () {
 80 |         //图片路径
 81 |         var imgsPath = {
 82 |             "birds": "./imgs/birds.png",
 83 |             "land": "./imgs/land.png",
 84 |             "pipeDown": "./imgs/pipeDown.png",
 85 |             "pipeUp": "./imgs/pipeUp.png",
 86 |             "sky": "./imgs/sky.png"
 87 |         };
 88 | 
 89 |         var imgs = {};//用来存放图片
 90 |         var loadImgCount = 0;//加载一张图片加一次
 91 |         for (var key in imgsPath) {
 92 |             var img = new Image();//创建一个图片对象
 93 |             imgs[key] = img;
 94 | //            console.log(imgs);
 95 |             img.addEventListener("load", function () {
 96 |                 loadImgCount++;
 97 | //                console.log(loadImgCount);
 98 |                 if (loadImgCount >= 5) {
 99 |                     console.log("加载图片完毕");
100 |                     main();
101 |                 }
102 |             });
103 |             console.log(loadImgCount);
104 |             img.src = imgsPath[key];
105 |         }
106 | 
107 | 
108 |         function main() {
109 |             var cvs = document.getElementById("cvs");
110 |             var ctx = cvs.getContext('2d');//设置画笔
111 | 
112 |             var sc = document.getElementById("score");
113 |             var score = 0;//记录分数
114 | 
115 | 
116 |             //鸟类
117 |             var bird = new Bird({
118 |                 ctx: ctx,
119 |                 img: imgs["birds"],
120 |                 frame: 0,
121 |                 direction: 0,
122 |                 clipX: 0,
123 |                 clipY: 0,
124 |                 clipW: 52,
125 |                 clipH: 45,
126 |                 x: 0,
127 |                 y: 30,
128 |                 width: 52,
129 |                 height: 45,
130 |                 speedY: 4,
131 |             });
132 | 
133 | //            var i = 0;
134 | //            var pipe = "pipe";
135 | //            console.log(pipe +i);
136 |             //管道
137 | //            var pipe = new Pipe({
138 | //                ctx: ctx,
139 | //                upImg: imgs["pipeUp"],
140 | //                downImg: imgs["pipeDown"],
141 | //                frame: 0,
142 | //                direction: 0,
143 | //                clipX: 0,
144 | //                clipY: 0,
145 | //                clipW: 52,
146 | //                clipH: 45,
147 | //                x: 100,
148 | //                y: 30,
149 | //                width: 52,
150 | //                height: 45,
151 | //                speedY: 4,
152 | //            });
153 |             //管道
154 |             var arr = [];//用于存放管道
155 |             for (var i = 0; i < 6; i++) {
156 |                 arr.push(new Pipe({
157 |                     ctx: ctx,
158 |                     upImg: imgs["pipeUp"],
159 |                     downImg: imgs["pipeDown"],
160 |                     frame: 0,
161 |                     direction: 0,
162 |                     clipX: 0,
163 |                     clipY: 0,
164 |                     clipW: 52,
165 |                     clipH: 45,
166 |                     x: 100 + imgs["pipeUp"].width * 3 * i,//每次渲染时x轴坐标
167 |                     y: 30,
168 |                     width: 52,
169 |                     height: 45,
170 |                     speedX: -2,
171 |                     speedPlus: -0.01
172 |                 }))
173 |             }
174 | //            console.log(arr);
175 | 
176 |             //天空
177 |             var sky = new Sky({
178 |                 ctx: ctx,
179 |                 img: imgs["sky"],
180 |                 frame: 0,
181 |                 x: 0,
182 |                 y: 0
183 |             });
184 | 
185 | //            //大地
186 | //            var land = new Land({
187 | //                ctx:ctx,
188 | //                img:imgs["land"],
189 | //                frame:0,
190 | //                x:0,
191 | //                y:0
192 | //            });
193 | 
194 |             //大地
195 |             var arr2 = [];//用于存放大地
196 |             for (var i = 0; i < 4; i++) {
197 |                 arr2.push(new Land({
198 |                     ctx: ctx,
199 |                     img: imgs["land"],
200 |                     cvs: cvs,
201 |                     frame: 0,
202 |                     x: imgs["land"].width * i,
203 |                     y: 488,
204 |                     speed: -2
205 |                 }));
206 |             }
207 |             var timer = setInterval(function () {
208 |                 ctx.clearRect(0, 0, cvs.width, cvs.width);
209 | 
210 |                 sky.draw();//绘制天空
211 |                 bird.draw();
212 |                 bird.update();
213 |                 for (var i = 0; i < arr.length; i++) {
214 |                     arr[i].draw();//绘制管道
215 |                     arr[i].update();//更新管道图像
216 |                     if ((bird.options.x + bird.options.width / 2) ==arr[i].options.x ) {
217 |                         score++;
218 |                     }
219 |                 }
220 |                 for (var i = 0; i < arr2.length; i++) {
221 |                     arr2[i].draw();//绘制大地
222 |                     arr2[i].update();//更新大地
223 |                 }
224 | 
225 | 
226 | 
227 | //                console.log(ctx.isPointInPath(bird.options.x + bird.options.width / 2, bird.options.y + bird.options.height / 2));
228 | //                console.log(bird.options.x + bird.options.width / 2);
229 | //                console.log((bird.options.x + bird.options.width / 2, bird.options.y + bird.options.height / 2));
230 |                 if (ctx.isPointInPath(bird.options.x + bird.options.width / 2, bird.options.y + bird.options.height / 2)) {//判断鸟的中心点是不是在管道路径上
231 |                     clearInterval(timer);//鸟的中心点在管道路径上就清除定时器
232 |                     console.log(score);//输出分数
233 |                     alert("您的得分为："+score);
234 | 
235 |                 } else if (bird.options.y + bird.options.height / 2 < 0 || bird.options.y + bird.options.height / 2 > 488) {
236 |                     clearInterval(timer);
237 |                     console.log(score);//输出分数
238 |                     alert("您的得分为："+score);
239 | 
240 |                 }
241 |                 sc.innerHTML= "您的得分为："+score;
242 |                 ctx.beginPath();//开始新路径，防止管道路径出现重影
243 |             }, 1000 / 30);
244 | 
245 |             cvs.addEventListener("click", function () {
246 |                 bird.options.speedY = -5;
247 |             });
248 | 
249 |         }
250 | 
251 |     }())
252 | 
253 | 
254 | </script>
255 | </body>
256 | </html>
257 | 


--------------------------------------------------------------------------------