Kháng cự game
- Trang trước Trình điều khiển game
- Trang tiếp theo Điểm số game
Nhấn nút để di chuyển khối đỏ:
Thêm một số vật cản
Hiện tại chúng ta muốn thêm một số vật cản vào trò chơi.
Thêm thành phần mới vào khu vực trò chơi. Đặt màu xanh lá cây, rộng 10 pixel, cao 200 pixel, sau đó đặt nó ở vị trí bên phải 300 pixel, xuống 120 pixel.
Cần cập nhật thành phần vật cản trong mỗi khung hình:
thực thể
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();
}
Va chạm vật cản = Kết thúc trò chơi
Trong ví dụ trên, khi bạn chạm vào vật cản, sẽ không có gì xảy ra. Trong trò chơi, điều này không đáng chấp nhận.
Làm thế nào để chúng ta biết rằng khối đỏ của chúng ta có va chạm với vật cản hay không?
Trong hàm khởi tạo của thành phần, tạo một phương thức mới để kiểm tra thành phần này có va chạm 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ập nhật khung hình, 50 lần mỗi giây.
cần thêm vào myGameArea thêm đối tượng dừng lại() phương thức này sẽ xóa bỏ khoảng cách 20 mili giây.
thực thể
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 vật cản
Vật cản đứng yên không nguy hiểm, vì vậy chúng ta muốn nó di chuyển.
Thay đổi mỗi lần cập nhật myObstacle.x Giá trị thuộc tính:
thực thể
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
}
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
Vật cản đa phần
Thêm nhiều vật cản thế nào?
Để làm điều này, chúng ta cần một thuộc tính để tính toán số khung và một phương pháp thực hiện một số hành động với tần số khung đã cho.
thực thể
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;
}
Nếu số thứ tự khung hiện tại tương ứng với khoảng cách đã cho, hàm everyinterval sẽ trả về true.
Trước tiên, nếu cần định nghĩa nhiều vật cản, hãy khai báo biến vật cản là một mảng.
Thứ hai, chúng ta cần thực hiện một số thay đổi cho hàm updateGameArea.
thực thể
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 updateGameArea trong hàm, chúng ta phải lặp qua mỗi vật cản để kiểm tra có va chạm hay không. Nếu có va chạm, hàm updateGameArea sẽ dừng lại và không vẽ thêm.
updateGameArea hàm đếm khung hình và thêm một vật cản mới mỗi 150 khung hình.
vật cản kích thước ngẫu nhiên
Để tăng độ khó và thú vị của trò chơi, chúng tôi sẽ gửi các vật cản kích thước ngẫu nhiên, để khối đỏ phải di chuyển lên xuống để tránh va chạm.
thực thể
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();
}
- Trang trước Trình điều khiển game
- Trang tiếp theo Điểm số game
