Tetris oyunu masaüstü uygulaması nasıl yapılır

Kodla Büyü
<!DOCTYPE html>
<html>
<head>
<title>Tetris Oyunu Yapımı 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.collapse').on('shown.bs.collapse', function (e) {
var $card = $(this).closest('.card');
$('html,body').animate({
scrollTop: $card.offset().top
}, 500);
});
})
</script>
</head>
<body>
<div class="container">
<h2>Tetris Oyunu Yapımı 1</h2>
<p><strong>Not : </strong> Bu <strong>Masaüstü Projesi</strong> form sayfasında Tetris oyununun adım adım anlatılması için tasarlandı. Bu aşamada oyuna ait tasarımın yapımı işlemleri adım adım anlatılmaktadır.</p>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#adim1">
Adım #1
</a>
</div>
<div id="adim1" class="collapse" data-parent="#accordion">
<div class="card-body">
Öncelikle tetris oyununa ait tasarım görünümünün yapılması gerekir. Bunun için paint programını kullanabiliriz.
<img src="https://www.maarificedid.com/resimler/tetris-game-tasarim-cizimi.png" alt="" />
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim2">
Adım #2
</a>
</div>
<div id="adim2" class="collapse" data-parent="#accordion">
<div class="card-body">
Visual Studio programını açınız. Bunun için devenv komutunu kullanabilirsiniz.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim3">
Adım #3
</a>
</div>
<div id="adim3" class="collapse" data-parent="#accordion">
<div class="card-body">
Create a new project diyerek yeni bir proje oluşturunuz. Dil olarak c#, platform olarak Windows, ortam olarak Desktop seçiniz. Ekrana gelen şablonlardan Windows Forms App(.Net Framework) seçiniz.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim4">
Adım #4
</a>
</div>
<div id="adim4" class="collapse" data-parent="#accordion">
<div class="card-body">
Proje ismini TetrisOyunuForm 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.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim5">
Adım #5
</a>
</div>
<div id="adim5" class="collapse" data-parent="#accordion">
<div class="card-body">
Ekrana gelen form sayfasını düzenleyelim. Form sayfası seçiliyken Properties panelinden gerekli değişiklikleri yapalım. Projeyi çalıştırıp uygulamayı deneyelim.<br />
Name = frmTetris<br />
MaximizeBox = False<br />
MinimizeBox = False<br />
Size = 420;600<br />
StartPosition = CenterScreen<br />
Text = Tetris Oyunu<br />
Projeyi çalıştırıp uygulamayı deneyelim.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim6">
Adım #6
</a>
</div>
<div id="adim6" class="collapse" data-parent="#accordion">
<div class="card-body">
Solution Explorer penceresinde view Code simgesine tıklayınca frmTetris.cs sekmesi ve altında program kodlarının yazılacağı kısım gelir. Projeyi çalıştırıp uygulamayı deneyelim.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim7">
Adım #7
</a>
</div>
<div id="adim7" class="collapse" data-parent="#accordion">
<div class="card-body">
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 diziyi tanımlayalım. Projeyi çalıştırıp uygulamayı deneyelim.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim8">
Adım #8
</a>
</div>
<div id="adim8" class="collapse" data-parent="#accordion">
<div class="card-body">
Tetrisimizi oluşturan karelerin boyutunu 25*25 piksel yapacağız. Her kare arasına 1 piksellik boşluk bırakacağız. Buna göre tetris panosunun boyutunu hesaplamamız gerekir. Yatay 10 kare olacağı için 1+(25+1)*10=261 piksel, dikey 1+(25+1)*20=521 piksel eder. Tetris Panosu 261*521 boyutunda olur. Tüm bunları formun tasarım modunu kullanmadan sadece kod bölümünde kod yazarak yapacağız. Oluşturacağımız nesneler şimdilik kare dizisi, pano olup hepsini Label kullanarak oluşturacağız. Bu arada say değişkeni kare dizisi için kullanacağımız sayaç için gereklidir. Şimdi bunları tanımlayalım. Projeyi çalıştırıp uygulamayı deneyelim.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim9">
Adım #9
</a>
</div>
<div id="adim9" class="collapse" data-parent="#accordion">
<div class="card-body">
Bu nesneleri formumuzda oluşturmak için önce Solution Explorer penceresindeki frmTetris.cs dosyasına ya da kod yazdığımız pencerenin üst kısmındaki frmTetris.cs(Design) sekmesine tıklarsak formumuz görünür hale gelir. Form üzerinde mousumuzu çift tıklarsak tekrar kod penceresine döneriz. Fakat bu sefer formumuzla ilgili frmTetris_Load yordamının oluştuğunu görürüz. Projeyi çalıştırıp uygulamayı deneyelim.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim10">
Adım #10
</a>
</div>
<div id="adim10" class="collapse" data-parent="#accordion">
<div class="card-body">
Şimdi aşağıda verdiğim özelliklere göre forma bir Label ekleyelim. Projeyi çalıştırıp uygulamayı deneyelim.<br />
İsmi : kare1<br />
Genişlik : 25<br />
Yükseklik : 25<br />
Arkaplan rengi : Mavi<br />
Yazı Rengi : Beyaz<br />
Soldan 26<br />
Üstten : 26<br />
İçerik : 1<br />
Sırası : 1<br />
Görünür olsun
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim11">
Adım #11
</a>
</div>
<div id="adim11" class="collapse" data-parent="#accordion">
<div class="card-body">
Oluşturduğumuz karenin yanına 1 tane daha, verilen özelliklere göre, Label ekleyelim. Projeyi çalıştırıp uygulamayı deneyelim.<br />
İsmi : kare2<br />
Genişlik : 25<br />
Yükseklik : 25<br />
Arkaplan rengi : Mavi<br />
Yazı Rengi : Beyaz<br />
Soldan 52<br />
Üstten : 26<br />
İçerik : 2<br />
Sırası : 2<br />
Görünür olsun
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim12">
Adım #12
</a>
</div>
<div id="adim12" class="collapse" data-parent="#accordion">
<div class="card-body">
Henüz iki tane kare oluşturduk. Bu işlemler bile bayağı zaman aldı. Ancak bu uygulamada 10 x 20 = 200 tane kare oluşturmamız gerekli. Belli bir özelliğe sahip ve birbirleriyle ilişkili nesneleri statik olarak oluşturmak yerine dinamik bir şekilde oluşturabiliriz. Bu hem programın hızlı çalışmasını hem de bellekte az yer kaplamasını sağlar. Ayrıca kısa sürede nesnelerin istenilen özelliklerde daha çabuk oluşmasını sağlar. Tanımladığımız iki label nesnesini silelim. Öncelikle birinci label nesnesini kodlarla oluşturmaya çalışalım. Projeyi çalıştırıp uygulamayı deneyelim.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim13">
Adım #13
</a>
</div>
<div id="adim13" class="collapse" data-parent="#accordion">
<div class="card-body">
Şimdi ikinci label nesnesini kodlarla oluşturmaya çalışalım. Projeyi çalıştırıp uygulamayı deneyelim.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim14">
Adım #14
</a>
</div>
<div id="adim14" class="collapse" data-parent="#accordion">
<div class="card-body">
Dikkat ettiniz mi, yine aynı işlemleri yapıyoruz. Uygulama yine zaman alıyor. Kodlar çoğaldıkça hata yapma ihtimali de çoğalıyor. Label nesnelerinin özelliklerine dikkat ettiyseniz, konumu, adı, değeri ve sırası hariç, diğer özellikleri aynı. Bu tip aynı özelliklere sahip nesneleri oluşturmak için for döngüsünü kullanabiliriz. Döngümüzde satır sayısı 20, sütun sayısı 10 olacaktır. Buna göre döngülerimizi oluşturalım. Projeyi çalıştırıp uygulamayı deneyelim.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim15">
Adım #15
</a>
</div>
<div id="adim15" class="collapse" data-parent="#accordion">
<div class="card-body">
Label nesnemizin adını, değerini ve sırasını kontrol etmek için say değişkenini tanımlamıştık. Bu değişkene ilk önce 1 değerini girelim. Döngü içinde sürekli artmasını sağlayalım. Projeyi çalıştırıp uygulamayı deneyelim.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim16">
Adım #16
</a>
</div>
<div id="adim16" class="collapse" data-parent="#accordion">
<div class="card-body">
Artık label nesnelerine ait özellikleri kullanarak 200 adet kare şeklini form sayfasında oluşturabiliriz. Projeyi çalıştırıp uygulamayı deneyelim.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim17">
Adım #17
</a>
</div>
<div id="adim17" class="collapse" data-parent="#accordion">
<div class="card-body">
Şimdi buna bir pano ve onun da etrafına çizgiler ekleyeceğiz. Yukarıdaki program kodunun altına aşağıdaki özellikler dikkate alınarak bir label ekleyelim. Projeyi çalıştırıp uygulamayı deneyelim.<br />
Soldan : 25<br />
Üstten : 25<br />
İsmi : pano<br />
Genişlik : 261<br />
Yükseklik : 521<br />
Arkaplan Rengi Çiyan<br />
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#adim18">
Adım #18
</a>
</div>
<div id="adim18" class="collapse" data-parent="#accordion">
<div class="card-body">
Şimdi programı tekrar çalıştırıp çizgileri görün. Programın yavaş çalıştığını görürsünüz. Karelerin Visible değerleri False yapın. Yukarıda silinmesi gereken komut satırlarını silin ve programı tekrar çalıştırın. Şimdi sadece pano ve çizgiler gözükür. Ayrıca programın da daha hızlı çalıştığını görürsünüz. Bu uygulama maarificedid.com sitesinden alınmıştır. Emeği geçenlere teşekkürler
</div>
</div>
</div>
</div>
</div>
</body>
</html>
 
Geri
Üst