Adım 2: Visual Studio programını açınız. Bunun için devenv komutunu kullanabilirsiniz.
Adım 3: Create a new project diyerek yeni bir proje oluşturunuz. Dil olarak c#, platform olarak Windows, ortam olarak Web seçiniz. Ekrana gelen şablonlardan Asp.NET Web Applicatin(.Net Framework) seçiniz.
Adım 4: Proje ismini TetrisOyunuWeb olarak belirleyiniz. FrameWork olarak 4.5 tercih ediniz. Projenizi kullanacak son kullanıcıların bilgisayarlarındaki versiyonu dikkate alarak bu tercihi yapınız. Böylece projeniz daha fazla insan tarafından kullanılacaktır. Create diyerek işlemi tamamlayınız.
Adım 5: Ekrana gelen pencerede Empty seçeneğini seçiniz. Bu seçenek boş bir web projesi oluşturmak için kullanılır. Sağ tarafta yer alan onay kutularından Configure for HTTPS seçeneğini kaldırın. Bu seçenek aktif olursa proje IPv6 sistemini kullanmak için bizden bir sertifika yüklememizi isteyecektir. Daha sonra Create diyerek işlemi tamamlayalım.
Adım 6: Projeye terminal tabanlı bir web sayfası ekleyelim. Bunun proje ismini seçelim. Farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add komut grubunu seçelim. Burada açılan pencereden HTML Page komutunu seçelim. Ekrana gelen pencerede web sayfasının ismini tetris_oyunu olarak belirleyelim. Daha sonra Ok diyerek web sayfasını tamamlayalım. Web sayfasında aşağıdaki kodlar otomatik olarak yazılır.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Adım 7: Web sayfasının pencere başlığını <title> etiketi arasına yazalım. Projeyi çalıştırıp sonucu görelim.
<title>Tetris Oyunu</title>
Adım 8: Tema olarak BootStrap, kod olarak jquery kullanılacağı için bunlara ait kütüphaleri head etiketi arasına ekleyelim. Projeyi çalıştırıp sonucu görelim.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
Adım 9: Web sayfasında css ve javascript kodları kullanacağımız için head etiketi arasına gerekli kod bloklarını yazalım. Projeyi çalıştırıp sonucu görelim.
<script>
/* Javascript kodlarının tanımlanacağı blok
</script>
<style>
/* CSS özelliklerinin tanımlanacağı blok*/
</style>
Adım 10: Oyunumuzda tek sayfa kullanacağımız için sayfanın yüksekliğinin %100 olmasını sağlayalım.
html, body {
height: 100%;
}
Adım 11: Yukarıda verilen tasarıma göre en dışta bir kutu mevcuttur. Bu kutuya "ekran" ismini verelim. Div etiketimizi oluşturalım. Kutunun yüksekliğini 100% yapalım. Ekranın ortasına gelmesini sağlayalım. Geçici olarak arka plan rengi verelim. Projeyi çalıştırıp sonucu görelim.
.ekran {
margin: 0 auto;
height: 100%;
}
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
<div class="ekran col-xl-4 col-lg-6 col-md-12 col-sm-12">
</div>>
Adım 12: Şimdi web sayfasına bir satır ekleyelim. Bu satır aynı zamanda oyuna ait içerikleri de depolayacak. Bu satıra icerik ismini verelim. Yüksekliğini yüzde yüz yapalım. Projeyi çalıştırıp sonucu görelim.
.icerik {
height: 100%;
}
.......................................
<div class="ekran col-xl-4 col-lg-6 col-md-12 col-sm-12">
<div class="row icerik">
</div>
</div>
Adım 13: Şimdi oyun penceresini tanımlayalım. İsmini sahne olarak tanımlayalım. Yüksekliğini yüzde yüz yapalım. Arkaplan rengini kırmızı yapalım. Ekran kutusunun 2/3 kadar yer kaplamasını sağlayalım. Projeyi çalıştırıp sonucu görelim.
.sahne {
height: 100%;
background-color: red;
}
................................
<div class="ekran col-xl-4 col-lg-6 col-md-12 col-sm-12">
<div class="row icerik">
<div class="sahne col-8">
</div>
</div>
</div>
Adım 14: Sahne kutusu içinde oyunun aktif bir şekilde tasarlanacağı pano isminde bir kutu tanımlayalım. Genişliğini 261, yüksekliğini 561 verelim. Yukarıdan 25 px kadar boşluk bırakalım. Yatayda ortalayalım. Arkaplan rengini yeşil yapalım. Projeyi çalıştırıp sonucu görelim.
.pano {
margin: 25px auto;
width: 262px;
height: 521px;
background-color: green;
}
........................................
<div class="ekran col-xl-4 col-lg-6 col-md-12 col-sm-12">
<div class="row icerik">
<div class="sahne col-sm-8">
<div class="pano">
</div>
</div>
</div>
</div>
Adım 15: Oyunu başlatıp durduracağımız ve skor tabelasının olduğu kutuyu tanımlayalım. İsmini panel olarak belirleyelim. Icerik kutusunun 1/3 kadar yer kaplamasını sağlayalım. Yüksekliğini yüzde yüz yapalım. Arkaplan rengini sarı yapalım. Projeyi çalıştırıp sonucu görelim.
.panel {
height: 100%;
background-color: yellow;
}
............................................
<div class="ekran col-xl-4 col-lg-6 col-md-12 col-sm-12">
<div class="row icerik">
<div class="sahne col-sm-8">
<div class="pano">
</div>
</div>
<div class="panel col-sm-4"></div>
</div>
</div>
Adım 16: Projeyi çalıştırdığımızda ekran boyutu küçüldüğü zaman pano ile panel kutuları alt alta geliyor. Halbuki bu kutuların hep yan yana olması gerekir. pano için col-sm-8, panel için col-sm-4 ayarı yapılmıştı. Burada yer alan sm parametrelerinin silinmesi gerekir. Böylece web sayfası hangi ekranda çalışırsa çalıssın hep aynı oranda görüntülenecektir. Projeyi çalıştırıp uygulamayı deneyelim.
<div class="ekran col-xl-4 col-lg-6 col-md-12 col-sm-12">
<div class="row icerik">
<div class="sahne col-8">
<div class="pano">
</div>
</div>
<div class="panel col-4"></div>
</div>
</div>
Adım 17: Oyunumuza ait genel görünümü ayarladık. Şimdi pano kutusunda belirlenen sayıda yan yana kutuları tanımlayalım. Oluşturacağımız nesneleri önce burada tanımlıyoruz. Bu oyunlarda görünür ekranın arka planında oyunu kontrol eden bir sanal matrix ya da tablo olayı vardır. Oyunla ilgili tüm bilgiler bu matrixde yada sanal tablo dizisinde tutulur. Biz de dışarıdan karelerin hareketini ve tetris olunca yok olmasını izleriz. Tetris şekilleri karelerden meydana gelir. Tetris ekranının kaça kaç sanal tablodan oluşacağını belirleyelim. Bizim yapacağımız tetris ekranı 10 X 20 lik bir sanal tablodan oluşacaktır. Bu değerleri istediğiniz şekilde değiştirebilirsiniz. 10 X 20 lik tablo 10*20=200 sanal kareden oluşur. Bu kareleri statik bir şekilde oluşturabiliriz. Ancak bu hem zaman alacak hem de kodların okunurluğunu azaltacaktır. Ayrıca daha fazla kod yazımı yapıldığı için bellekte daha fazla yer kaplayacaktır. Ayrıca çalışması da yavaşlayacaktır. Bunun için karelerin dinamik bir şekilde oluşturulması gerekir. Bu işlemlerin gerçekleştirilmesi için sayfa açılır açılmaz kodların yazılması gerekir. Öncelikle sayfanın açılışında çalışacak metodu tanımlamalıyız. Bu arada karelerin sayısını tutmak amacıyla say isminde bir değişken tanımlayalım. Projeyi çalıştırıp uygulamayı deneyelim.
<script>
var say;
$(function () {
});
</script>
Adım 18: Şimdi pano kutusu içinde tanımlayacağımız karelerin özelliklerini belirleyelim. 200 tane kare tanımlayacağız. Karelerin ortak özelliklerini gözden geçirelim.
Genişlik : 25
Yükseklik : 25
Arkaplan : mavi
Yazı rengi : beyaz
Yazı boyutu : 10
Görünürlük : true
Öncelikle kutuların ortak özelliklerine ait bir class tanımlayalım. İsmini hucre olarak verelim. Projeyi çalıştırıp uygulamayı deneyelim.
.hucre {
width: 25px;
height: 25px;
background-color: blue;
color: white;
display: block;
font-size: 10px;
}
Adım 19: Bu tip programlarda öncelikle bir kuyuyu oluşturmamız gerekir. Haydi şimdi pano kutusu içine kare1 isminde bir kutu oluşturalım. Az önce tanımladığımız hucre clasını bu kutuda deneyelim. Projeyi çalıştırıp uygulamayı deneyelim.
<div class="ekran col-xl-4 col-lg-6 col-md-12 col-sm-12">
<div class="row icerik">
<div class="sahne col-8">
<div class="pano">
<div id="kare1" class="hucre">1</div>
</div>
</div>
<div class="panel col-4"></div>
</div>
</div>
Adım 20: İkinci bir kare daha oluşturalım. İsmini kare2 verelim. Hucre clasını da ekleyelim. Projeyi çalıştırıp uygulamayı deneyelim.
<div class="ekran col-xl-4 col-lg-6 col-md-12 col-sm-12">
<div class="row icerik">
<div class="sahne col-8">
<div class="pano">
<div id="kare1" class="hucre">1</div>
<div id="kare2" class="hucre">2</div>
</div>
</div>
<div class="panel col-4"></div>
</div>
</div>
Adım 21: Dikkat ettiniz mi, kareler alt alta sıralandı. Halbuki biz kareleri yan yan yana sıralamak istiyoruz. Bir satırda 10 kare olduğunda ikinici satıra geçmesini istiyoruz. Bunun sebebi kutuların pozisyonları sabit olduğu için kareler alt alta gelecektir. Üçüncü bir kare eklediğimizde de bu kare de alta eklenecektir. Bu sorunu çözmek için pano kutusunun clasına position: relative, karelerin hucre classını da position:ablosule satırını ekleyelim. Projeyi çalıştırıp uygulamayı deneyelim.
.hucre {
position: absolute;
width: 25px;
height: 25px;
background-color: blue;
color: white;
display: block;
font-size: 10px;
}
Adım 22: Bu seferde kareler üst üste gelmekte en son kare ekranda görüntülenmektedir. Birinci kare arkada kalmaktadır. Halbuki biz kareleri yan yana sıralamak istiyoruz. Bunun için kutuların pozisyonlarını belirlemek için top ve left özelliklerinin belirlenmesi gerekir. Birinci karenin top değeri 1, left değeri 1 olmalıdır. Burada ikinci karemiz ise top değeri 1, left değeri ise 1 + 25 + 1 = 27 olmalıdır. Şimdi buna göre kareleri yeniden tanımlayalım. Projeyi çalıştırıp uygulamayı deneyelim.
<div class="ekran col-xl-4 col-lg-6 col-md-12 col-sm-12">
<div class="row icerik">
<div class="sahne col-8">
<div class="pano">
<div id="kare1" class="hucre" style="left:1px;top:1px;">1</div>
<div id="kare2" class="hucre" style="left:27px;top:1px;">2</div>
</div>
</div>
<div class="panel col-4"></div>
</div>
</div>
Adım 23: Gördüğünüz gibi karelerimiz yan yana gelmekte ve aralarında 1px boşluk bırakılmaktadır. Pano kutusuna iki kareyi yerleştirmiş olduk. Tüm karelerin ortak özelliklerini hucre clasında tanımladık. Farklı özellikler ise tasarım kısmında tanımlandı. Bunlar id, left ve top özellikleriydi. Şimdi oluşturduğumuz kare kutularını tasarım kısmından silelim. Çünkü bunları kodlarla yapmaya çalışacağız. Önce ilk kareyi kodlarla yapmaya çalışalım. Projeyi çalıştırıp uygulamayı deneyelim.
<script>
var say;
$(function () {
say = 1;
var object = {
id: "kare" + say,
class: "hucre",
css: {
"top": 1,
"left": 1
}
};
var addition = $("<div>", object);
addition.html(say);
$(".pano").append(addition);
});
</script>
Adım 24: Şimdi ikinci kareyi kodlarla yapmaya çalışalım. Projeyi çalıştırıp uygulamayı deneyelim.
<script>
var say;
$(function () {
say = 1;
var object = {
id: "kare" + say,
class: "hucre",
css: {
"top": 1,
"left": 1
}
};
var addition = $("<div>", object);
addition.html(say);
$(".pano").append(addition);
say = 2;
var object = {
id: "kare" + say,
class: "hucre",
css: {
"top": 1,
"left": 27
}
};
var addition = $("<div>", object);
addition.html(say);
$(".pano").append(addition);
});
</script>
Adım 25: Burada dikkat ettiyseniz kodların hepsi tekrar ediliyor. Tekrar eden komutları for döngüsü içinde tanımlayalım. Projeyi çalıştırıp uygulamayı deneyelim.
<script>
var say;
$(function () {
say = 1;
for (var j = 1; j <= 20; j++) {
for (var i = 1; i <= 10; i++) {
var object = {
id: "kare" + say,
class: "hucre",
css: {
"top": 26 * j - 25,
"left": 26 * i - 25
}
};
var addition = $("<div>", object);
addition.html(say);
$(".pano").append(addition);
say++;
}
}
});
</script>
Adım 26: Son olarak panomuzun etrafına 3px bir çizgi çizelim. Genişlik ve yükseklikleri verilen kutu uzunluğuna göre yeniden tanımlayalım. Buna göre pano css özelliklerini düzenleyelim. Projeyi çalıştırıp uygulamayı deneyelim.
.pano {
border: 3px solid grey;
margin: 25px auto;
width: 267px;
height: 527px;
background-color: green;
position: relative;
}
Şimdilik bu kadar. Bir sonraki makalede görüşmek üzere hoşça kalın.