Viết game flappy bird bằng HTML và javascript (p5)

Viết game flappy bird bằng HTML
và JavaScript (P.5)
Ở bài trước chúng ta đã tạo vật cản và thực hiện stop game khi chim chạm vào thành
công, giờ chúng ta sẽ làm cho các obstacles này chuyển động để tăng độ khó.

Moving Obstacle
Chúng ta sẽ thay đổi tọa độ x của obstacles mỗi lần update:
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX =
-1; }
if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY =
-1; }
if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
myObstacle.update();
}
Refresh lại ta sẽ thấy vật cản di chuyển!

Multiple Obstacles
Phần này khá là khó hiểu nên các bạn chịu khó ngâm cứu kĩ @@.
Chúng ta sẽ tạo thêm 1 obstacles mới mỗi khi game update được 150 frames.
Ta thêm dòng code này vào myGameArea:

var myGameArea = {


canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
Tạo 1 function để tính frame rate:
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
Hàm sẽ trả về true nếu như frameNo bằng 1 số chia hết cho 150 (150, 300,450...) chia
hết kq=1, 1%1==0, các số khác như 1,2,3...10...50...120 sẽ ra số khác 1 và chia % 1 sẽ
!=0.
Giờ ta sẽ thay đổi trong updateGameArea() nếu thỏa điều kiện hàm ở trên thì sẽ push 1
obstacle vào Game, ta sửa code lại như sau:
var myObstacles = [];
function updateGameArea() {
var x, y;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();

myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
y = myGameArea.canvas.height - 200
myObstacles.push(new component(10, 200, "green", x, y));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX =
-1; }
if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }


if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY =
-1; }
if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
Các bạn refresh lại page rồi test kết quả xem giống mình không.

Obstacles of Random Size
Giờ chúng ta sẽ tạo ra nhiều cột xanh đó với kích cỡ khác nhau để tăng độ khó cho
game.
Ta sửa 1 tí trong updateGameArea():
function updateGameArea() {

var x, y;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;


minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height +
gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
minHeight, maxHeight chỉ độ cao của obstacles, minGap, maxGap khoảng cách giữa
hai 2 vật cản để con chim chui qua.
Kết quả ta được:

Game gần hoàn thiện rồi, giờ các bạn đã có thể chơi được rồi đấy :) qua bài kế chúng
ta sẽ cải tiến một số thành phần để game hoàn thiện hơn.
Kết thúc bài 5 tại đây, các bạn không hiểu gì comment ở dưới mình sẽ trả lời sớm nhất
có thể :), không hỏi gì cũng để lại comment để mình có động lực viết tiếp nhá.