Hambatan Permainan
Tekan tombol untuk memindahkan kotak merah:
Tambahkan Beberapa Hambatan
Sekarang kami ingin menambahkan beberapa rintangan ke permainan kami.
Tambahkan komponen baru ke area permainan. Jadikan itu hijau, lebar 10px, tinggi 200px, dan tempatkan itu 300px ke kanan dan 120px ke bawah.
Update juga komponen obstacle di setiap frame:
Contoh
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 Obstacle = Game Over
Dalam contoh di atas, tidak ada yang terjadi ketika Anda menabrak rintangan. Dalam sebuah permainan, itu sangat tidak memuaskan.
Bagaimana kita tahu jika kotak merah kita mengenai rintangan?
Buat metode baru di konstruktor komponen, yang memeriksa apakah komponen mogok dengan komponen lain. Metode ini harus dipanggil setiap kali frame diperbarui, 50 kali per detik.
Juga tambahkan stop()metode ke myGameAreaobjek, yang menghapus interval 20 milidetik.
Contoh
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();
}
}
Hambatan Bergerak
Rintangannya tidak berbahaya ketika statis, jadi kami ingin itu bergerak.
Ubah nilai properti myObstacle.xdi setiap pembaruan:
Contoh
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
Banyak Hambatan
Bagaimana kalau menambahkan banyak rintangan?
Untuk itu kita membutuhkan properti untuk menghitung frame, dan metode untuk mengeksekusi sesuatu pada frame rate tertentu.
Contoh
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;
}
Fungsi everyinterval mengembalikan true jika framenumber saat ini sesuai dengan interval yang diberikan.
Untuk mendefinisikan banyak rintangan, pertama-tama nyatakan variabel rintangan sebagai larik.
Kedua, kita perlu membuat beberapa perubahan pada fungsi updateGameArea.
Contoh
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();
}
Dalam updateGameAreafungsi tersebut kita harus melewati setiap rintangan untuk melihat apakah ada crash. Jika terjadi crash, updateGameAreafungsi akan berhenti, dan tidak ada lagi drawing yang dilakukan.
Fungsi updateGameAreamenghitung bingkai dan menambahkan penghalang untuk setiap bingkai ke-150.
Hambatan Ukuran Acak
Untuk membuat permainan sedikit lebih sulit, dan menyenangkan, kami akan mengirimkan rintangan ukuran acak, sehingga kotak merah harus bergerak ke atas dan ke bawah agar tidak crash.
Contoh
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();
}