From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../create_the_canvas_and_draw_on_it/index.html | 110 +++++++++++++++++++++ .../2d_breakout_game_pure_javascript/index.html | 51 ++++++++++ 2 files changed, 161 insertions(+) create mode 100644 files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html create mode 100644 files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html (limited to 'files/tr/games/tutorials/2d_breakout_game_pure_javascript') diff --git a/files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html new file mode 100644 index 0000000000..ac5a0f560d --- /dev/null +++ b/files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html @@ -0,0 +1,110 @@ +--- +title: Create the Canvas and draw on it +slug: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +translation_of: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav ("/en-US/docs/Oyunlar")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

+ +
+

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 {{htmlelement ("canvas")}} öğesi kullanılarak yapılabilir.

+ +

Oyunun HTML'si

+ +

Oyun tamamen {{htmlelement("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ış {{htmlelement( "title")}} ve başlığında bazı temel CSS. Gövde {{htmlelement("canvas")}} ve {{htmlelement("script")}} öğeleri içerir - oyunu ilkinin içinde oluşturacağız ve onu kontrol eden JavaScript kodunu ikinciye yazacağız. {{Htmlelement("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

+ +

{{Htmlelement("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 {{htmlelement("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 {{domxref("CanvasRenderingContext2D.beginPath()", "beginPath ()")}} ve {{domxref("CanvasRenderingContext2D.closePath()", "closePath()")}} yöntemleri arasındadır. {{Domxref("CanvasRenderingContext2D.rect ()", "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. {{Domxref("CanvasRenderingContext2D.fillStyle", "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 {{domxref("CanvasRenderingContext2D.beginPath ()", "beginPath()")}} ve {{domxref("CanvasRenderingContext2D.closePath ()", "closePath()")}} kullanıyoruz yine yöntemler. Bunların arasında, yukarıdaki kodun en önemli kısmı {{domxref("CanvasRenderingContext2D.arc()", "arc()")}} yöntemidir. Altı parametre alır:

+ + + +

{{Domxref("CanvasRenderingContext2D.fillStyle", "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.

+ +

{{Domxref("CanvasRenderingContext2D.fill()", "fill()")}} kullanmak ve şekilleri renklerle doldurmak yerine {{domxref("CanvasRenderingContext2D.stroke()", "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:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/", "", "395")}}

+ +
+

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 .

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

diff --git a/files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html new file mode 100644 index 0000000000..3a821095a6 --- /dev/null +++ b/files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html @@ -0,0 +1,51 @@ +--- +title: 2D breakout game using pure JavaScript +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}}

+ +

In this step-by-step tutorial we create a simple MDN Breakout game written entirely in pure JavaScript and rendered on HTML5 {{htmlelement("canvas")}}.

+ +

Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states.

+ +

To get the most out of this series of articles you should already have basic to intermediate JavaScript knowledge. After working through this tutorial you should be able to build your own simple Web games.

+ +

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

+ +

Lesson details

+ +

All the lessons — and the different versions of the MDN Breakout game we are building together — are available on GitHub:

+ +
    +
  1. Create the Canvas and draw on it
    2. +
  2. Move the ball
    3. +
  3. Bounce off the walls
    4. +
  4. Paddle and keyboard controls
    5. +
  5. Game over
    6. +
  6. Build the brick field
    7. +
  7. Collision detection
    8. +
  8. Track the score and win
    9. +
  9. Mouse controls
    10. +
  10. Finishing up
    11. +
+ +

Starting with pure JavaScript is the best way to get a solid knowledge of web game development. After that, you can pick any framework you like and use it for your projects. Frameworks are just tools built with the JavaScript language; so even if you plan on working with them, it's good to learn about the language itself first to know what exactly is going on under the hood. Frameworks speed up development time and help take care of boring parts of the game, but if something is not working as expected, you can always try to debug that or just write your own solutions in pure JavaScript.

+ +
+

Note: If you are interested in learning about 2D web game development using a game library, consult this series' counterpart, 2D breakout game using Phaser.

+
+ +
+

Note: This series of articles can be used as material for hands-on game development workshops. You can also make use of the Gamedev Canvas Content Kit based on this tutorial if you want to give a talk about game development in general.

+
+ +

Next steps

+ +

Ok, let's get started! Head to the first chapter— Create the Canvas and draw on it.

+ +

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} 

-- cgit v1.2.3-54-g00ecf