Oyun Engelleri
Kırmızı kareyi hareket ettirmek için düğmelere basın:
Bazı Engeller Ekleyin
Şimdi oyunumuza bazı engeller eklemek istiyoruz.
Oyun alanına yeni bir bileşen ekleyin. Yeşil, 10 piksel genişliğinde, 200 piksel yüksekliğinde yapın ve 300 piksel sağa ve 120 piksel aşağı yerleştirin.
Ayrıca her karede engel bileşenini güncelleyin:
Örnek
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();
}
Engeli Vur = Oyun Bitti
Yukarıdaki örnekte, engele çarptığınızda hiçbir şey olmuyor. Bir oyunda, bu çok tatmin edici değil.
Kırmızı karemizin engele çarptığını nasıl anlarız?
Bileşen oluşturucuda, bileşenin başka bir bileşenle çöküp çökmediğini kontrol eden yeni bir yöntem oluşturun. Bu yöntem, çerçeveler her güncellendiğinde, saniyede 50 kez çağrılmalıdır.
Ayrıca nesneye 20 milisaniye aralığını temizleyen bir stop()yöntem ekleyin.myGameArea
Örnek
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();
}
}
Hareketli Engel
Engel, statik olduğunda hiçbir tehlikesi yoktur, bu yüzden hareket etmesini istiyoruz.
myObstacle.xHer güncellemede özellik değerini değiştirin :
Örnek
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
Çoklu Engeller
Birden fazla engel eklemeye ne dersiniz?
Bunun için kareleri saymak için bir özelliğe ve belirli bir kare hızında bir şeyi yürütmek için bir yönteme ihtiyacımız var.
Örnek
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;
}
Geçerli çerçeve numarası verilen aralığa karşılık geliyorsa, her aralık işlevi true değerini döndürür.
Birden çok engeli tanımlamak için önce engel değişkenini bir dizi olarak tanımlayın.
İkinci olarak updateGameArea fonksiyonunda bazı değişiklikler yapmamız gerekiyor.
Örnek
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();
}
Fonksiyonda , updateGameAreabir çarpışma olup olmadığını görmek için her engelin üzerinden geçmeliyiz. Bir çökme olursa updateGameAreafonksiyon durur ve daha fazla çizim yapılmaz.
İşlev updateGameArea, kareleri sayar ve her 150. kare için bir engel ekler.
Rastgele Boyutun Engelleri
Oyunu biraz daha zor ve eğlenceli hale getirmek için rastgele boyutlarda engeller göndereceğiz, böylece kırmızı kare çökmemek için yukarı ve aşağı hareket etmelidir.
Örnek
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();
}