aboutsummaryrefslogtreecommitdiff
path: root/files/tr/games/tutorials
diff options
context:
space:
mode:
authorRyan Johnson <rjohnson@mozilla.com>2021-04-29 16:16:42 -0700
committerGitHub <noreply@github.com>2021-04-29 16:16:42 -0700
commit95aca4b4d8fa62815d4bd412fff1a364f842814a (patch)
tree5e57661720fe9058d5c7db637e764800b50f9060 /files/tr/games/tutorials
parentee3b1c87e3c8e72ca130943eed260ad642246581 (diff)
downloadtranslated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip
remove retired locales (#699)
Diffstat (limited to 'files/tr/games/tutorials')
-rw-r--r--files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html110
-rw-r--r--files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html51
-rw-r--r--files/tr/games/tutorials/index.html27
3 files changed, 0 insertions, 188 deletions
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
deleted file mode 100644
index ac5a0f560d..0000000000
--- a/files/tr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
----
-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
----
-<div>{{GamesSidebar}}</div>
-
-<div>{{IncludeSubnav ("/en-US/docs/Oyunlar")}}</div>
-
-<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}</p>
-
-<div class="summary">
-<p>Bu, <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas eğitiminde</a> 10 üzerinden <strong>1. adımdır</strong> . Bu dersi tamamladıktan sonra bakması gereken kaynak kodunu <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html">Gamedev-Canvas-workshop/lesson1.html adresinde bulabilirsiniz</a> .</p>
-</div>
-
-<p><span class="seoSummary">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.</span></p>
-
-<h2 id="Oyunun_HTMLsi">Oyunun HTML'si</h2>
-
-<p>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, <code>index.html</code>mantıklı bir konuma farklı kaydedin ve aşağıdaki kodu ona ekleyin:</p>
-
-<pre class="brush: html notranslate">&lt;! DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
- &lt;meta charset = "utf-8" /&gt;
- &lt;title&gt; Gamedev Canvas Workshop &lt;/title&gt;
- &lt;style&gt;
- * {dolgu: 0; kenar boşluğu: 0; }
- canvas {arka plan: #eee; Ekran bloğu; kenar boşluğu: 0 otomatik; }
- &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-
-&lt;canvas id = "myCanvas" width = "480" height = "320"&gt; &lt;/canvas&gt;
-
-&lt;script&gt;
- //JavaScript kodu buraya gelir
-&lt;/script&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p>Biz var <code>charset</code>tanı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 <code>id</code>değeri vardır <code>myCanvas</code>ve 480 piksel genişliğinde ve 320 piksel yüksekliğindedir. Bu eğiticide yazacağımız tüm JavaScript kodu, açılış <code>&lt;script&gt;</code>ve kapanış <code>&lt;/script&gt;</code>etiketleri arasında yer alacaktır .</p>
-
-<h2 id="Tuvalle_ilgili_temel_bilgiler">Tuvalle ilgili temel bilgiler</h2>
-
-<p>{{Htmlelement("canvas")}} öğesinde gerçekten grafik oluşturabilmek için, önce JavaScript'te ona bir referans almalıyız. Aşağıdakini açılış <code>&lt;script&gt;</code>etiketinizin altına ekleyin .</p>
-
-<pre class="brush: js notranslate">var canvas = document.getElementById ("myCanvas");
-var ctx = canvas.getContext ("2d");</pre>
-
-<p>Burada, <code>canvas</code>değişkene {{htmlelement("canvas")}} öğesine bir referans kaydediyoruz . Ardından <code>ctx</code>, 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ç.</p>
-
-<p>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 <code>index.html</code>denemek için bir tarayıcıya yükleyin .</p>
-
-<pre class="brush: js notranslate">ctx.beginPath ();
-ctx.rect (20, 40, 50, 50);
-ctx.fillStyle = "# FF0000";
-ctx.fill ();
-ctx.closePath ();</pre>
-
-<p>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,</p>
-
-<p>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:</p>
-
-<pre class="brush: js notranslate">ctx.beginPath ();
-ctx.arc (240, 160, 20, 0, Math.PI * 2, false);
-ctx.fillStyle = "yeşil";
-ctx.fill ();
-ctx.closePath ();</pre>
-
-<p>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:</p>
-
-<ul>
- <li><code>x</code>ve <code>y</code>yayın merkezinin koordinatları</li>
- <li>yay yarıçapı</li>
- <li>başlangıç ​​açısı ve bitiş açısı (daire çizmenin radyan cinsinden hangi açı ile başlayıp bitirileceği)</li>
- <li>çizim yönü ( <code>false</code>saat yönünde, varsayılan veya <code>true</code>saat yönünün tersi için.) Bu son parametre isteğe bağlıdır.</li>
-</ul>
-
-<p>{{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üğü, <code>rgba()</code>işlev veya diğer mevcut renk yöntemlerinden herhangi biri olarak belirtilebilmesidir.</p>
-
-<p>{{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:</p>
-
-<pre class="brush: js notranslate">ctx.beginPath ();
-ctx.rect (160, 10, 100, 40);
-ctx.strokeStyle = "rgba (0, 0, 255, 0.5)";
-ctx.stroke ();
-ctx.closePath ();</pre>
-
-<p>Yukarıdaki kod, mavi konturlu boş bir dikdörtgen yazdırır. <code>rgba()</code>Fonksiyondaki alfa kanalı sayesinde mavi renk yarı şeffaftır.</p>
-
-<h2 id="Kodunuzu_karşılaştırın">Kodunuzu karşılaştırın</h2>
-
-<p>İşte bir JSFiddle'da canlı olarak çalıştırılan ilk dersin tam kaynak kodu:</p>
-
-<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/", "", "395")}}</p>
-
-<div class="note">
-<p><strong>Alıştırma</strong> : Verilen şekillerin boyutunu ve rengini değiştirmeyi deneyin.</p>
-</div>
-
-<h2 id="Sonraki_adımlar">Sonraki adımlar</h2>
-
-<p>Şimdi temel HTML'yi kurduk ve tuval hakkında biraz bilgi edindik, ikinci bölüme geçelim ve <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Move_the_ball">oyunumuzda topu</a> nasıl <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Move_the_ball">hareket</a> ettireceğimize bakalım .</p>
-
-<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}</p>
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
deleted file mode 100644
index 3a821095a6..0000000000
--- a/files/tr/games/tutorials/2d_breakout_game_pure_javascript/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: 2D breakout game using pure JavaScript
-slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript
-translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript
----
-<div>{{GamesSidebar}}</div>
-
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
-
-<p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}}</p>
-
-<p class="summary">In this step-by-step tutorial we create a simple <strong>MDN Breakout</strong> game written entirely in pure JavaScript and rendered on HTML5 {{htmlelement("canvas")}}.</p>
-
-<p>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.</p>
-
-<p>To get the most out of this series of articles you should already have basic to intermediate <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> knowledge. After working through this tutorial you should be able to build your own simple Web games.</p>
-
-<p><img alt="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." src="https://mdn.mozillademos.org/files/10383/mdn-breakout-gameplay.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
-
-<h2 id="Lesson_details">Lesson details</h2>
-
-<p>All the lessons — and the different versions of the <a href="http://breakout.enclavegames.com/lesson10.html">MDN Breakout game</a> we are building together — are <a href="https://github.com/end3r/Canvas-gamedev-workshop">available on GitHub</a>:</p>
-
-<ol>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Create the Canvas and draw on it</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">Move the ball</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">Bounce off the walls</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">Paddle and keyboard controls</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">Game over</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">Build the brick field</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">Collision detection</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">Track the score and win</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">Mouse controls</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">Finishing up</a></li>
-</ol>
-
-<p>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.</p>
-
-<div class="note">
-<p><strong>Note</strong>: If you are interested in learning about 2D web game development using a game library, consult this series' counterpart, <a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a>.</p>
-</div>
-
-<div class="note">
-<p><strong>Note</strong>: This series of articles can be used as material for hands-on game development workshops. You can also make use of the <a href="https://github.com/end3r/Gamedev-Canvas-Content-Kit">Gamedev Canvas Content Kit</a> based on this tutorial if you want to give a talk about game development in general.</p>
-</div>
-
-<h2 id="Next_steps">Next steps</h2>
-
-<p>Ok, let's get started! Head to the first chapter— <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Create the Canvas and draw on it</a>.</p>
-
-<p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} </p>
diff --git a/files/tr/games/tutorials/index.html b/files/tr/games/tutorials/index.html
deleted file mode 100644
index 90d1cb0790..0000000000
--- a/files/tr/games/tutorials/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Tutorials
-slug: Games/Tutorials
-tags:
- - Canvas
- - Games
- - JavaScript
- - NeedsTranslation
- - TopicStub
- - Web
- - Workflows
-translation_of: Games/Tutorials
----
-<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
-
-<p>This page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a></dt>
- <dd>In this step-by-step tutorial you'll implement a simple breakout clone using pure JavaScript. Along the way you will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.</dd>
- <dt><a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a></dt>
- <dd>In this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using the<a class="external external-icon" href="http://phaser.io/">Phaser</a> HTML5 game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">2D maze game with device orientation</a></dt>
- <dd>This tutorial shows how to create a 2D maze game using HTML5, incorporating fundamentals such as collision detection and sprite placement on a {{htmlelement("canvas")}}. This is a mobile game that uses the <a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> and <a href="/en-US/docs/Web/Guide/API/Vibration">Vibration</a><strong> APIs</strong> to enhance the gameplay and is built using the <a href="http://phaser.io/">Phaser</a> framework.</dd>
- <dt><a href="https://mozdevs.github.io/html5-games-workshop/en/guides/platformer/start-here/">2D platform game with Phaser</a></dt>
- <dd>This tutorial series shows how to create a simple platform game using <a href="http://phaser.io/">Phaser</a>, covering fundamentals such as sprites, collisions, physics, collectables, and more.</dd>
-</dl>