HTML, CSS ve JavaScript Kullanarak Yılan Oyunu Nasıl Yapılır?

Bir yılan oyunu, programlama ve problem çözme becerilerinizi geliştirmek için kullanabileceğiniz klasik bir programlama alıştırmasıdır. Oyunu HTML, CSS ve JavaScript kullanarak bir web tarayıcısında oluşturabilirsiniz.

Oyunda, bir tahta etrafında hareket eden bir yılanı kontrol ediyorsunuz. Siz yiyecek topladıkça yılanın boyutu büyür. Kendi kuyruğunuzla veya duvarlardan herhangi biriyle çarpışırsanız oyun sona erecektir.

Canvas için Kullanıcı Arayüzü Nasıl Oluşturulur?

Yılanın hareket edeceği tuvali eklemek için HTML ve CSS kullanın. başka birçok var HTML ve CSS projeleri herhangi bir temel kavramı gözden geçirmeniz gerekirse üzerinde pratik yapabilirsiniz.

Bu projeye başvurabilirsiniz GitHub deposu tam kaynak kodu için.

1. "index.html" adlı yeni bir dosya oluşturun.
2. gibi herhangi bir metin düzenleyici kullanarak dosyayı açın. Görsel Kod veya Atom. Temel HTML kod yapısını ekleyin:

   html>
   <htmldil="tr-US">
   <KAFA>
   <başlık>Yılan Oyunubaşlık>
   KAFA>
   <vücut>
   vücut>
   html>

3. Gövde etiketinin içine, yılan için oyun tahtasını temsil edecek bir tuval ekleyin.

   <h2>Yılan Oyunuh2>
   <divİD="oyun">
   <tuvalİD="yılan">tuval>
   div>

4. HTML dosyanızla aynı klasörde "styles.css" adında yeni bir dosya oluşturun.
5. İçeride, genel web sayfası için biraz CSS ekleyin. Web sitenizi diğerlerini kullanarak da şekillendirebilirsiniz. temel CSS ipuçları ve püf noktaları.

   #oyun {
   Genişlik:400px;
   yükseklik:400px;
   marj:0Oto;
   arka plan rengi:#eee;
   }
   h2 {
   Metin hizalama: merkez;
   font ailesi:Arial;
   yazı Boyutu:36px;
   } 
   

6. HTML dosyanızın içinde, head etiketine bir CSS bağlantısı ekleyin:

   <bağlantırel="stil sayfası"tip="metin/css"href="stil.css">

7. Tuvali görüntülemek için "index.html" dosyanızı bir web tarayıcısında açın.

Yılan Nasıl Çizilir

Aşağıdaki örnekte siyah çizgi yılanı temsil ediyor:

Çoklu kareler veya "bölümler" yılanı oluşturur. Yılan büyüdükçe kare sayısı da artar. Oyunun başında yılanın boyu tek parçadır.

1. HTML dosyanızın içinde, gövde etiketinin altındaki yeni bir JavaScript dosyasına bağlantı verin:

   <vücut>
    Kodunuz burada 
   <senaryokaynak="script.js">senaryo>
   vücut>

2. script.js oluşturun ve tuvalin DOM öğesini alarak başlayın:

   var tuval = belge.getElementById("yılan");

3. Tuval HTML öğesi için bağlamı ayarlayın. Bu durumda, oyunun 2 boyutlu bir tuval oluşturmasını istiyorsunuz. Bu, HTML öğesine birden çok şekil veya resim çizmenize olanak tanır.

   var canvas2d = canvas.getContext("2d");

4. Oyunun bitip bitmediği ve tuvalin yüksekliği ve genişliği gibi diğer oyun içi değişkenleri ayarlayın:

   var oyunBitti = YANLIŞ;
   tuval.genişlik = 400;
   tuval.yükseklik = 400;

5. "snakeSegments" adlı bir değişken bildirin. Bu, yılanın alacağı "karelerin" sayısını tutacaktır. Yılanın uzunluğunu takip etmek için bir değişken de oluşturabilirsiniz:

   var yılanSegmentler = [];
   var yılan Uzunluğu = 1;
   

6. Yılanın ilk X ve Y konumunu bildirin:

   var yılanX = 0;
   var yılan Y = 0;

7. Yeni bir işlev oluşturun. İçinde, başlangıç ​​yılan parçasını, başlangıç ​​X ve Y koordinatlarıyla birlikte snakeSegments dizisine ekleyin:

   işlevhareket Yılanı() {
    yılanSegments.unshift({ X: yılanX, y: yılanY });
   }

8. Yeni bir işlev oluşturun. İçeride, dolgu stilini siyah olarak ayarlayın. Yılanı çizmek için kullanacağı renk bu:

   işlevçizmekYılan() {
    canvas2d.fillStyle = "siyah"; 
   }

9. Yılanın boyutunu oluşturan her parça için, genişliği ve yüksekliği 10 piksel olan bir kare çizin:

   için (var ben = 0; i < yılanBölümleri.uzunluk; ben++) {
    canvas2d.fillRect (snakeSegments[i].x, yılanSegments[i].y, 10, 10);
    }

10. Her 100 milisaniyede bir çalışacak bir oyun döngüsü oluşturun. Bu, oyunun sürekli olarak yılanı yeni konumunda çizmesine neden olacaktır ki bu, yılan hareket etmeye başladığında çok önemli olacaktır:

    işlevoyun Döngüsü() {
     moveSnake();
     çizmekYılan();

11. Yılanı başlangıç ​​konumunda en küçük boyutunda görmek için "index.html" dosyasını bir web tarayıcısında açın.

Yılan Hareketi Nasıl Yapılır?

Oyuncunun klavyede hangi düğmeye bastığına bağlı olarak yılanı farklı yönlerde hareket ettirmek için biraz mantık ekleyin.

1. Dosyanın en üstünde, yılanın başlangıç ​​yönünü belirtin:

   var yönX = 10;
   var yönY = 0;
   

2. Oyuncu bir tuşa bastığında tetiklenen bir olay işleyici ekleyin:

   belge.onkeydown = işlev(etkinlik) {
   };

3. Olay işleyicinin içinde, basılan tuşa göre yılanın hareket ettiği yönü değiştirin:

   anahtar (event.keyCode) {
   dava37: // Sol ok
    yönX = -10;
    yönY = 0;
   kırmak;
   dava38: // Yukarı ok
    yönX = 0;
    yönY = -10;
   kırmak;
   dava39: // Sağ ok
    yönX = 10;
    yönY = 0;
   kırmak;
   dava40: // Aşağı ok
    yönX = 0;
    yönY = 10;
   kırmak;
   }

4. moveSnake() işlevinde, yılanın X ve Y koordinatlarını güncellemek için yönü kullanın. Örneğin yılanın sola hareket etmesi gerekiyorsa X yönü "-10" olur. Bu, oyunun her karesi için 10 pikseli kaldırmak üzere X koordinatını güncelleyecektir:

   işlevhareket Yılanı() {
    yılanSegments.unshift({ X: yılanX, y: yılanY });
    yılanX += yönX;
    yılanY += yönY;
   }

5. Oyun şu anda yılan hareket ederken önceki bölümleri kaldırmıyor. Bu, yılanın şöyle görünmesini sağlayacaktır:
6. Bunu düzeltmek için, drawSnake() işlevinin başında her karede yeni yılan çizmeden önce tuvali temizleyin:

   canvas2d.clearRect(0, 0, tuval.genişlik, tuval.yükseklik);

7. Ayrıca, moveSnake() işlevi içinde, snakeSegments dizisinin son öğesini de kaldırmanız gerekir:

   sırasında (snakeSegments.length > yılanUzunluğu) {
    yılanSegments.pop();
   }

8. "index.html" dosyasını açın ve yılanı hareket ettirmek için sol, sağ, yukarı veya aşağı tuşlarına basın.

Tuvale Yiyecek Nasıl Eklenir?

Yılan için yiyecek parçalarını temsil etmek üzere masa oyununa noktalar ekleyin.

1. Bir dizi yiyecek parçasını depolamak için dosyanın en üstünde yeni bir değişken bildirin:

   var noktalar = [];

2. Yeni bir işlev oluşturun. İçeride, noktalar için rastgele X ve Y koordinatları oluşturun. Ayrıca herhangi bir zamanda tahtada yalnızca 10 nokta olmasını sağlayabilirsiniz:

   işlevyumurtlama noktaları() {
   eğer(nokta.uzunluk < 10) {
   var noktaX = Matematik.zemin(Matematik.random() * tuval.genişlik);
   var nokta Y = Matematik.zemin(Matematik.random() * tuval.yükseklik);
    noktalar.push({ X: noktaX, y: nokta });
    }
   }

3. Yiyecek için X ve Y koordinatlarını oluşturduktan sonra, bunları kırmızı bir renk kullanarak tuval üzerine çizin:

   için (var ben = 0; i < noktalar.uzunluk; ben++) {
    canvas2d.fillStyle = "kırmızı";
    canvas2d.fillRect (noktalar[i].x, noktalar[i].y, 10, 10);
   }

4. Oyun döngüsü içinde yeni spawnDots() işlevini çağırın:

   işlevoyun Döngüsü() {
    moveSnake();
    çizmekYılan();
    spawnNoktalar();
   eğer(!oyunBitti) {
    setTimeout (oyunDöngüsü, 100);
    }
   }

5. Oyun tahtasındaki yiyecekleri görüntülemek için "index.html" dosyasını açın.

Yılan Nasıl Büyütülür?

Bir yiyecek noktasıyla çarpıştığında boyunu artırarak yılanın büyümesini sağlayabilirsiniz.

1. Yeni bir işlev oluşturun. İçinde, noktalar dizisindeki her öğe arasında geçiş yapın:

   işlevcheckCollision() {
   için (var ben = 0; i < noktalar.uzunluk; ben++) {
   
    }
   }

2. Yılanın konumu herhangi bir noktanın koordinatlarıyla eşleşiyorsa, yılanın uzunluğunu artırın ve noktayı silin:

   eğer (yılanX < noktalar[i].x + 10 && 
    yılanX + 10 > noktalar[i].x && 
    yılanY < noktalar[i].y + 10 && 
    yılanY + 10 > noktalar[i].y) {
    yılan Uzunluğu++;
    noktalar.splice (i, 1);
   }

3. Oyun döngüsünde yeni checkCollision() işlevini çağırın:

   işlevoyun Döngüsü() {
    moveSnake();
    çizmekYılan();
    spawnNoktalar();
    checkCollision();
   eğer(!oyunBitti) {
    setTimeout (oyunDöngüsü, 100);
    }
   }

4. "index.html" dosyasını bir web tarayıcısında açın. Yiyecek parçalarını toplamak ve yılanı büyütmek için klavyeyi kullanarak yılanı hareket ettirin.

Oyun Nasıl Sonlandırılır?

Oyunu bitirmek için yılanın kendi kuyruğuna veya herhangi bir duvara çarpıp çarpmadığını kontrol edin.

1. "Oyun Bitti" uyarısı yazdırmak için yeni bir işlev oluşturun.

   işlevoyun bitti() {
    setTimeout(işlev() {
    uyarı("Oyun bitti!");
    }, 500); 
    oyunBitti = doğru
   }

2. checkCollision() işlevinin içinde, yılanın tuval duvarlarından herhangi birine çarpıp çarpmadığını kontrol edin. Öyleyse, gameOver() işlevini çağırın:

   eğer (yılanX < -10 || 
    yılan < -10 || 
    yılanX > tuval.genişlik+10 ||
    yılanY > canvas.height+10) {
    oyun bitti();
   }

3. Yılanın başının kuyruk bölümlerinden herhangi biriyle çarpıp çarpmadığını kontrol etmek için yılanın her bir parçasından geçirin:

   için (var ben = 1; i < yılanBölümleri.uzunluk; ben++) {
   }

4. For-loop içinde, yılanın kafasının konumunun herhangi bir kuyruk parçasıyla eşleşip eşleşmediğini kontrol edin. Eğer öyleyse, bu, kafanın kuyrukla çarpıştığı anlamına gelir, bu yüzden oyunu bitirin:

   eğer (yılanX yılanBölümleri[i].x && yılanY yılanBölümleri[i].y) {
    oyun bitti();
   }

5. "index.html" dosyasını bir web tarayıcısında açın. Oyunu bitirmek için bir duvara veya kendi kuyruğunuza çarpmaya çalışın.

Oyunlar Yoluyla JavaScript Kavramlarını Öğrenmek

Oyunlar oluşturmak, öğrenme deneyiminizi daha eğlenceli hale getirmenin harika bir yolu olabilir. JavaScript bilginizi geliştirmeye devam etmek için daha fazla oyun yapmaya devam edin.