├── bird.png
├── nenchinh.png
├── ongduoi.png
├── ongtren.png
├── index.html
└── main.js
/bird.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simplecodecodesimple/Flappy-Bird/HEAD/bird.png
--------------------------------------------------------------------------------
/nenchinh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simplecodecodesimple/Flappy-Bird/HEAD/nenchinh.png
--------------------------------------------------------------------------------
/ongduoi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simplecodecodesimple/Flappy-Bird/HEAD/ongduoi.png
--------------------------------------------------------------------------------
/ongtren.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simplecodecodesimple/Flappy-Bird/HEAD/ongtren.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 | score: 0
11 |
12 |
13 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | // mình bắt đầu nhé hôm nay mic hư :)
2 | var canvas= document.getElementById('gamezone');
3 | var context= canvas.getContext('2d');
4 | var scoreshow=document.getElementById('score');
5 |
6 | var birdimg= new Image();
7 | var hinhnenchinh=new Image();
8 | var ongtren= new Image();
9 | var ongduoi=new Image();
10 | birdimg.src="images/bird.png";
11 | hinhnenchinh.src="images/nenchinh.png";
12 | ongtren.src="images/ongtren.png";
13 | ongduoi.src="images/ongduoi.png";
14 | // đầu tiên là nạp các hình vô nha các bạn :)
15 | // bước 2 là tạo 1 số biến cần thiết
16 |
17 | var score=0;
18 | var khoangcachhaiong=140; // mình xin phép đặt tên tiếng việt để các bạn dễ hình dung
19 | var khoangcachdenongduoi; // biến này là khoảng cách từ đầu ống trên đến vị trí đầu ống dưới
20 | // tạo ra 1 object chim với tọa độ x y là 1 nữa canvas
21 | var bird={
22 | x: hinhnenchinh.width/5,
23 | y: hinhnenchinh.height/2
24 | }
25 | var ong=[]; //tạo mảng ống để chứa các ống di chuỷen
26 | ong[0]={
27 | x:canvas.width,
28 | y:0 // khởi tạo ống đầu tiên nằm bên phải ngoài cùng và y=0;
29 | }
30 |
31 | //tạo function để chạy trò chơi
32 | function run(){
33 | // load hình ảnh vào
34 | context.drawImage(hinhnenchinh,0,0);
35 | context.drawImage(birdimg,bird.x,bird.y);
36 |
37 | for(var i=0;i= ong[i].x && bird.x <= ong[i].x +ongtren.width
64 | && (bird.y<=ong[i].y+ongtren.height||
65 | bird.y +birdimg.height>= ong[i].y+ khoangcachdenongduoi)
66 | ){
67 | return;
68 | }
69 | }
70 | // ok điều kiện đầu tiên là đụng đất
71 | // các bạn chú ý là tính tọa độ y cộng với độ cao con chim
72 | // điều kiện thứ hai là so sánh vị trí x con chim
73 | // với cái ống
74 | // và cuối cùng là so sánh vị trí y
75 |
76 |
77 |
78 | scoreshow.innerHTML="score: "+score;
79 | // cho bird rơi xuống
80 | bird.y+=3;
81 | requestAnimationFrame(run);
82 | }
83 | //thêm function cho nó bay lên khi nhấn
84 | document.addEventListener("keydown",function(){
85 | bird.y-=60;
86 | })
87 | // ok khá ổn
88 | // các bạn nhớ là tọa độ trên máy tính là ở gốc trên trái đi xuống dưới
89 | // là chiều dương nha
90 | run();
--------------------------------------------------------------------------------