Trò chơi chướng ngại vật
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 trò chơi. Làm cho nó có màu xanh lục, rộng 10px, cao 200px và đặt nó 300px sang bên phải và 120px xuống.
Đồng thời cập nhật thành phần chướng ngại vật trong mọi khung hình:
Thí 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();
}
Hit The 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 va vào chướng ngại vật. Trong một trò chơi, điều đó không phải là rất hài lòng.
Làm thế nào để chúng ta biết nếu hình vuông màu đỏ của chúng ta chạm vào chướng ngại vật?
Tạo một phương thức mới trong phương thức khởi tạo thành phần, phương thức này sẽ 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 các khung hình cập nhật, 50 lần mỗi giây.
Cũng thêm một stop()phương thức vào myGameAreađối tượng, phương thức này sẽ xóa khoảng thời gian 20 mili giây.
Thí 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();
}
}
Di chuyển chướng ngại vật
Vật cản không gây nguy hiểm khi nó tĩnh, vì vậy chúng tôi muốn nó di chuyển.
Thay đổi giá trị thuộc tính của myObstacle.xmỗi lần cập nhật:
Thí dụ
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
Nhiều chướng ngại vật
Làm thế nào về việc thêm nhiều chướng ngại vật?
Để 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 thứ gì đó ở một tốc độ khung hình nhất định.
Thí 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 thời gian nhất định.
Để 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 chức năng updateGameArea.
Thí 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();
}
Trong updateGameAreachức năng, chúng ta phải vòng qua mọi chướng ngại vật để xem liệu có sự cố hay không. Nếu có sự cố, updateGameAreachức năng sẽ dừng và không vẽ được nữa.
Chức updateGameAreanăng đếm khung hình và thêm một chướng ngại vật cho mỗi khung hình thứ 150.
Các 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, sao cho hình vuông màu đỏ phải di chuyển lên xuống để không bị rơi.
Thí 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();
}