Create the Canvas and draw on it

Bu çeviri eksik. Bu makaleyi İngilizceden tercüme etmemize yardım edin

Bu, Gamedev Canvas eğitiminde 10 üzerinden 1. adımdır . Bu dersi tamamladıktan sonra bakması gereken kaynak kodunu Gamedev-Canvas-workshop/lesson1.html adresinde bulabilirsiniz .

Oyunun işlevselliğini yazmaya başlamadan önce, oyunu içine işlemek için temel bir yapı oluşturmamız gerekiyor. Bu, HTML ve <canvas> öğesi kullanılarak yapılabilir.

Oyunun HTML'si

Oyun tamamen <canvas> öğesinde oluşturulacağı için HTML belge yapısı oldukça basittir. Favori metin düzenleyicinizi kullanarak yeni bir HTML belgesi oluşturun, index.htmlmantıklı bir konuma farklı kaydedin ve aşağıdaki kodu ona ekleyin:

<! DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8" />
    <title> Gamedev Canvas Workshop </title>
    <style>
    	* {dolgu: 0; kenar boşluğu: 0; }
    	canvas {arka plan: #eee; Ekran bloğu; kenar boşluğu: 0 otomatik; }
    </style>
</head>
<body>

<canvas id = "myCanvas" width = "480" height = "320"> </canvas>

<script>
	//JavaScript kodu buraya gelir
</script>

</body>
</html>

Biz var charsettanımlanmış <title> ve başlığında bazı temel CSS. Gövde <canvas> ve <script> öğeleri içerir - oyunu ilkinin içinde oluşturacağız ve onu kontrol eden JavaScript kodunu ikinciye yazacağız. <canvas> öğesinin, referansını kolayca almamızı sağlayan bir iddeğeri vardır myCanvasve 480 piksel genişliğinde ve 320 piksel yüksekliğindedir. Bu eğiticide yazacağımız tüm JavaScript kodu, açılış <script>ve kapanış </script>etiketleri arasında yer alacaktır .

Tuvalle ilgili temel bilgiler

<canvas> öğesinde gerçekten grafik oluşturabilmek için, önce JavaScript'te ona bir referans almalıyız. Aşağıdakini açılış <script>etiketinizin altına ekleyin .

var canvas = document.getElementById ("myCanvas");
var ctx = canvas.getContext ("2d");

Burada, canvasdeğişkene <canvas> öğesine bir referans kaydediyoruz . Ardından ctx, 2B oluşturma bağlamını depolamak için değişkeni oluşturuyoruz - bu, Tuval üzerine boyamak için kullanabileceğimiz gerçek araç.

Tuvale kırmızı bir kare yazdıran örnek bir kod parçası görelim. Bunu önceki JavaScript satırlarınızın altına ekleyin, ardından index.htmldenemek için bir tarayıcıya yükleyin .

ctx.beginPath ();
ctx.rect (20, 40, 50, 50);
ctx.fillStyle = "# FF0000";
ctx.fill ();
ctx.closePath ();

Tüm talimatlar beginPath () ve closePath() yöntemleri arasındadır. rect() kullanarak bir dikdörtgen tanımlıyoruz: ilk iki değer, tuval üzerindeki dikdörtgenin sol üst köşesinin koordinatlarını belirtirken, ikincisi dikdörtgenin genişliğini ve yüksekliğini belirtin. Bizim durumumuzda dikdörtgen ekranın sol tarafından 20 piksel ve üst tarafından 40 piksel olarak boyanmıştır ve 50 piksel genişliğinde ve 50 piksel yüksekliğindedir, bu da onu mükemmel bir kare yapar. fillStyle özelliği,

Dikdörtgenlerle sınırlı değiliz - işte yeşil bir daire yazdırmak için bir kod parçası. Bunu JavaScript'inizin altına eklemeyi, kaydetmeyi ve yenilemeyi deneyin:

ctx.beginPath ();
ctx.arc (240, 160, 20, 0, Math.PI * 2, false);
ctx.fillStyle = "yeşil";
ctx.fill ();
ctx.closePath ();

Gördüğünüz gibi beginPath() ve closePath() kullanıyoruz yine yöntemler. Bunların arasında, yukarıdaki kodun en önemli kısmı arc() yöntemidir. Altı parametre alır:

  • xve yyayın merkezinin koordinatları
  • yay yarıçapı
  • başlangıç ​​açısı ve bitiş açısı (daire çizmenin radyan cinsinden hangi açı ile başlayıp bitirileceği)
  • çizim yönü ( falsesaat yönünde, varsayılan veya truesaat yönünün tersi için.) Bu son parametre isteğe bağlıdır.

fillStyle özelliği öncekinden farklı görünüyor. Bunun nedeni, tıpkı CSS'de olduğu gibi, rengin onaltılık bir değer, renk anahtar sözcüğü, rgba()işlev veya diğer mevcut renk yöntemlerinden herhangi biri olarak belirtilebilmesidir.

fill() kullanmak ve şekilleri renklerle doldurmak yerine strok() kullanabiliriz yalnızca dış konturu renklendirmek için. Bu kodu JavaScript'inize de eklemeyi deneyin:

ctx.beginPath ();
ctx.rect (160, 10, 100, 40);
ctx.strokeStyle = "rgba (0, 0, 255, 0.5)";
ctx.stroke ();
ctx.closePath ();

Yukarıdaki kod, mavi konturlu boş bir dikdörtgen yazdırır. rgba()Fonksiyondaki alfa kanalı sayesinde mavi renk yarı şeffaftır.

Kodunuzu karşılaştırın

İşte bir JSFiddle'da canlı olarak çalıştırılan ilk dersin tam kaynak kodu:

Alıştırma : Verilen şekillerin boyutunu ve rengini değiştirmeyi deneyin.

Sonraki adımlar

Şimdi temel HTML'yi kurduk ve tuval hakkında biraz bilgi edindik, ikinci bölüme geçelim ve oyunumuzda topu nasıl hareket ettireceğimize bakalım .