Menekan tombol untuk memindahkan kotak merah:
Tambahkan Beberapa Hambatan
Sekarang kita ingin menambahkan kendala som untuk permainan kami.
Menambahkan komponen baru ke area game. Membuatnya hijau, 10px lebar, 200px tinggi, dan menempatkannya 300px ke kanan dan 120px bawah.
Juga memperbarui komponen kendala 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();
}
Cobalah sendiri " Hit Kendala The = Game Over
Dalam contoh di atas, tidak ada yang terjadi ketika anda menekan hambatan. Dalam permainan, yang tidak sangat memuaskan.
Bagaimana kita tahu apakah persegi merah kami memukul hambatan?
Menciptakan metode baru dalam konstruktor komponen, yang chekcs jika crash komponen dengan komponen lain. Metode ini harus disebut setiap kali update frame, 50 kali per detik.
Juga menambahkan stop() metode untuk myGameArea objek, yang membersihkan 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();
}
} Cobalah sendiri " Kendala bergerak
Kendala ini tidak ada bahaya saat itu statis, jadi kami ingin bergerak.
Mengubah nilai properti dari myObstacle.x di setiap update:
Contoh
function updateGameArea() {
if
(myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
} Cobalah sendiri " beberapa Hambatan
Bagaimana menambahkan beberapa kendala?
Untuk itu perlu sebuah properti untuk menghitung frame, dan metode untuk mengeksekusi sesuatu pada frame rate yang diberikan.
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 sesuai dengan interval tertentu.
Untuk menentukan beberapa kendala, pertama mendeklarasikan variabel hambatan sebagai array.
Kedua, kita perlu membuat beberapa perubahan dalam 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();
} Cobalah sendiri " Dalam updateGameArea fungsi kita harus loop melalui setiap rintangan untuk melihat apakah ada kecelakaan. Jika ada kecelakaan, yang updateGameArea fungsi akan berhenti, dan tidak ada lagi gambar dilakukan.
The updateGameArea fungsi menghitung frame dan menambahkan kendala bagi setiap frame 150.
Kendala Ukuran Acak
Untuk membuat permainan sedikit lebih sulit, dan menyenangkan, kami akan mengirimkan hambatan dari ukuran acak, sehingga lapangan merah harus bergerak ke atas dan ke bawah untuk 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();
} Cobalah sendiri "