kırmızı kare taşımak için Butonlar:
Bazı engeller ekle
Şimdi bizim oyuna som engelleri eklemek istiyorum.
oyun alanına yeni bir bileşenini ekleyin. o, 10px geniş, yeşil 200px yüksek olun ve aşağı bunu sağa 300px ve 120px 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();
}
Kendin dene " Bir Engeli Hit = Oyun Bitti
Eğer engel vurduğunda Yukarıdaki örnekte, hiçbir şey olmaz. Bir oyunda, o çok tatmin edici değil.
Bizim kırmızı kare engel vurduğunu nasıl biliyoruz?
Bileşen yapıcısı yeni bir yöntem oluşturun olduğunu chekcs başka bileşenle bileşen çöker. Bu yöntem her seferinde çerçeveleri güncellemeleri, saniyede 50 kez çağrılmalıdır.
Ayrıca ekleme stop() yöntemi myGameArea 20 milisaniye aralık temizler nesne.
Ö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();
}
} Kendin dene " hareketli Engel
statikse zaman engel hiçbir tehlike olduğunu, bu yüzden bunun taşımak istiyorum.
Mülkiyet değerini değiştirin myObstacle.x her güncelleme esnasında:
Örnek
function updateGameArea() {
if
(myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
} Kendin dene " Birden Engeller
Nasıl birden engelleri eklemeye ne dersiniz?
Bunun için sayma çerçeveler için bir özellik ve belirli bir kare hızında şey yürütmek için bir yöntem gerekir.
Ö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;
} mevcut framenumber verilen aralık ile aynı olup olmadığını everyinterval işlevi doğru döndürür.
Birden engeller tanımlamak için, ilk olarak bir dizi olarak engel değişkeni bildirin.
İkincisi, biz updateGameArea fonksiyonunda bazı değişiklikler yapmanız gerekir.
Ö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();
} Kendin dene " Gelen updateGameArea bir çarpışma varsa işlevin her engele döngü görmek gerekir. Bir kilitlenme varsa, updateGameArea fonksiyonu durdurur ve artık çizim yapılır.
updateGameArea fonksiyon çerçeveleri sayar ve her 150 çerçeve için bir engel ekler.
Rastgele Boyutu Engeller
kırmızı kare yukarı ve aşağı hareket etmek çökme gerektiğini bu yüzden, rastgele boyutlarda engeller içinde göndereceğiz, oyun biraz daha zor ve eğlenceli yapmak için.
Ö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();
} Kendin dene "