Uygulamada,
fonksiyonlar bütünü olan class,
setInterval başlatmak, durdurmak ve devam ettirmek,
addEventListener keydown ve keyup event’leri,
hareket, hedef ve ateş algoritmaları bulunmaktadır.
| aKare: | bKare: | ||
| xKare: | yKare: | ||
| xAtes: | yAtes: | ||
| xHedef: | yHedef: |
Kodu Al
<style type="text/css">
<!--
/* Oyun Uygulaması CSS Başlangıç */
#aIdArtan, #bIdArtan, #xIdKare, #yIdKare, #xIdAtes, #yIdAtes, #xIdHedef, #yIdHedef { float: left; width: 50%; margin-top: 5px; margin-bottom: 5px; margin-left: 8px; background-color: #FFF; }
.IdOyunUygulamaTable { width: 480px; border: 1px solid #FFF; }
/* Oyun Uygulaması CSS Son */
-->
</style>
<table class="IdOyunUygulamaTable">
<tr>
<td style="width: 15%; text-align: center; background-color: #F3F3F3;">aKare:</td>
<td style="width: 35%; background-color: #F3F3F3;"><input id="aIdArtan" type="text" value="" /></td>
<td style="width: 15%; text-align: center; background-color: #F3F3F3;">bKare:</td>
<td style="width: 35%; background-color: #F3F3F3;"><input id="bIdArtan" type="text" value="" /></td>
</tr>
<tr>
<td style="width: 15%; text-align: center; background-color: #FBFBFB;">xKare:</td>
<td style="width: 35%; background-color: #FBFBFB;"><input id="xIdKare" type="text" value="" /></td>
<td style="width: 15%; text-align: center; background-color: #FBFBFB;">yKare:</td>
<td style="width: 35%; background-color: #FBFBFB;"><input id="yIdKare" type="text" value="" /></td>
</tr>
<tr>
<td style="width: 15%; text-align: center; background-color: #F3F3F3;">xAtes:</td>
<td style="width: 35%; background-color: #F3F3F3;"><input id="xIdAtes" type="text" value="" /></td>
<td style="width: 15%; text-align: center; background-color: #F3F3F3;">yAtes:</td>
<td style="width: 35%; background-color: #F3F3F3;"><input id="yIdAtes" type="text" value="" /></td>
</tr>
<tr>
<td style="width: 15%; text-align: center; background-color: #FBFBFB;">xHedef:</td>
<td style="width: 35%; background-color: #FBFBFB;"><input id="xIdHedef" type="text" value="" /></td>
<td style="width: 15%; text-align: center; background-color: #FBFBFB;">yHedef:</td>
<td style="width: 35%; background-color: #FBFBFB;"><input id="yIdHedef" type="text" value="" /></td>
</tr>
</table>
<div id="IdCanvasDiv" style="width: 482px; height: 274px; margin-top: 10px; margin-bottom: 10px;"></div>
<input type="button" id="IdBtnBaslat" value="Başlat"/>
<!-- Dur, Devam Et ve Yeniden Başlat butonları ilk açılışta disabled durumda -->
<input type="button" id="IdBtnDur" disabled="disabled" value="Dur"/>
<input type="button" id="IdBtnDevamEt" disabled="disabled" value="Devam Et"/>
<input type="button" id="IdBtnYenidenBaslat" disabled="disabled" value="Yeniden Başlat"/>
<script type="text/javascript">
var btnBaslat = document.getElementById("IdBtnBaslat");
document.getElementById("IdCanvasDiv").innerHTML = "<br /><center>Lütfen <b>Başlat</b> butonuna tıklayarak uygulamayı başlatın.<br />Hareket etmek için <b>Yön</b> tuşlarını, ateş etmek için <b>Ctrl</b> tuşunu kullanın.</center>";
/* Başlat Butonuna Tıklandı */
btnBaslat.addEventListener("click", function(){
/* Başlat butonuna tıklandıktan sonra Başlat butonu pasif durumda */
btnBaslat.disabled = true;
/* Canvasın yazılacağı div, başlat mesajından sonra temizlenir */
document.getElementById("IdCanvasDiv").innerHTML = "";
/* Aşşağıdaki değişken Class-ın içinde çalışacak canvas fonksiyonuna eşitlenecek.
Değişken, classFonksiyonu() fonksiyonunun dışında ve üst tarafında tanımlanır. */
var classIcindeCanvas;
/* FONKSİYON 1 */
/* Class, içinde fonksiyonların bulunduğu, fonksiyonlar bütünüdür.
Yukarıda tanımlanan değişken, class içinde çalışacak fonksiyona eşitlenir. Fonksiyonun başına new yazılır.
Class içinde çalışacak canvasOlustur() fonksiyonu daha sonra tanımlanacak.
classIcindeCanvas.devamEt() ve classIcindeCanvas.durdur() fonksiyonları, canvasOlustur() fonksiyonu içinde tanımlıdır ve setInterval başlatmak (devam ettirmek) veya durdurmak için kullanılacak.
classFonksiyonu() fonksiyonu, javascript kodlarının en altına classFonksiyonu(); şeklinde yazılarak başlatılır.
*/
function classFonksiyonu(){
classIcindeCanvas = new canvasOlustur();
classIcindeCanvas.devamEt();
classIcindeCanvas.durdur();
}
/* Oyun uygulamasında yeşil karenin hareketini sağlayan değişkenler false değerine eşitlenir.
Ctrl tuşu ateş etmek için kullanılacak.
Değişkenlerin true veya false olma durumları, tuşlara basıldığı veya kaldırıldığı zaman değiştirelecek.
*/
var ileri = false;
var geri = false;
var sag = false;
var sol = false;
var ctrl = false;
/* a ve b değişkenleri yön tuşlarına basıldığı sürece artabilir veya azalabilir. fonkKareHareket() fonksiyonu içinde karenin hareketi için kullanılacak. */
var a = 0;
var b = 0;
/* at değişkeni, fonkAtes() fonksiyonu içinde setInterval ile arttırılacak ve ateş etmek için kullanılacak */
var at = 0;
/* c ve cc değişkenleri, fonkCizgiHareket() fonksiyonu içinde setInterval ile arttırılacak ve canvas-ın sağında ve solunda olan animasyon cizgileri için kullanılacak */
var c = 0;
var cc = 0;
/* s değişkeni, fonkCizgiHareket() fonksiyonu içinde setInterval ile azaltılacak ve uygulamanın çalışma süresi için kullanılacak */
var s = 300;
/* h değişkeni, fonkHedef() fonksiyonu içinde setInterval ile arttırılacak ve hedefin hareketi için kullanılacak */
var h = 0;
/* Aşşağıdaki değişkenler fonkCizgiHareket() fonksiyonu içindeki if koşulunda, hiç bir yön tuşuna basılmadığı zaman uygulamayı bitirmek için kullanılacak */
var y2A; var y2B; var y136A; var y136B; var y250A; var y250B;
/* Karenin hareketini sağlayan a ve b değişkenlerinin yazıldığı ve alındığı input tanımları */
var aInpKare = document.getElementById("aIdArtan");
var bInpKare = document.getElementById("bIdArtan");
/* Karenin sol üst köşe koordinatlarının yazıldığı ve alındığı input tanımları */
var xInpKare = document.getElementById("xIdKare");
var yInpKare = document.getElementById("yIdKare");
/* Kırmızı kare ateşin sol üst köşe koordinatlarının yazıldığı ve alındığı input tanımları */
var xInpAtes = document.getElementById("xIdAtes");
var yInpAtes = document.getElementById("yIdAtes");
/* Mavi kare ateşin sol üst köşe koordinatlarının yazıldığı ve alındığı input tanımları */
var xInpHedef = document.getElementById("xIdHedef");
var yInpHedef = document.getElementById("yIdHedef");
/* İlk açılışta disabled durumda olan Dur, Devam Et ve Yeniden Başlat butonlarının tanımları */
var btnDur = document.getElementById("IdBtnDur");
var btnDevamEt = document.getElementById("IdBtnDevamEt");
var btnYenidenBaslat = document.getElementById("IdBtnYenidenBaslat");
/* Butonlar, Başlat butonuna tıklandıktan sonra aktif durumda ve buton tanımlarının altına yazılmalıdır */
btnDur.disabled = false;
btnDevamEt.disabled = false;
btnYenidenBaslat.disabled = false;
/* Başlangıç için input değerleri yazılır.
Karenin başlangıç pozisyonu, 42 ve 21 için 230 ve 125 değerine gelir. fonkKareHareket() fonksiyonunda anlatılacak */
aInpKare.value = 42;
bInpKare.value = 21;
xInpKare.value = 230;
yInpKare.value = 126;
xInpAtes.value = 0;
yInpAtes.value = 0;
xInpHedef.value = 0;
yInpHedef.value = 0;
/* Ateş, başlangıç koordinatlarını kareden alacak.
Aşağıdaki değişkenler, karenin x ve y koordinat inputlarına eşitlenecek */
var ctrlX;
var ctrlY;
/* Rastgele çıkan hedefin x koordinatı için değişken tanımı. Hedef y koordinatında değişmeyecek. */
var rastHedefX;
/* objeAtes değişkenine tanımlı objenin a elemanı başlangıçta false durumda.
objeAtes.a = true; veya objeAtes.a = false; şeklinde değiştirilecek.
fonkAtes() fonksiyonunda if koşulu içinde ateş edilmesini veya edilmemesini sağlamak için kullanılacak.
fonkIsabet() fonksiyonunda, isabetten sonra ateş hareketini bitirmek için kullanılacak.
*/
var objeAtes = {a:false};
/* objeHedef değişkenine tanımlı objenin a elemanı başlangıçta true durumda.
objeHedef.a = true; veya objeHedef.a = false; şeklinde değiştirilecek.
fonkHedef() fonksiyonunda if koşulu içinde rastgele çıkan hedef için kullanılacak.
fonkIsabet() fonksiyonunda, isabetten sonra yeni bir hedefin çıkması için kullanılacak.
*/
var objeHedef = {a:true};
/* FONKSİYON 2 */
/* Class içindeki canvasOlustur() fonksiyonu */
function canvasOlustur(){
this.tuval = document.createElement("canvas");
this.tuval.width = 480;
this.tuval.height = 272;
this.tuval.style.border = "1px solid grey";
document.getElementById("IdCanvasDiv").appendChild(this.tuval);
this.canvastaGoster = this.tuval.getContext("2d");
this.temizle = function(){
this.canvastaGoster.clearRect(0, 0, this.tuval.width, this.tuval.height);
}
/* FONKSİYON 3 */
/* Class içindeki classIcindeCanvas.devamEt() fonksiyonu canvas fonksiyonu içinde tanımlıdır. */
this.devamEt = function(){
/* FONKSİYON 4 */
/* setInterval fonkGuncelle() fonksiyonu 100 ms değeri için saniyede 10 kere çalışır.
100 ms değeri azaltılarak uygulama hızlandırılabilir.
Hızlandırılır ise
s = 300 değişkeni arttırılmalı, 5*a ve 5*b için 5 değeri azaltılmalıdır.
fonkHedef() fonksiyonu içindeki var artY = h; değişkeni, h/2 şeklinde kullanılabilir.
fonkGuncelle() fonksiyonu aşşağıda tanımlanacak ve içinde fonkKareHareket(), fonkHedef(), fonkAtes(), fonkIsabet() ve fonkCizgiHareket() fonksiyonları olacak. İçindeki fonksiyonlar, 4-1, 4-2 şeklinde yazılacak.
*/
this.saniyedeCalismaSayisi = setInterval(fonkGuncelle, 100);
}
/* FONKSİYON 5 */
/* Class içindeki classIcindeCanvas.durdur() fonksiyonu canvas fonksiyonu içinde tanımlıdır. */
this.durdur = function(){
this.stop = function(){ clearInterval(this.saniyedeCalismaSayisi); }
}
} /* FONKSİYON 2 SON */
/* FONKSİYON 6 */
/* fonkTusBas fonksiyonu */
/* Tuş kodları: 37 sol yön tuşu, 38 yukarı yön tuşu, 39 sağ yön tuşu, 40 aşşağı yön tuşu, 17 ctrl tuşunun tuş kodudur. */
/* keydown eventi bir tuşa basıldığı sürece yapılan işlemler içindir. */
document.addEventListener("keydown", fonkTusBas, false);
function fonkTusBas(e){
var tus = e.keyCode;
/* Ateş bitmeden yeni ateş edilememesi için ctrl tuşuna basıldığı zaman işlem yapmaz. */
/* Ateş inputunun y değeri ateş edildiği sürece pozitiftir. Ctrl tuşuna basılıyor ve input pozitif ise */
if(tus === 17 && yInpAtes.value > 0){ return false; }
/* Başlangıçta tanımlanan ileri değişkeninin false değeri, tuşa basıldığı sürece true olur. */
if(tus === 38){ ileri = true; }
if(tus === 40){ geri = true; }
if(tus === 37){ sol = true; }
if(tus === 39){ sag = true; }
/* Başlangıçta tanımlanan ctrl değişkeninin false değeri, tuşa basıldığı sürece yine false olur. */
if(tus === 17){ ctrl = false; }
}
/* FONKSİYON 7 */
/* fonkTusKaldir fonksiyonu */
/* keyup eventi bir tuştan elin kaldırıldığı anda yapılan işlemler içindir. */
document.addEventListener("keyup", fonkTusKaldir, false);
function fonkTusKaldir(e){
var tus = e.keyCode;
/* Yukarıdaki if koşulunun aynısı buraya da yazılır. Ateş, ctrl tuşundan el kaldırıldığı zaman yapılır. */
if(tus === 17 && yInpAtes.value > 0){ return false; }
/* Tuşa basıldığı sürece true olan ileri değişkeni, el tuştan kaldırıldığında false olur. */
if(tus === 38){ ileri = false; }
if(tus === 40){ geri = false; }
if(tus === 37){ sol = false; }
if(tus === 39){ sag = false; }
/* Başlangıçta tanımlanan ctrl değişkeninin false değeri, el tuştan kaldırıldığında true olur ve ateş edilir. */
if(tus === 17){
ctrl = true;
/* Ateş başlangıç koordinatlarını Kareden, el ctrl tuşundan kaldırıldığında alır. */
ctrlX = xInpKare.value;
ctrlY = yInpKare.value;
/* Başlangıçta false olan objenin a elemanı, el ctrl tuşundan kaldırıldığında true olur.
fonkAtes() fonksiyonunda if koşulunda kullanılacak. */
objeAtes.a = true;
}
}
/* FONKSİYON 4 - 1 */
/* Yeşil Kare Hareket Fonksiyonu */
function fonkKareHareket(){
/* x ve y değişkenleri bu fonksiyon içinde tanımlı olduğundan, tanımlı oldukları bu fonksiyon içinde çalışır.
Diğer fonksiyonlardaki x ve y değişkenleri tanımlı oldukları fonksiyon içinde çalışır.
Bu fonksiyondaki x ve y değişkenleri ile diğer fonksiyonlardaki x ve y değişkenleri birbirleri ile alakalı değildir.
*/
/* a değişkeni sağ veya sol yön tuşlarına basıldığı sürece azalır veya artar.
a değişkeninin artan veya azalan değeri, aInpKare inputuna aşşağıdaki if koşulunda yazılacak.
İnputa yazılan a değişkeni yine kendine eşitlenir. Arttırılır, yazılır, alınır, arttırılır, yazılır alınır.
Başlangıçtaki değeri aInpKare.value = 42 dir. 42, 43 yapılır ve 43 yazılır. 43 alınır. 43, 44 yapılır ve yazılır. 44 alınır...
*/
a = aInpKare.value;
/* b değişkeni yukarı veya aşşağı tuşlarına basıldığı sürece azalır veya artar. */
b = bInpKare.value;
/* x ve y değişkenleri, Karenin sol üst köşe koordinatlarına eşitlenir. */
var x = xInpKare.value;
var y = yInpKare.value;
/* Kare canvasın soluna ve yukarısına girmez */
if(x <= 20){ x = 20; a = 0; }
if(y <= 20){ y = 20; b = 0; }
/* Kare canvasın sağına ve aşşağısına girmez
Karenin sol üst köşe koordinatları, a ve b değişkenlerinin 5 katının 20 fazlasıdır.
20 fazla canvas ile kare arasındaki boşluk içindir. (aşşağıda if koşullarında)
84 . 5 = 420 ve 420 + 20 = 440 ve 440 + 40 = 480
43 . 5 = 215 ve 215 + 20 = 235 ve 235 + 40 = 275
Karenin 1 kenarı 20 ve 20 sağ boşluk için toplam değer 40 tır.
*/
if(x >= classIcindeCanvas.tuval.width - 40){ x = classIcindeCanvas.tuval.width - 40; a = 84; }
if(y >= classIcindeCanvas.tuval.height - 40){ y = classIcindeCanvas.tuval.height - 40; b = 43; }
/* ctx, renk, genişlik, yükseklik ve inputtan alınan x ve y değerleri ile Kare çizilir. */
var ctx = classIcindeCanvas.canvastaGoster;
ctx.fillStyle = "Green";
var genislik = 20;
var yukseklik = 20;
ctx.fillRect(x, y, genislik, yukseklik);
/* ileri değişkeni true ise (yukarı yön tuşuna basıldığı sürece )
b değişkeni azaltılır. Azaltılan değer, bInpKare inputuna yazılır.
Yukarıda yazılan değerin tekrar alındığından bahsedilmişti.
b değişkeninin değeri, 5 ile çarpılır ve 20 ile toplanır.
Sonuç, yInpKare inputuna yazılır. Bu input yukarıda y değişkenine eşitlenmişti.
y değişkeni azaldıkça Kare yukarı yönde yeniden çizilir ve yukarı yönde bir hareket oluşur.
Çizilen önceki Kare, fonkGuncelle() fonksiyonu içindeki, classIcindeCanvas.temizle() fonksiyonu ile 100 ms için saniyede 10 kere temizlenir.
El kaldırıldığı anda b değişkeninin son değeri kalır ve hareket durur.
*/
if(ileri == true){
b--;
bInpKare.value = b;
yInpKare.value = 20+5*b;
}
if(geri == true){
b++;
bInpKare.value = b;
yInpKare.value = 20+5*b;
}
if(sag == true){
a++;
aInpKare.value = a;
xInpKare.value = 20+5*a;
}
if(sol == true){
a--;
aInpKare.value = a;
xInpKare.value = 20+5*a;
}
}
/* FONKSİYON 4 - 2 */
/* Kırmızı Kare Ateş İçin Hareket Fonksiyonu */
function fonkAtes(){
var ctx = classIcindeCanvas.canvastaGoster;
ctx.font = "16px serif";
ctx.fillStyle = "#900";
/* xAtes ve yAtes değişkenleri, xInpAtes.value ve yInpAtes.value inputlarına eşitlenir.
xInpAtes ve yInpAtes inputlarına yazılan değerler, bu fonksiyonun en altındaki x+8.5 ve y-ates değerleridir.
ates değişkeni if koşulunda tanımlanacak.
İnputtaki değerler, alınır, değiştirilir ve tekrar yazılır. Bu işlem saniyede 10 kere yapılır.
*/
var xAtes = xInpAtes.value;
var yAtes = yInpAtes.value;
/* x ve y değişkenleri, el ctrl tuşundan kaldırıldığında Yeşil Kareden alınan başlangıç koordinatlarına eşitlenir.
Eşitlenen değerler, el kaldırıldığı anda alındığından sabittir ve Yeşil Kare hareket ettiğinde değişmez.
*/
var x = ctrlX;
var y = ctrlY;
/* Aşşağıda yapılan x+8.5 işlemi için x, sayı değişkeni number yapılmalıdır. */
x = Math.pow(x, 1);
var genislik = 3;
var yukseklik = 3;
/* El crtl tuşundan kaldırıldığında, ctrl tuşu ve başlangıçtaki değeri false olan objeAtes.a değeri true yapılmıştı. */
if(ctrl == true && objeAtes.a == true){
/* El ctrl tuşundan kaldırılmış ise 100 ms için at değişkeni saniyede 10 artar.
Ateş, el ctrl tuşundan kaldırıldığı sürece hareket edecektir.
Ateş bitmeden, ikinci ateş edilirse, Yeşil Kareden yeni koordinatlar alınır ve sabit koordinatlar değişir.
Bu yüzden ctrl tuşuna basıldığı zaman işlem yaptırılmadığından daha önce bahsedilmişti.
*/
at++;
/* ates değişkeni 6 ile çarpılan at değişkenine eşitlenir. */
var ates = at*6;
/* x, y, genislik ve yukseklik değerleri için Ateş çizilir. */
/* Saniyede 60 artan ates değişkeni, Yeşil Kareden alınan y değişkeninden çıkarılır. */
/* Ateşin y koordinatı saniyede 60 azalıyor ise, Yeşil Kareden yukarı doğru bir hareket oluşur. */
/* Yeşil Kareden alınan x değişkeni 8.5 ile toplanır. Ateş, yeşil karenin ortasından edilir. 8.5 + 8.5 + 3 = 20 */
ctx.fillRect(x+8.5, y-ates, genislik, yukseklik);
}
/* Ateşin y koordinatı, sıfırdan küçük eşit ise
(canvasın yukarısından görünmez olmuş ve ateş bitmiş ise)
at değişkeni, en başındaki değeri olan sıfıra eşitlenir.
Objenin a elemanı en başındaki değeri olan false yapılır ve if içinde artan at değişkeninin artışı durdurulur.
Objenin a elemanı, el ctrl tuşundan kaldırıldığında tekrar true olacak ve yeni Ateş edilebilecektir.
Ctrl tuşu, tuşa basıldığında false olacak, tuştan kaldırıldığında tekrar true olacak ve yeni Ateş edilebilecektir.
Ctrl tuşuna işlem yaptırmayan yInpAtes.value değeri, yAtes değişkenidir.
*/
if(yAtes <= 0){
at = 0;
objeAtes.a = false;
}
/* İnputlara yazılan değerlerin, xAtes ve yAtes değişkenlerine eşitlendiğinden yukarıda bahsedilmişti.
Fonksiyon ilk çalıştığında:
xInpAtes.value ve yInpAtes.value inputlarının değerleri, en baştaki değerleri olan sıfıra eşit ise
xAtes ve yAtes değişkenlerinin değerleri sıfırdır.
Fonksiyon ilk çalışmasını bitirdiğinde inputlara yeni değerleri yazılır.
Yazılan değerler, ikinci çalışmasında kullanılır ve yeni değerleri tekrar yazılır.
Örneğin yAtes değişkeni için, fonksiyon her çalıştığında, 0 dan küçük eşit olup olmadığı kontrolü yapılır.
*/
xInpAtes.value = x+8.5;
yInpAtes.value = y-ates;
}
/* FONKSİYON 4 - 3 */
/* Mavi Kare Hedef İçin Hareket Fonksiyonu */
function fonkHedef(){
/* 100 ms için h değişkeni saniyede 10 artar. */
h++;
var ctx = classIcindeCanvas.canvastaGoster;
ctx.fillStyle = "Blue";
/* Rastgele çıkan hedef için x koordinatı */
/* 0 ile 1 arasındaki rastgele ondalık sayı Math.random() ile alınır.
Ondalık sayı 380 ile çarpılır. Örneğin 0.01 x 380 = 3.8 , 0.001 x 380 = 0,38
Sonuç, 50 ile toplanır. 53.8 ve 50.38
53.8 Math.floor() ile 53 e yuvarlanır.
50.38 Math.floor() ile 50 ye yuvarlanır.
Hedefin x koordinatı en az 50, en çok 429 olabilir.
*/
/* Başlangıçta objenin a elemanının değeri true olarak tanımlanmıştı.
true ise
rastHedefX değişkeni rastgele sayıya eşitlenir.
Eşitlenmeden sonra a elemanının değeri false yapılır.
false yapılmazsa, rastHedefX değişkeni saniyede 10 kere rastgele değer alır.
*/
if(objeHedef.a == true){
rastHedefX = Math.floor(Math.random() * 380 + 50);
objeHedef.a = false;
}
/* xHedef ve yHedef değişkenleri, xInpHedef ve yInpHedef inputlarına eşitlenir.
xInpHedef ve yInpHedef inputlarına yazılan değerler, bu fonksiyonun en altındaki x ve y+h değerleridir.
İnputtaki değerler, alınır, değiştirilir ve tekrar yazılır. Bu işlem saniyede 10 kere yapılır.
*/
var xHedef = xInpHedef.value;
var yHedef = yInpHedef.value;
/* x değişkeni rastgele alınan sayıya eşitlenir.
y değişkeni hedefin bir kenar uzunluğu olan 10 için -10 yapılır.
Saniyede 10 kere çizilen hedef, ilk çizilen hedefin -10 değeri için tamamen görünmez.
*/
var x = rastHedefX;
var y = -10;
var genislik = 10;
var yukseklik = 10;
/* x, y, genislik ve yukseklik değerleri için hedef çizilir. */
/* Saniyede 10 artan h değişkeni, y değişkeni ile toplanır. */
/* Hedefin y koordinatı saniyede 10 artıyor ise aşşağı doğru bir hareket oluşur. */
ctx.fillRect(x, y+h, genislik, yukseklik);
/* Hedefin y koordinatı, canvasın yüksekliği olan 272 den büyük ise
(hedef isabet almamış ve canvasın aşşağısından görünmez olmuş ise)
h değişkeni, en başındaki değeri olan sıfıra eşitlenir.
Rastgele sayı alındıktan sonra false yapılan objenin a elemanı, tekrar true yapılır.
Fonksiyon tekrar çalıştığında, rastgele yeni bir hedef harekete başlar.
*/
if(yHedef > 272){
h = 0;
objeHedef.a = true;
}
/* İnputlara yazılan değerlerin, xHedef ve yHedef değişkenlerine eşitlendiğinden yukarıda bahsedilmişti.
Fonksiyon ilk çalıştığında:
xInpHedef.value ve yInpHedef.value inputlarının değerleri, en baştaki değerleri olan sıfıra eşit ise
xHedef ve yHedef değişkenlerinin değerleri sıfırdır.
Fonksiyon ilk çalışmasını bitirdiğinde inputlara yeni değerleri yazılır.
Yazılan değerler, ikinci çalışmasında kullanılır ve yeni değerleri tekrar yazılır.
Örneğin yHedef değişkeni için, fonksiyon her çalıştığında, 272 den büyük olup olmadığı kontrolü yapılır.
*/
xInpHedef.value = x;
yInpHedef.value = y+h;
}
/* FONKSİYON 4 - 4 */
/* İsabet ve Hedef ile Çarpışma İçin Fonksiyon */
function fonkIsabet(){
var ctx = classIcindeCanvas.canvastaGoster;
ctx.font = "16px serif";
ctx.fillStyle = "#900";
/* Hedef Köşe Değerleri */
/* Tam sayı değişkenler, sayı değişkeni number olması için yuvarlanır ise if koşulu içinde karşılaştırılabilir. */
var hedefXsol = xInpHedef.value;
hedefXsol = Math.floor(hedefXsol);
var hedefXsag = hedefXsol + 10;
hedefXsag = Math.floor(hedefXsag);
var hedefYyukari = yInpHedef.value;
hedefYyukari = Math.floor(hedefYyukari);
var hedefYassagi = hedefYyukari + 10;
hedefYassagi = Math.floor(hedefYassagi);
/* Ateş Köşe Değerleri */
var atesXsol = xInpAtes.value;
atesXsol = Math.floor(atesXsol);
var atesXsag = atesXsol + 3;
atesXsag = Math.floor(atesXsag);
var atesYyukari = yInpAtes.value;
atesYyukari = Math.floor(atesYyukari);
var atesYassagi = atesYyukari + 3;
atesYassagi = Math.floor(atesYassagi);
/* Kare Köşe Değerleri */
var kareXsol = xInpKare.value;
kareXsol = Math.floor(kareXsol);
var kareXsag = kareXsol + 20;
kareXsag = Math.floor(kareXsag);
var kareYyukari = yInpKare.value;
kareYyukari = Math.floor(kareYyukari);
var kareYassagi = kareYyukari + 20;
kareYassagi = Math.floor(kareYassagi);
/* HEDEF İSABET ALMIŞ İSE */
/* Kare, ateş ve hedef karelerinin sol üst köşe koordinatları x ve y dir.*/
/* x sağa doğru artar, y aşşağı doğru artar. */
/* Ateş SOL x değeri, hedef sol x değeri ve hedef sağ x değeri arasında ise */
/* ve */
/* Ateş aşşağı y değeri, hedef aşşağı y değerinden küçük ve ateş yukarı y değeri, hedef yukarı y değerinden büyük ise. Ateşin yukarı y değeri, hedefin aşşağı ve yukarı y değerlerinin içinde ise */
/* VEYA */
/* Ateş SAĞ x değeri, hedef sol x değeri ve hedef sağ x değeri arasında ise */
/* ve */
/* Ateşin yukarı y değerinin hedefin içinde olma koşulu aynıdır */
if(((atesXsol > hedefXsol && atesXsol < hedefXsag) && (atesYassagi < hedefYassagi && atesYyukari > hedefYyukari)) || ((atesXsag > hedefXsol && atesXsag < hedefXsag) && (atesYassagi < hedefYassagi && atesYyukari > hedefYyukari))){
ctx.fillText("Başarılı.", 200, 20);
/* Ateş ve hedef en başındaki değerlerine döndürülür. */
at = 0;
objeAtes.a = false;
h = 0;
objeHedef.a = true;
}
/* HEDEF İLE KARE ÇARPIŞMIŞ İSE */
/* Hedefin ve karenin birbirine değme koşulları. Hedef kareden küçük ölçülere sahiptir. Hedef kareden büyük olacak ise tersi düşünülerek yazılmalıdır. */
/* 1. parantez ilk VEYA için: Hedefin aşşağı y değeri, karenin aşşağı ve yukarı y değerlerinin içinde ve hedefin SOL x değeri, karenin sol ve sağ x değerlerinin içinde ise. Hedef kareye yukarıdan SOL x değeri, karenin sol ve sağ x değerlerinin içinde kalacak şekilde değdi ise. (Hedefin kareye sağ üst köşesinden veya sağ tarafından tamamının değdiği değerler de aynıdır) */
/* 2. parantez ikinci VEYA için: Hedef ve kare y değerleri 1.parantez ile aynı ve hedefin SAĞ x değeri için aynı şekilde yazılmıştır. Hedef kareye yukarıdan SAĞ x değeri, karenin sol ve sağ x değerlerinin içinde kalacak şekilde değdi ise. (Hedefin kareye sol üst köşesinden veya sol tarafından tamamının değdiği değerler de aynıdır) */
/* 3. parantez üçüncü VEYA için: Hedefin yukarı y değeri, karenin aşşağı ve yukarı y değerlerinin içinde ve hedefin SOL x değeri, karenin sol ve sağ x değerlerinin içinde ise. Hedef kareye aşşağıdan SOL x değeri, karenin sol ve sağ x değerlerinin içinde kalacak şekilde değdi ise. (Hedefin kareye sağ alt köşesinden veya sağ tarafından tamamının değdiği değerler de aynıdır) */
/* 4. parantez dördüncü VEYA için: Hedef ve kare y değerleri 3.parantez ile aynı ve hedefin SAĞ x değeri için aynı şekilde yazılmıştır. Hedef kareye aşşağıdan SAĞ x değeri, karenin sol ve sağ x değerlerinin içinde kalacak şekilde değdi ise. (Hedefin kareye sol alt köşesinden veya sol tarafından tamamının değdiği değerler de aynıdır) */
if((hedefYassagi > kareYyukari && hedefYassagi < kareYassagi && hedefXsol > kareXsol && hedefXsol < kareXsag) || (hedefYassagi > kareYyukari && hedefYassagi < kareYassagi && hedefXsag > kareXsol && hedefXsag < kareXsag) || (hedefYyukari < kareYassagi && hedefYyukari > kareYyukari && hedefXsol > kareXsol && hedefXsol < kareXsag) || (hedefYyukari < kareYassagi && hedefYyukari > kareYyukari && hedefXsag > kareXsol && hedefXsag < kareXsag)){
ctx.fillText("Hedef ile çarpışma. Lütfen yeniden başlatın.", 20, 40);
/* Uygulama durdurulur. Dur ve Devam Et butonları pasif yapılır. */
classIcindeCanvas.stop();
btnDur.disabled = true;
btnDevamEt.disabled = true;
}
}
/* FONKSİYON 4 - 5 */
/* Canvasın Sağında ve Solunda Olan Çizgilerin Hareketi, Uygulama Süresi ve Hiç Bir Yön Tuşuna Basılmamış İse */
function fonkCizgiHareket(){
/* CANVASIN SAĞINDA ve SOLUNDA OLAN ÇİZGİLERİN HAREKETİ */
/* Hareket eden çizgiler siyah çizgiler değildir.
Canvas yüksekliğindeki siyah çizginin üzerinde, aşşağı doğru hareket eden iki tane beyaz çizgidir.
Siyah çizgi hareketi sanılan bir ilizyondur.
Aşşağıda olan beyaz çizgi hareketini tamamladığında, yukarıda olan beyaz çizginin arkasında kalacak şekilde negatif y değeri ile tekrar çizilmeye başlanır.
Yukarıda olan beyaz çizgi hareketini tamamladığında, ilk başta aşşağıda, şimdi ise yukarıda olan beyaz çizginin arkasında kalacak şekilde negatif y değeri ile tekrar çizilmeye başlanır.
*/
/* c değişkeni yukarıda olan beyaz çizginin hareketi için,
cc değişkeni aşşağıda olan beyaz çizginin hareketi için saniyede 10 artar. */
c++;
cc++;
var ctx = classIcindeCanvas.canvastaGoster;
ctx.font = "16px serif";
ctx.fillStyle = "black";
/* c ve cc değerleri canvasa karşılaştırma için yazılır. */
ctx.fillText("c:"+c, 20, 20); ctx.fillText("cc:"+cc, 70, 20);
/* Canvasın sağına ve soluna iki tane siyah çizgi çizilir. */
var x1 = 2;
var x2 = 475;
var y1 = 2;
var genislik = 3;
var yukseklik = 268;
ctx.fillRect(x1, y1, genislik, yukseklik);
ctx.fillRect(x2, y1, genislik, yukseklik);
/* Canvasın sağında ve solunda başlangıçta yukarıda olan beyaz çizgiler */
ctx.beginPath();
ctx.font = "16px serif";
ctx.fillStyle = "white";
var x3 = 2;
var x4 = 475;
var y2 = 0+2*c;
var genislikb = 3;
var yukseklikb = 45;
ctx.fillRect(x3, y2, genislikb, yukseklikb);
ctx.fillRect(x4, y2, genislikb, yukseklikb);
if(y2 > 269){ c = -45; } /* 45 in 1 katı */
/* 272 yüksekliği için, 2 ve 3 ün katı olan en büyük sayı 270 dir. */
/* 270 i tam bölen ve 4 katı 270 den küçük olan tüm sayılar için biri kısa veya biri uzun akışlar oluşturulabilir. */
/* Örneğin beyaz çizgilerin yükseklikleri olan 45 için:
Yukarıda if koşulunda, y2 değişkeni 269 dan büyük ise c = -45 dir.
45 in 4 katı 180, aşşağıda y3 değişkeninde toplamda olan sayıdır.
Aşşağıda if koşulunda, y3 değişkeni 269 dan büyük ise cc = -135 dir.
135, 45 in 3 katıdır.
Aynı oranlar 270 i tam bölen tüm sayılar için uygulanabilir.
*/
/* Canvasın sağında ve solunda başlangıçta aşşağıda olan beyaz çizgiler */
var x5 = 2;
var x6 = 475;
var y3 = 180+2*cc; /* 180 45 in 4 katı */
ctx.fillRect(x5, y3, genislikb, yukseklikb);
ctx.fillRect(x6, y3, genislikb, yukseklikb);
if(y3 > 269){ cc = -135; } /* 135 45 in 3 katı */
ctx.beginPath();
ctx.font = "16px serif";
ctx.fillStyle = "#900";
/* UYGULAMA SÜRESİ */
/* s değişkeni, başlangıçta 300 olan değeri için saniyede 10 azalır. */
s--;
/* s değişkeni 1 den küçük ise */
if(s < 1)
{
/* Uygulama durdurulur. Dur ve Devam Et butonları pasif yapılır. */
classIcindeCanvas.stop();
ctx.fillText("Süre doldu. Lütfen yeniden başlatın.", 20, 40);
btnDur.disabled = true;
btnDevamEt.disabled = true;
}
/* Saniyede 10 azalan s değişkeni 10 na bölünür ise, 30 saniyelik geri sayım canvasa yazılabilir. */
ctx.fillText(s/10, 20, 260);
/* HİÇ BİR YÖN TUŞUNA BASILMAMIŞ İSE */
/* Yukarıdaki y2 = 0+2*c için, y2 değişkeni çift sayıdır. */
/* y2 değişkeninin 2, 136 ve 250 değerleri için, aInpKare.value ve bInpKare.value inputlarının değerleri en başta yukarıda tanımlanan değişkenlere eşitlenir. */
if(y2 == 2){
y2A = aInpKare.value;
y2B = bInpKare.value;
}
if(y2 == 136){
y136A = aInpKare.value;
y136B = bInpKare.value;
}
if(y2 == 250){
y250A = aInpKare.value;
y250B = bInpKare.value;
}
/* y2 değişkeninin 2, 136 ve 250 değerleri için,
aInpKare.value ve bInpKare.value inputlarının değerleri değişmemiş ve yön tuşları false ise,
Kare hareket etmemiş demektir. */
if((y2A == y136A && y2A == y250A && y136A == y250A && sag == false && sol == false) && (y2B == y136B && y2B == y250B && y136B == y250B && ileri == false && geri == false)){
/* Uygulama durdurulur. Dur ve Devam Et butonları pasif yapılır. */
classIcindeCanvas.stop();
ctx.fillText("Hiç bir yön tuşuna basılmadığı için bitirildi. Lütfen yeniden başlatın.", 20, 40);
btnDur.disabled = true;
btnDevamEt.disabled = true;
/* Değişkenlerin son kalan değerleri, uygulama yeniden başlatıldığında kalır ve uygulama yeniden başlatılır başlatılmaz tekrar bitirilir. Bitirilmemesi için değişkenlerin kalan değerleri temizlenir. */
y2A = ""; y2B = ""; y136A = ""; y136B = ""; y250A = ""; y250B = "";
}
}
/* FONKSİYON 4 */
function fonkGuncelle(){
classIcindeCanvas.temizle();
fonkKareHareket();
fonkAtes();
fonkHedef();
fonkIsabet();
fonkCizgiHareket();
}
/* DUR BUTONU */
btnDur.addEventListener("click", function(){
classIcindeCanvas.stop();
});
/* DEVAM ET BUTONU */
btnDevamEt.addEventListener("click", function(){
/* Önce durdurulmadan devam ettirilirse, her Devam Et butonuna tıklandığında setInterval üstüne setInterval başlatılır. Fonksiyonun katlanarak hızlanmasına neden olur. */
classIcindeCanvas.stop();
classIcindeCanvas.devamEt();
});
/* YENİDEN BAŞLAT BUTONU */
btnYenidenBaslat.addEventListener("click", function(){
/* Önce durdurulmadan class (setInterval) başlatılırsa, her Yeniden Başlat butonuna tıklandığında setInterval üstüne setInterval başlatılır. Fonksiyonun katlanarak hızlanmasına neden olur. */
classIcindeCanvas.stop();
/* Uygulama yeniden başlatıldığında, daha önce oluşturulan canvas (div) temizlenir. */
document.getElementById("IdCanvasDiv").innerHTML = "";
/* Tüm değişkenler, en başında olan değerlerine eşitlenir. */
aInpKare.value = 42;
bInpKare.value = 21;
xInpKare.value = 230;
yInpKare.value = 126;
xInpAtes.value = 0;
yInpAtes.value = 0;
xInpHedef.value = 0;
yInpHedef.value = 0;
a = 0;
b = 0;
c = 0;
cc = 0;
s = 300;
at = 0;
h = 0;
/* Hedef ile Karenin çarpışmasında, süre bitiminde ve yön tuşuna basılmadığında pasif yapılan butonlar tekrar aktif yapılır. */
btnDur.disabled = false;
btnDevamEt.disabled = false;
/* Rastgele değer alındıktan sonra false yapılan objenin a elemanı, başlangıçta olan değerine döndürülür. */
objeHedef.a = true;
/* FONKSİYON 1
(Yeniden Başlat butonuna tıklandığında class başlatılır) */
classFonksiyonu();
}); /* YENİDEN BAŞLAT BUTONU SON */
/* FONKSİYON 1
(Başlat butonuna tıklanıp, uygulama ilk kez çalıştığında class başlatılır) */
classFonksiyonu();
}); /* Başlat Butonuna Tıklandı Son */
</script>Tarayıcının kaydırma çubuğu, yön tuşları için devre dışı bırakılabilir. Döküman olan canvas dışında, yön tuşlarını devre dışı bırakmak için, kodların en altındaki
}); /* Başlat Butonuna Tıklandı Son */
satırının üstüne, aşağıdaki kod eklenebilir.
document.addEventListener("keydown", function (e) {
if([37,38,39,40].indexOf(e.keyCode) > -1){
e.preventDefault();
}
}, false);Bu oyun uygulaması ile defteriniz.com tarafından yazılan bu oyunu incelemek isteyebilirsiniz.
Açık oyun kodları txt dosyasına eklenmiştir. İndirmek için buraya tıklayınız.
Lütfen yorum bırakın.