History

leestott 3a46c7dc91 🌐 Update translations via Co-op Translator		3 weeks ago
..
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

Unescape Escape

Uzay Oyunu Yapımı Bölüm 2: Kahraman ve Canavarları Tuvale Çizmek

Ders Öncesi Test

Ders öncesi test

Tuval (Canvas)

Tuval, varsayılan olarak içeriği olmayan bir HTML öğesidir; boş bir zemin gibidir. Üzerine çizim yaparak içerik eklemeniz gerekir.

✅ MDN'de Canvas API hakkında daha fazla bilgi edinin.

Genellikle sayfanın gövdesinde şu şekilde tanımlanır:

<canvas id="myCanvas" width="200" height="100"></canvas>

Yukarıda id, width ve height ayarlarını yapıyoruz.

id: Tuval ile etkileşim kurmanız gerektiğinde bir referans alabilmek için bunu ayarlayın.
width: Bu, öğenin genişliğidir.
height: Bu, öğenin yüksekliğidir.

Basit Geometri Çizimi

Tuval, bir şeyleri çizmek için kartezyen koordinat sistemini kullanır. Bu nedenle bir şeyin nerede bulunduğunu ifade etmek için x ve y eksenlerini kullanır. 0,0 konumu sol üst pozisyondur ve sağ alt köşe, tuvalin genişlik ve yüksekliği olarak belirttiğiniz değerdir.

Görsel MDN kaynağından alınmıştır.

Tuval öğesi üzerine çizim yapmak için aşağıdaki adımları takip etmeniz gerekir:

Tuval öğesine bir referans alın.
Tuval öğesi üzerinde bulunan Context öğesine bir referans alın.
Context öğesini kullanarak bir çizim işlemi gerçekleştirin.

Yukarıdaki adımların kodu genellikle şu şekilde görünür:

// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height

✅ Canvas API çoğunlukla 2D şekillere odaklanır, ancak bir web sitesine 3D öğeler de çizebilirsiniz; bunun için WebGL API kullanabilirsiniz.

Canvas API ile şunları çizebilirsiniz:

Geometrik şekiller, dikdörtgen çizmenin nasıl yapıldığını gösterdik, ancak çizebileceğiniz çok daha fazla şey var.
Metin, istediğiniz yazı tipi ve renkle metin çizebilirsiniz.
Görseller, bir .jpg veya .png gibi bir görsel varlığından görsel çizebilirsiniz.

✅ Deneyin! Dikdörtgen çizmeyi biliyorsunuz, bir sayfaya daire çizebilir misiniz? CodePen'deki bazı ilginç Canvas çizimlerine göz atın. İşte özellikle etkileyici bir örnek.

Görsel Varlık Yükleme ve Çizme

Bir görsel varlığı yüklemek için bir Image nesnesi oluşturup src özelliğini ayarlarsınız. Ardından, kullanıma hazır olduğunu bilmek için load olayını dinlersiniz. Kod şu şekilde görünür:

Varlık Yükleme

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // image loaded and ready to be used
}

Varlık Yükleme Deseni

Yukarıdaki işlemi şu şekilde bir yapı içinde sarmalamanız önerilir, böylece kullanımı daha kolay olur ve yalnızca tamamen yüklendiğinde işlem yapmaya çalışırsınız:

function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}

Oyun varlıklarını ekrana çizmek için kodunuz şu şekilde görünür:

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')

  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
  ctx.drawImage(monsterImg, 0,0);
}

Artık Oyununuzu Yapmaya Başlama Zamanı

Ne Yapılacak

Bir Canvas öğesi içeren bir web sayfası yapacaksınız. 1024*768 boyutlarında siyah bir ekran oluşturulmalı. Size iki görsel sağladık:

Kahraman gemisi
5*5 canavar

Geliştirmeye Başlamak İçin Önerilen Adımlar

your-work alt klasöründe sizin için oluşturulmuş dosyaları bulun. Şunları içermelidir:

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

Bu klasörün bir kopyasını Visual Studio Code'da açın. Yerel bir geliştirme ortamı kurulu olmalı, tercihen Visual Studio Code ile NPM ve Node yüklü. Bilgisayarınızda npm kurulu değilse, işte nasıl yapılacağı.

Projenize your_work klasörüne giderek başlayın:

cd your-work
npm start

Yukarıdaki işlem, http://localhost:5000 adresinde bir HTTP Sunucusu başlatacaktır. Bir tarayıcı açın ve bu adresi girin. Şu anda boş bir sayfa görünecek, ancak bu değişecek.

Not: Ekrandaki değişiklikleri görmek için tarayıcınızı yenileyin.

Kod Ekleme

Aşağıdaki görevleri çözmek için your-work/app.js dosyasına gerekli kodu ekleyin:

Tuvali siyah bir arka planla çizin

ipucu: /app.js dosyasındaki uygun TODO'nun altına iki satır ekleyin, ctx öğesini siyah olarak ayarlayın ve üst/sol koordinatları 0,0 olarak, yükseklik ve genişliği tuvalin boyutlarına eşit olarak ayarlayın.
Dokuları yükleyin

ipucu: Görselleri await loadTexture kullanarak ve görsel yolunu geçirerek ekleyin. Henüz ekranda görünmeyecekler!
Kahramanı ekranın alt yarısının ortasına çizin

ipucu: Kahraman görselini ekrana çizmek için drawImage API'sini kullanın, canvas.width / 2 - 45 ve canvas.height - canvas.height / 4) ayarlarını yapın.

5*5 canavarları çizin

ipucu: Şimdi canavarları ekrana çizmek için kodu yorumdan çıkarabilirsiniz. Ardından createEnemies fonksiyonuna gidin ve onu oluşturun.

Öncelikle bazı sabitler ayarlayın:

const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;

ardından, canavarlar dizisini ekrana çizmek için bir döngü oluşturun:

for (let x = START_X; x < STOP_X; x += 98) {
    for (let y = 0; y < 50 * 5; y += 50) {
      ctx.drawImage(enemyImg, x, y);
    }
  }

Sonuç

Tamamlanmış sonuç şu şekilde görünmelidir:

Çözüm

Önce kendiniz çözmeyi deneyin, ancak takılırsanız çözüme göz atabilirsiniz.

🚀 Meydan Okuma

2D odaklı Canvas API ile çizim yapmayı öğrendiniz; WebGL API'ye bir göz atın ve 3D bir nesne çizmeyi deneyin.

Ders Sonrası Test

Ders sonrası test

Gözden Geçirme ve Kendi Kendine Çalışma

Canvas API hakkında daha fazla bilgi edinmek için okuyun.

Ödev

Canvas API ile oynayın

Feragatname:
Bu belge, Co-op Translator adlı yapay zeka çeviri hizmeti kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlama veya yanlış yorumlamalardan sorumlu değiliz.

README.md Unescape Escape