Öncelikle tetris oyununa ait tasarım görünümünün yapılması gerekir. Bunun için paint programını kullanabiliriz.

Visual Studio programını açınız. Bunun için devenv komutunu kullanabilirsiniz.

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.

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.

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.

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.

Web sayfasının pencere başlığını "title" etiketi arasına yazalım. Projeyi çalıştırıp sonucu görelim.

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.

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.

Oyunumuzda tek sayfa kullanacağımız için sayfanın yüksekliğinin %100 olmasını sağlayalım.

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. Ekran görüntüsünü büyük ekranlarda 1/3, masaüstü bilgisayarlarda 1/2, tablet ve cep telefonlarında ise 1 yapalım. Projeyi çalıştırıp sonucu görelim.

Ş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.

Ş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 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.

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.

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.

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.

Ş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.

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.

İkinci bir kare daha oluşturalım. İsmini kare2 verelim. Hucre clasını da ekleyelim. Projeyi çalıştırıp uygulamayı deneyelim.

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.

Bu seferde kareler üst üste gelmekte en son kare ekranda görüntülenmektedir. Birinci kare arkada kalmaktadır. Halbuki biz kareleri yan 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.

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.

Şimdi ikinci kareyi kodlarla yapmaya çalışalım. Projeyi çalıştırıp uygulamayı deneyelim.

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.

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.

Verilen adımlara göre oluşturulan web sayfasının görünümü:

Tetris Oyumu Yapımı 1