Trở ngại trò chơi
Nhấn các nút để di chuyển hình vuông màu đỏ:
Thêm một số trở ngại
Bây giờ chúng tôi muốn thêm một số chướng ngại vật vào trò chơi của mình.
Thêm một thành phần mới vào khu vực chơi game. Làm cho nó có màu xanh lá cây, rộng 10px, cao 200px và đặt nó cách 300px ở bên phải và 120px xuống dưới.
Đồng thời cập nhật thành phần chướng ngại vật trong mỗi khung hình:
Ví dụ
var myGamePiece;
var myObstacle;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myObstacle = new component(10, 200, "green", 300, 120);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
Hãy tự mình thử » Gặp chướng ngại vật = Trò chơi kết thúc
Trong ví dụ trên, không có gì xảy ra khi bạn gặp chướng ngại vật. Trong một trò chơi, điều đó không thỏa mãn lắm.
Làm thế nào để chúng ta biết liệu hình vuông màu đỏ của chúng ta có gặp chướng ngại vật hay không?
Tạo một phương thức mới trong hàm tạo thành phần để kiểm tra xem thành phần đó có gặp sự cố với thành phần khác hay không. Phương thức này nên được gọi mỗi khi khung cập nhật, 50 lần mỗi giây.
Đồng thời thêm phương thức stop()
vào đối tượng myGameArea
để xóa khoảng thời gian 20 mili giây.
Ví dụ
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);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
} ,
stop : function() {
clearInterval(this.interval);
}
}
function component(width, height, color, x, y) {
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;
}
}
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
Hãy tự mình thử »Chướng ngại vật di chuyển
Chướng ngại vật không nguy hiểm khi nó đứng yên nên chúng ta muốn nó chuyển động.
Thay đổi giá trị thuộc tính của myObstacle.x
mỗi lần cập nhật:
Ví dụ
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
Hãy tự mình thử »Nhiều trở ngại
Làm thế nào về việc thêm nhiều trở ngại?
Để làm được điều đó, chúng ta cần một thuộc tính để đếm khung hình và một phương thức để thực thi một cái gì đó ở tốc độ khung hình nhất định.
Ví dụ
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;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
Hàm Everyinterval trả về true nếu số khung hiện tại tương ứng với khoảng đã cho.
Để xác định nhiều chướng ngại vật, trước tiên hãy khai báo biến chướng ngại vật dưới dạng một mảng.
Thứ hai, chúng ta cần thực hiện một số thay đổi trong hàm updateGameArea.
Ví dụ
var myGamePiece;
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.newPos();
myGamePiece.update();
}
Hãy tự mình thử » Trong hàm updateGameArea
chúng ta phải lặp qua mọi chướng ngại vật để xem có sự cố nào không. Nếu xảy ra sự cố, chức năng updateGameArea
sẽ dừng và không thể vẽ thêm nữa.
Hàm updateGameArea
đếm khung hình và thêm chướng ngại vật cho mỗi khung hình thứ 150.
Chướng ngại vật có kích thước ngẫu nhiên
Để làm cho trò chơi trở nên khó khăn và thú vị hơn một chút, chúng tôi sẽ gửi các chướng ngại vật có kích thước ngẫu nhiên để hình vuông màu đỏ phải di chuyển lên xuống để không bị đổ.
Ví dụ
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
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();
}
myGamePiece.newPos();
myGamePiece.update();
}
Hãy tự mình thử »