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

Viết game flappy bird bằng HTML
và JavaScript (P.4)
Sau khi đã di chuyển con chim bằng các button được rồi giờ chúng ta sẽ di chuyển
thông qua các phím lên xún trái phải ở keyboard.

Keyboard as Controller
Chúng ta sẽ tạo 1 method trong object myGameArea để kiểm tra nút keyboard được
ấn.
Ta thay đổi trong 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.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
Cập nhật vị trí của chim khi nhấn nút:
Sửa trong updateGameArea:
function updateGameArea() {

myGameArea.clear();
myGamePiece.speedX = 0;


myGamePiece.speedY = 0;
if (myGameArea.key && myGameArea.key
{myGamePiece.speedX = -1; }
if (myGameArea.key && myGameArea.key
{myGamePiece.speedX = 1; }
if (myGameArea.key && myGameArea.key
{myGamePiece.speedY = -1; }
if (myGameArea.key && myGameArea.key
{myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}

== 37)
== 39)
== 38)
== 40)

Refresh lại trang và test kết quả.
Bây giờ chúng ta sẽ thêm các vật cản vào game, trong flappy bird là các ống nước màu
xanh ấy.

Game Obstacles
Việc tạo ra các vật cản cũng tương tự như tạo con chim đỏ, chúng ta chỉ cần thay đổi
các thông số 1 tí.
var myGamePiece;

var myObstacle;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myObstacle = new component(10, 200, "green", 300, 120);
myGameArea.start();
}
Đừng quên cập nhật lại trong updateGameArea():
function updateGameArea() {
myGameArea.clear();
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();


}
Kết quả ta được:

Hit The Obstacle = Game Over
Trong ví dụ trên khi con chim đụng phải vật cản thì không có gì xảy ra, giờ chúng ta sẽ
cài đặt sự kiện khi chim gặp vật cản. Chúng ta sẽ tạo 1 method để check khi 2
component va chạm và 1 method để dừng game.
Các bạn thêm function stop vào myGameArea để dừng game.

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.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
Trong component các bạn thêm đoạn code sau để check 2 component đụng
nhau.
function component(width, height, color, x, y) {


this.gamearea = myGameArea;
this.width = width;
this.height = height;

this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) ||
(myleft > otherright)) {
crash = false;
}
return crash;
}
}

Trong updateGameArea:
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
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();
}
Ta refresh lại page và test kết quả, di chuyển con chim đụng vật cản, con chim sẽ dừng.
Kết thúc bài 4 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á.