unslug ja: move

14 files changed, 1290 insertions, 0 deletions

diff --git a/files/ja/games/tutorials/2d_breakout_game_phaser/index.html b/files/ja/games/tutorials/2d_breakout_game_phaser/index.html
new file mode 100644
index 0000000000..4aecfe19b7
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_phaser/index.html
@@ -0,0 +1,63 @@
+---
+title: 2D breakout game using Phaser
+slug: Games/Workflows/2D_breakout_game_Phaser
+tags:
+  - 2D
+  - Beginner
+  - Canvas
+  - Games
+  - JavaScript
+  - NeedsTranslation
+  - Phaser
+  - TopicStub
+  - Tutorial
+translation_of: Games/Tutorials/2D_breakout_game_Phaser
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}</p>
+
+<p class="summary">In this step-by-step tutorial we create a simple mobile <strong>MDN Breakout</strong> game written in JavaScript, using the <a href="http://phaser.io/">Phaser</a> framework.</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 Phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, framework-specific helper functions, animations and tweens, 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 with Phaser.</p>
+
+<p><img alt="Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives." src="https://mdn.mozillademos.org/files/11323/mdn-breakout-phaser.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="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/lesson16.html">MDN Breakout game</a> we are building together — are <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/">available on GitHub</a>:</p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialize the framework</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Scaling">Scaling</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen">Load the assets and print them on screen</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball">Move the ball</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Physics">Physics</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/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_Phaser/Player_paddle_and_controls">Player paddle and controls</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Game_over">Game over</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/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_Phaser/Collision_detection">Collision detection</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score">The score</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Win_the_game">Win the game</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Extra_lives">Extra lives</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens">Animations and tweens</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons">Buttons</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay">Randomizing gameplay</a></li>
+</ol>
+
+<p>As a note on learning paths — starting with pure JavaScript is the best way to get a solid knowledge of web game development. If you are not already familiar with pure JavaScript game development, we'd suggest that you first work through this series' counterpart, <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a>.</p>
+
+<p>After that, you can pick any framework you like and use it for your projects; we've chosen Phaser as it is a good solid framework, with a good support and community available, and a good set of plugins. Frameworks speed up development time and help take care of the boring parts, allowing you to concentrate on the fun stuff. However, frameworks are not always perfect, so if something unexpected happens or you want to write some functionality that the framework doesn't provide, you'll need some pure JavaScript knowledge.</p>
+
+<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-Phaser-Content-Kit">Gamedev Phaser Content Kit</a> based on this tutorial if you want to give a talk about game development with Phaser.</p>
+</div>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>Ok, let's get started! Head to the first part of the series — <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialize the framework</a>.</p>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}</p>
diff --git a/files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html b/files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html
new file mode 100644
index 0000000000..8ab82a8be7
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html
@@ -0,0 +1,90 @@
+---
+title: 物理演算
+slug: Games/Workflows/2D_breakout_game_Phaser/Physics
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/Physics
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}}</p>
+
+<div class="summary">
+<p>全 16回の<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">ゲーム開発チュートリアル</a> の 5 回目です。 今回終了後のソースコードは <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson05.html">Gamedev-Phaser-Content-Kit/demos/lesson05.html</a> でご覧になれます。</p>
+</div>
+
+<p><span class="seoSummary">モノ同士の衝突を正しく処理するためには、物理演算が必要になります。この文書では、Phaser での実装と、典型的な例を紹介します。</span></p>
+
+<h2 id="物理演算の追加">物理演算の追加</h2>
+
+<p>Phaser は Arcade Physics、P2、そして Ninja Physics  と、3 つの異なる物理演算エンジンを備えています。また商用プラグインとして Box2D も物理演算エンジンとして利用できます。チュートリアルで作成しているような単純なゲームでは、複雑な幾何計算を必要としません。そのような場合には Arcade Physics を利用すると良いでしょう。</p>
+
+<p>まず Arcade Physics engine を初期化します。初期化は <code>create </code>関数の先頭で、 <code>physics.startSystem()</code> メソッドを呼ぶことで行います：</p>
+
+<pre class="brush: js">game.physics.startSystem(Phaser.Physics.ARCADE);
+</pre>
+
+<p>標準では Phaser オブジェクトは物理演算エンジンを利用しません。そのため、<code>create()</code>  の末尾に次の行を追加して、ボールから物理演算エンジンを利用できるようにします：</p>
+
+<pre class="brush: js">game.physics.enable(ball, Phaser.Physics.ARCADE);
+</pre>
+
+<p>次にボールを動かします。次のように、<code>create() </code>末尾で body 属性の持つ <code>velocity</code> 属性を設定します：</p>
+
+<pre class="brush: js">ball.body.velocity.set(150, 150);
+</pre>
+
+<h2 id="以前作成した、更新処理の削除">以前作成した、更新処理の削除</h2>
+
+<p><code>update()</code>関数から忘れずに、x と y の値の更新処理を削除しておきましょう：</p>
+
+<pre class="brush: js">function update() {
+<s>    ball.x += 1;</s>
+<s>    ball.y += 1;</s>
+}
+</pre>
+
+<p>以上で、物理演算エンジンを組み込むことができました。</p>
+
+<h2 id="最終的に作成されたコード">最終的に作成されたコード</h2>
+
+<p>最終的に得られたコードは以下の通りです：</p>
+
+<pre class="brush: js">var ball;
+
+function preload() {
+    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+    game.scale.pageAlignHorizontally = true;
+    game.scale.pageAlignVertically = true;
+    game.stage.backgroundColor = '#eee';
+    game.load.image('ball', 'img/ball.png');
+}
+
+function create() {
+    game.physics.startSystem(Phaser.Physics.ARCADE);
+    ball = game.add.sprite(50, 50, 'ball');
+    game.physics.enable(ball, Phaser.Physics.ARCADE);
+    ball.body.velocity.set(150, 150);
+}
+
+function update() {
+}
+</pre>
+
+<p><code>index.html</code> を再読み込みすると、ボールは 1 方向に進み続けます。現在、物理エンジンには重力加速度も摩擦係数も設定されていません。重力加速度を設定すれば、ボールは落下するようになります。また、摩擦係数を設定すれば、ボールが摩擦で停止するようになります。</p>
+
+<h2 id="より進んだ内容">より進んだ内容</h2>
+
+<p>今回扱った内容以外にもできることはたくさんあります。例えば、 <code>ball.body.gravity.y = 100;</code> と追加することで、ボールに影響する重力を設定できます。その結果として、ボールが重力に引かれて、落下するようになります。</p>
+
+<p>このような機能はほんの一部分です。<a href="http://phaser.io/docs#physics">physics documentation</a> には、物理演算に関する数多くの関数と変数が、<a href="http://phaser.io/examples/v2/category/arcade-physics">Arcade</a> と <a href="http://phaser.io/examples/v2/category/p2-physics">P2</a> 物理演算エンジンの使用例とともに解説されています。</p>
+
+<h2 id="自分のコードと比較しよう">自分のコードと比較しよう</h2>
+
+<p>上記のコードや、下記のデモと比較して、どのように動作しているかを理解しましょう。</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/bjto9nj8/","","400")}}</p>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>次のステップでは、<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls">ボールの跳ね返り</a> を実装します。</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}}</p>
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html
new file mode 100644
index 0000000000..b8e5486a80
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html
@@ -0,0 +1,105 @@
+---
+title: ボールを壁で弾ませる
+slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}</p>
+
+<div class="summary">
+<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>3番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html" rel="noopener">Gamedev-Canvas-workshop/lesson3.html</a>で入手できます。</p>
+</div>
+
+<p><span class="seoSummary">ボールが動くのを見られたのは良いことですが、画面からすぐ消えてしまっては面白くないじゃありませんか! これを解決するためにとても簡単な衝突検知 (<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection">後ほど</a>詳しく説明します) を導入し、Canvasの四辺でボールを弾ませます。</span></p>
+
+<h2 id="簡単な衝突検知">簡単な衝突検知</h2>
+
+<p>衝突を検知するためにボールが壁に触っている (衝突している) か確かめ、もし触っている場合には動く方向をそれに従って変更します。</p>
+
+<p>計算を簡単にするために、描画される円の半径をもつ<code>ballRadius</code>という変数を定義しましょう。次のコードを既にどこかにある変数定義の後に追記しましょう。</p>
+
+<pre class="brush: js">var ballRadius = 10;</pre>
+
+<p>あわせて<code>drawBall()</code>関数内のボールを描画している行も次のように更新しましょう。</p>
+
+<pre class="brush: js">ctx.arc(x, y, ballRadius, 0, Math.PI*2);</pre>
+
+<h3 id="上端と下端で弾ませる">上端と下端で弾ませる</h3>
+
+<p>ボールを弾ませる壁は4つあります。まずは上端に注目しましょう。毎フレーム、ボールがCanvasの上端に触っているかどうか確認する必要があります。もし触っているなら、ボールの動きを反転させ、ボールが反対方向に動き、視界の範囲内に留まるようにしましす。座標系は左上端から始まることを思い出しながら考えてみれば、次のようなコードが思いつくでしょう。</p>
+
+<pre class="brush: js">if(y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>もしボールの位置の<code>y</code>の値が0未満だったら、符号反転させた値を設定することでy軸方向の動きの向きを変えます。もしボールが上に向かって毎フレーム2ピクセルの速さで動いていたら、今度は「上」に向かって毎フレーム-2ピクセルの速さで動く、つまり下に向かって毎フレーム2ピクセルの速さで動きます。</p>
+
+<p>上記のコードは上端でボールを弾ませていました。では今度は下端について考えてみましょう。</p>
+
+<pre class="brush: js">if(y + dy &gt; canvas.height) {
+    dy = -dy;
+}</pre>
+
+<p><code>y</code>座標がCanvasの高さより高かったら(左上端から<code>y</code>の値を数えているため、上端は0で始まり下端はCanvasの高さである480ピクセルとなることを思い出してください) 、先程のように<code>y</code>軸方向の動きを反転させます。</p>
+
+<p>これら2つの文を合わせればコードの冗長さを減らせます。</p>
+
+<pre class="brush: js">if(y + dy &gt; canvas.height || y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>2つの文のどちらかが<code>true</code>だったら、ボールの動きを反転させます。</p>
+
+<h3 id="左端と右端で弾ませる">左端と右端で弾ませる</h3>
+
+<p>上端と下端を対処したところで、左端と右端を考えてみましょう。実のところとても良く似ていて、<code>y</code>を<code>x</code>で置き換えて文を繰り返すだけでよいのです。</p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width || x + dx &lt; 0) {
+    dx = -dx;
+}
+
+if(y + dy &gt; canvas.height || y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>ここで上記のコードをdraw()関数の、ちょうど閉じ波括弧の前に挿入しておいてください。</p>
+
+<h3 id="まだボールが壁に隠れる!">まだボールが壁に隠れる!</h3>
+
+<p>ここであなたのコードを試してみましょう。驚くはずです。Canvasの四辺全てでボールが弾んでいます! でも別の問題がありました。ボールが壁にぶつかるとき、位置を変える少し前に壁に沈んでしまいます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10432/ball-in-wall.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<p>壁と円周の衝突地点を計算すべきところで、壁と円の中心の衝突地点を計算しているのがこの理由です。ボールは壁に触ったときに弾むべきで、壁に半分のめり込んだときに弾んでも仕方ありません。そこで円周を含めるために文を少し調節します。最後に追加したコードを次のように書き換えます。</p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
+    dx = -dx;
+}
+if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
+    dy = -dy;
+}</pre>
+
+<p>ボールの中心と辺の距離がボールの半径とちょうど等しくなったときに動く向きを変えます。半径を辺の長さから引き、もう一方では足すことで衝突検知が正しく行われたような印象が出ます。思ったとおり、壁にぶつかった時点でボールが弾むようになります。</p>
+
+<h2 id="自分のコードと比べる">自分のコードと比べる</h2>
+
+<p>もう一度、このパートを終えた後にできたコードと比べてみて、それからコードで遊んでみてください。</p>
+
+
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}</p>
+
+
+
+<div class="note">
+<p><strong>練習</strong>: 壁に当たるたびにボールの色をランダムに変えてみてください。</p>
+</div>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>ボールが動き、かつゲームボードに留まるようになることまでこぎつけました。第4章では操作できるパドルを実装してみます。 <a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">パドルとキーボード操作</a>を見てみましょう。</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}</p>
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html
new file mode 100644
index 0000000000..b85ae7fccf
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html
@@ -0,0 +1,112 @@
+---
+title: ブロックのかたまりを作る
+slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ja/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}}</p>
+
+<div class="summary">
+<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>6番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html" rel="noopener">Gamedev-Canvas-workshop/lesson6.html</a>で入手できます。</p>
+</div>
+
+<p><span class="seoSummary">ゲームプレイ制御を修正することにより負けることができるようになります。この大きな変更により、ついにゲームらしさを感じられるようになりました。ですが、壁とパドルでボールが弾むだけではすぐに空きてしまいます。ブロック崩しで本当に必要な要素、それはボールで崩すことができるブロックです。これが今回作り込んでいく部分になります。</span></p>
+
+<h2 id="ブロック変数を設定する">ブロック変数を設定する</h2>
+
+<p>このレッスンのおおまかな目標は、ブロックのための、2次元配列を走査する入れ子のループを使った数行のコードを書き上げることです。しかしその前に幅と高さ、行と列などといった情報を定義するいくつかの変数が必要です。自分のコードの、以前変数を宣言した場所の下に次のコードを追加してください。</p>
+
+<pre class="brush: js">var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffsetTop = 30;
+var brickOffsetLeft = 30;</pre>
+
+<p>ここではブロックの行と列の数、幅と高さ、ブロックがくっつかないようにするブロック間の隙間、そしてキャンバスの端に描画されないようにするための上端、左端からの相対位置を定義しました。</p>
+
+<p>1つの2次元配列で全てのブロックを記録します。2次元配列はブロックの列 (c) を含んでおり、列は行 (r) を含み、行はそれぞれのブロックが描画される画面上の<code>x</code>座標と<code>y</code>座標をもつオブジェクトを含んでいます。</p>
+
+<pre class="brush: js">var bricks = [];
+for(var c=0; c&lt;brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r&lt;brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0 };
+    }
+}</pre>
+
+<p>上記のコードは行と列を通してループし、新しいブロックを作ります。このブロックオブジェクトは後に<u>衝突検出のためにも使われる</u>ことを覚えておいてください。</p>
+
+<h2 id="ブロック描画ロジック">ブロック描画ロジック</h2>
+
+<p>配列に含まれる全てのブロックを通してループする関数を作成し、画面上に描画しましょう。コードは次のようになります。</p>
+
+<pre class="brush: js">function drawBricks() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            bricks[c][r].x = 0;
+            bricks[c][r].y = 0;
+            ctx.beginPath();
+            ctx.rect(0, 0, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}</pre>
+
+<p>もう一度、行と列を通してループし、それぞれのブロックの<code>x</code>座標と<code>y</code>座標を設定するとともに、1回ループを回るごとに大きさ<code>brickWidth</code> x <code>brickHeight</code>のブロックをCanvas上に描画しています。問題はそれら全てを1箇所、座標<code>(0,0)</code>に描画していることです。それぞれのブロックの<code>x</code>座標と<code>y</code>座標を導出する計算を一回一回のループに含める必要があります。</p>
+
+<pre class="brush: js">var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;</pre>
+
+<p>それぞれの座標<code>brickX</code>は<code>brickWidth</code> + <code>brickPadding</code>に列番号<code>c</code>をかけ、<code>brickOffsetLeft</code>をたしたものとして導出されます。brickYのロジックも同様ですが、行番号<code>r</code>、<code>brickHeight</code>、そして<code>brickOffsetTop</code>が用いられます。これで、それぞれのブロックは正しい行、列に間隔を空けて置かれ、左上端から一定の位置に描画されるようになりました。</p>
+
+<p>次のように<code>brickX</code>と<code>brickY</code>の値を<code>(0,0)</code>の代わりに座標として代入するようにしたものが<code>drawBricks()</code>の最終版となります。これを<code>drawPaddle()</code>関数の下に追加してください。</p>
+
+<pre class="brush: js">function drawBricks() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+            bricks[c][r].x = brickX;
+            bricks[c][r].y = brickY;
+            ctx.beginPath();
+            ctx.rect(brickX, brickY, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}</pre>
+
+<h2 id="ブロックを描画する">ブロックを描画する</h2>
+
+<p><code>drawBricks()</code>へ呼び出しを<code>draw()</code>関数のどこかに追加して、このレッスンの仕上げとしましょう。最初のあたりの、Canvasを消去する部分とボールを描画する部分の間あたりが良いでしょう。<code>drawBall()</code>の呼び出しのすぐ前に次の行を追加してください。</p>
+
+<pre class="brush: js">drawBricks();
+</pre>
+
+<h2 id="自分のコードと比べる">自分のコードと比べる</h2>
+
+<p>ここまででゲームは更にもう少し面白くなりました。</p>
+
+<p> </p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/Lu3vtejz/","","395")}}</p>
+
+<p> </p>
+
+<div class="note">
+<p>練習: 行や列にあるブロックの数や位置を替えてみましょう。</p>
+</div>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>というわけでついにブロックができました。でもボールはブロックに全く反応しません。第7章、<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">衝突検知</a>ではこれを変えます。</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}}</p>
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html
new file mode 100644
index 0000000000..ca89b6aaee
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html
@@ -0,0 +1,132 @@
+---
+title: 衝突検出
+slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ja/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
+
+<div class="summary">
+<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>7番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html" rel="noopener">Gamedev-Canvas-workshop/lesson7.html</a>で入手できます。</p>
+</div>
+
+<p><span class="seoSummary">ブロックは既に画面上に現れていますが、ボールが素通りしてしまうのでは面白くありません。ボールがブロックで弾み、ブロックが壊れるように衝突検出を追加することを考えなくてはなりません。</span></p>
+
+<p>これをどのように実装するかは私達が決められることですが、ボールが長方形に接触しているかどうか計算するというのは、Canvasには助けになる関数もないため難しいかもしれません。このチュートリアルでは最も簡単な方法をとります。ボールの中心が与えられたブロックのどれかに衝突していないか確認するのです。これは毎回完璧な結果を返すとは限りませんし、衝突検出をするにはもっと洗練された方法がありますが、基本的な概念を学ぶには十分です。</p>
+
+<h2 id="衝突検出関数">衝突検出関数</h2>
+
+<p>最初の第一歩として、毎フレーム描画されるたびに全てのブロックを通してループし、ひとつひとつのブロックの位置をボールの座標と比較する衝突検出関数を作成しましょう。コードがより読みやすくなるように、衝突検出のループの中でブロックオブジェクトを保存する変数<code>b</code>を定義します。</p>
+
+<pre class="brush: js">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            // いろいろな計算
+        }
+    }
+}</pre>
+
+<p>もしボールの中央がブロックの1つの座標の内部だったらボールの向きを変えます。ボールの中央がブロックの内部にあるためには次の4つの命題が全て真でなければなりません。</p>
+
+<ul>
+ <li>ボールのx座標がブロックのx座標より大きい</li>
+ <li>ボールのx座標がブロックのx座標とその幅の和より小さい</li>
+ <li>ボールのy座標がブロックのy座標より大きい</li>
+ <li>ボールのy座標がブロックのy座標とその高さの和より小さい</li>
+</ul>
+
+<p>コードに書き下ろしてみましょう。</p>
+
+<pre class="brush: js">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}</pre>
+
+<p>上記のブロックを自分のコードの<code>keyUpHandler()</code>関数の下に追加してください。</p>
+
+<h2 id="ブロックが当たった後に消えるようにする">ブロックが当たった後に消えるようにする</h2>
+
+<p>上記のコードは期待したとおり動作し、ボールの向きを変えるはずです。問題はブロックがそのままとどまっているということです。ボールに既に当たったブロックを取り除く方法を考え出さなければなりません。これはそれぞれのブロックを画面上に描画したいかどうかを示す新たなパラメーターを追加することで達成できます。ブロックを初期化している部分のコードで、それぞれのブロックオブジェクトに<code>status</code>プロパティを追加しましょう。次の部分のコードをハイライトした行で示したように更新してください。</p>
+
+<pre class="brush: js; highlight:[5]">var bricks = [];
+for(var c=0; c&lt;brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r&lt;brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}</pre>
+
+<p>次に、それぞれのブロックを描画する前に<code>status</code>プロパティの値を<code>drawBricks()</code>関数で確認します。もし<code>status</code>が<code>1</code>なら描画します。でももし<code>0</code>ならそのブロックは既にボールに当たっていますから、これ以上画面上に描画されてほしくありません。自分の<code>drawBricks()</code>関数を次のように更新してください。</p>
+
+<pre class="brush: js; highlight:[4,5,6,7,8,9,10,11,12,13,14]">function drawBricks() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            if(bricks[c][r].status == 1) {
+                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#0095DD";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}</pre>
+
+<h2 id="衝突検出関数で状態を追跡、更新する">衝突検出関数で状態を追跡、更新する</h2>
+
+<p>ここでは<code>collisionDetection()</code>関数内で<code>status</code>プロパティをブロックに紐づけていきます。もしブロックがアクティブ (状態が<code>1</code>) なら衝突が起きるかどうか確認します。もし衝突が起きるのなら、画面上に描画されないようにそのブロックの状態を<code>0</code>に設定します。自分の<code>collisionDetection()</code>関数を以下に示すように更新してください。</p>
+
+<pre class="brush: js; highlight:[5,6,7,8,9,10]">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}</pre>
+
+<h2 id="衝突検出を有効にする">衝突検出を有効にする</h2>
+
+<p><code>collisionDetection()</code>関数への呼び出しをメインの<code>draw()</code>関数に追加して仕上げとします。次の行を<code>draw()</code>関数の、<code>drawPaddle()</code>の呼び出しのすぐ下に追加してください。</p>
+
+<pre class="brush: js">collisionDetection();
+</pre>
+
+<h2 id="コードを比べる">コードを比べる</h2>
+
+<p>これでボールの衝突検出がそれぞれのブロックに対してフレームごとに確認されるようになりました。ブロックを壊せるようになったのです。</p>
+
+<p> </p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/kaed3hbu/","","395")}}</p>
+
+<p> </p>
+
+<div class="note">
+<p><strong>練習</strong>: ボールの色をブロックに当たったときに変えましょう。</p>
+</div>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>着実にゴールに近づいています。では、先に進みましょう。第8章ではどのように<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">スコアと勝ち負けを記録するか</a>見てみます。</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
new file mode 100644
index 0000000000..86704e0661
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
@@ -0,0 +1,112 @@
+---
+title: Canvasを作ってその上に描画する
+slug: >-
+  Games/Workflows/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("/ja/docs/Games")}}</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>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>1番最初</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html">Gamedev-Canvas-workshop/lesson1.html</a>で入手できます。</p>
+</div>
+
+<p><span class="seoSummary">ゲームの機能を書き始める前に、ゲーム内部を記述する基本的な構造を作る必要があります。これにはHTMLと{{htmlelement("canvas")}}要素を用います。</span></p>
+
+<h2 id="ゲームのHTML">ゲームのHTML</h2>
+
+<p>ゲームは全て{{htmlelement("canvas")}}要素に描画されるため、HTML文書構造は極めて簡潔です。好きなテキストエディタを使って新しいHTML文書を作成し、適当な場所に<code>index.html</code>として保存してください。そして、そのHTML文書に次のコードを追加します。</p>
+
+<pre class="brush: html">&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;
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    &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のコードがここに入ります
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><code>charset</code> を定義し、{{htmlelement("title")}}と簡単ななCSSをヘッダに記述しました。本体には{{htmlelement("canvas")}}と{{htmlelement("script")}}要素があり、前者にはゲームを描画し、後者にはそれを制御するJavaScriptのコードを記述します。{{htmlelement("canvas")}}要素は簡単に参照を取得できるように<code>myCanvas</code>という<code>id</code>を持ち、幅は480ピクセル、高さは320ピクセルとしています。このチュートリアルで書く全てのJavaScriptのコードは開始の<code>&lt;script&gt;</code>と終了の<code>&lt;/script&gt;</code>タグの間に配置されます。</p>
+
+<h2 id="Canvasの基本">Canvasの基本</h2>
+
+<p>実際に{{htmlelement("canvas")}}要素に映像を描画するために、まずはJavaScriptから要素への参照を取得しなければなりません。次のコードを開始の<code>&lt;script&gt;</code>タグのあとに追記してください。</p>
+
+<pre class="brush: js">var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");</pre>
+
+<p>ここでは{{htmlelement("canvas")}}要素への参照を<code>canvas</code>に保存しています。それから2D描画コンテキストを保存するために<code>ctx</code>変数を作成しています。2D描画コンテキストは実際にCanvasに描画するために使うツールとなります。</p>
+
+<p>赤い四角形をキャンバスの上に表示するコード例を見てみましょう。下記のコードを先程記述したJavaScriptのあとに追記して、<code>index.html</code>をブラウザで読み込んでみてください。</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();</pre>
+
+<p>全ての命令は{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}メソッドと {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}メソッドの間に記述されています。四角形を{{domxref("CanvasRenderingContext2D.rect()","rect()")}}を用いて定義しています。最初の2つの値は左上の角のキャンバス上での座標を指定し、あとの2つの値は幅と高さを指定しています。今回描画された四角形は画面の左端から20ピクセル、上端から40ピクセルの位置に幅50ピクセル、高さ50ピクセルの大きさで、正方形になっています。{{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}プロパティは{{domxref("CanvasRenderingContext2D.fill()","fill()")}}メソッドで用いられる色 (今回は赤) を保存します。</p>
+
+<p>もちろん四角形だけではありません。ここでは緑の円を描画するコードを紹介します。次のコードを自分のJavaScriptの最後に追記し、保存して再読込してみてください。</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();</pre>
+
+<p>見て分かるとおり、{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}メソッドと{{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}メソッドが再び用いられています。その間にこのコードで最も重要な部分、{{domxref("CanvasRenderingContext2D.arc()","arc()")}}メソッドが呼び出されています。このメソッドは6つのパラメーターを持ちます。</p>
+
+<ul>
+ <li>円の中心の<code>x</code>、<code>y</code>座標</li>
+ <li>円の半径</li>
+ <li>開始角度と終了角度 (円を描く始める時点の角度と描き終えたあとの角度をラジアンで)</li>
+ <li>描く方向 (時計回りは<code>false</code>で、デフォルト。半時計回りは<code>true</code>。) この最後のパラメーターは省略可能です。</li>
+</ul>
+
+<p>{{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}プロパティは先程とは違う形になっています。これはCSSでそうであるように、色は16進値、色キーワード、<code>rgba()</code>関数、その他利用可能な色メソッドなら何でも指定することができるからです。</p>
+
+<p>図形を{{domxref("CanvasRenderingContext2D.fill()","fill()")}}で塗りつぶすかわりに{{domxref("CanvasRenderingContext2D.stroke()","stroke()")}}で縁だけ色を付けることも出来ます。次のコードも自分のJavaScriptに追記してみてください。</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();</pre>
+
+<p>上記のコードは青く縁取られたからの四角形を描画します。<code>rgba()</code>関数内のアルファチャネルにより青色は半透明になっています。</p>
+
+<h2 id="自分のコードと比べる">自分のコードと比べる</h2>
+
+<p>以下がJSFiddleで即実行可能な最初のレッスンのソースコード全てです。</p>
+
+<p> </p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","395")}}</p>
+
+<p> </p>
+
+<div class="note">
+<p><strong>練習</strong>: 与えられた図形の大きさや色を変えてみましょう。</p>
+</div>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>ここまでで基本的なHTMLを組み上げcanvasに少し学習しました。それでは、第2章に進み<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">どうやってゲーム内のボールを動かすか</a>学びましょう。</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/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
new file mode 100644
index 0000000000..7078862a9b
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
@@ -0,0 +1,97 @@
+---
+title: 仕上げ
+slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ja/docs/Games")}}</div>
+
+<p>{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
+
+<div class="summary">
+<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>10番目、最後</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html" rel="noopener">Gamedev-Canvas-workshop/lesson10.html</a>で入手できます。</p>
+</div>
+
+<p><span class="seoSummary">書いたゲームのどれも常に改善の余地があります。例えば、プレイヤーに1つ以上のライフを与えることができます。1回や2回間違えてもゲームを終わらせられるようにするのです。また、描画も改善できます。</span></p>
+
+<h2 id="プレイヤーにライフを与える">プレイヤーにライフを与える</h2>
+
+<p>ライフを実装するのは極めて単純です。まずは他の変数を宣言したところと同じところにライフの数を保存する変数を追加しましょう。</p>
+
+<pre class="brush: js">var lives = 3;</pre>
+
+<p>ライフカウンタを描画するのはスコアカウンタを描画するのとほとんど同じです。次の関数を自分のコードの<code>drawScore()</code>の下に追加してください。</p>
+
+<pre class="brush: js">function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+}</pre>
+
+<p>ライフがなくなるまで、ゲームをすぐ終わらせるかわりにライフの数を減らします。<code>draw()</code>関数内の次の2行を置き換えます。</p>
+
+<pre class="brush: js">alert("GAME OVER");
+document.location.reload();</pre>
+
+<p>これに以下で示すようなもう少し複雑なロジックを追加します。</p>
+
+<pre class="brush: js">lives--;
+if(!lives) {
+    alert("GAME OVER");
+    document.location.reload();
+}
+else {
+    x = canvas.width/2;
+    y = canvas.height-30;
+    dx = 2;
+    dy = -2;
+    paddleX = (canvas.width-paddleWidth)/2;
+}</pre>
+
+<p>ボールが画面下端に当たったときに<code>lives</code>変数からライフを1つひきます。もしライフが残っていなかったらゲームは負けです。まだ残っているライフがあったらボールとパドルの位置、ボールの動きがリセットされます。</p>
+
+<h3 id="ライフ表示を描画する">ライフ表示を描画する</h3>
+
+<p><code>draw()</code>関数内に<code>drawLives()</code>への呼び出しを追加する必要があります。<code>drawScore()</code>の呼び出しの下に追記してください。</p>
+
+<pre class="brush: js">drawLives();
+</pre>
+
+<h2 id="requestAnimationFrame()で描画を改善する">requestAnimationFrame()で描画を改善する</h2>
+
+<p> ではゲーム機構に直結しない部分、描画に関わる部分にとりかかりましょう。{{domxref("window.requestAnimationFrame", "requestAnimationFrame")}}は今は{{domxref("windowTimers.setInterval()", "setInterval()")}}で実装している固定フレームレートよりもより良くブラウザがゲームを描画できるようにします。</p>
+
+<pre class="brush: js">setInterval(draw, 10);</pre>
+
+<p>これを簡単に次の行で置き換えます。</p>
+
+<pre class="brush: js">draw();</pre>
+
+<p>それから、<code>draw()</code>関数の一番下 (閉じ波括弧のすぐ前) に次の行を追加し、<code>draw()</code>関数が自分自身を何度も呼び出すようにします。</p>
+
+<pre class="brush: js">requestAnimationFrame(draw);</pre>
+
+<p>これで<code>draw()</code>関数が<code>requestAnimationFrame()</code>ループの中で何度も実行されるようになりましたが、固定の10ミリ秒のフレームレートではなくブラウザに制御を託しています。ブラウザはフレームレートを適切に同期し図形を必要なときだけ描画します。これは古い<code>setInterval()</code>メソッドよりも効率的で滑らかなアニメーションループを生み出します。</p>
+
+<h2 id="自分のコードを比べる">自分のコードを比べる</h2>
+
+<p>これで全部です。ゲームの最終版が準備でき、プレイできる状態になりました。</p>
+
+<p> </p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}</p>
+
+<p> </p>
+
+<div class="note">
+<p><strong>練習</strong>: ライフの数とパドルでボールが跳ねる角度を替えてみましょう。</p>
+</div>
+
+<h2 id="ゲームクリア_-_今のところは。">ゲームクリア - 今のところは。</h2>
+
+<p>おめでとうございます。これで全てのレッスンを終えました。ここまでで、キャンバス操作の基本をと簡単な2Dゲームの裏にあるロジックを学んだはずです。フレームワークを学びゲーム開発を続ける良い時期です。このシリーズに対応する<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">Phaserを使ったブロックくずしゲーム</a>や<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">デバイス回転方向を使った2D 迷路ゲーム</a>チュートリアルを見てみると良いでしょう。<a href="https://developer.mozilla.org/ja/docs/Games">MDNのゲームセクション</a>で発想やより多くの知識を探してみても良いでしょう。</p>
+
+<p>また、<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">このチュートリアルシリーズの目次</a>を見返せます。コーディングを楽しみましょう。</p>
+
+<p>{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html
new file mode 100644
index 0000000000..9bd90da3cd
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html
@@ -0,0 +1,86 @@
+---
+title: ゲームオーバー
+slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ja/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}</p>
+
+<div class="summary">これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>5番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html" rel="noopener">Gamedev-Canvas-workshop/lesson5.html</a>で入手できます。</div>
+
+<p><span class="seoSummary">ボールが壁で弾むのを見たりパドルを左右雨に動かしたりできるのは楽しいですが、そのことを除くとこのゲームは何もせず、進捗や最終目標といったものが全くありません。ゲームプレイの観点からすると、まず負けることができるようにするのが良いでしょう。ブロック崩しで負けるということの裏にある論理は簡潔です。もしパドルでボールを逃してボールが画面の下端についてしまったらゲームオーバーになるのです。</span></p>
+
+<h2 id="ゲームオーバーを実装する">ゲームオーバーを実装する</h2>
+
+<p>自分のゲームにゲームオーバーを実装してみましょう。3章ではボールを壁で弾むようにしました。以下はその引用です。</p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
+    dx = -dx;
+}
+
+if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
+    dy = -dy;
+}</pre>
+
+<p>4辺全てでボールを弾ませるのではなく、3辺、すなわち上端と左右のみで弾むようにしましょう。底を打ったときゲームは終わりになります。2番目のif節を編集して、ボールがキャンバスの下端で衝突したときにゲームオーバー状態が発動するif else節にしましょう。ここでは簡単に、アラートメッセージを表示して、ページの再読込によりゲームを再開するだけにしましょう。</p>
+
+<p>まず、 <code>setInterval()</code> を最初に呼び出しているところを置き換えます。</p>
+
+<p> </p>
+
+<pre class="line-numbers language-html"><code class="language-html">setInterval(draw, 10);</code></pre>
+
+<p> </p>
+
+<p>置き換え後</p>
+
+<pre class="line-numbers language-html"><code class="language-html">var interval = setInterval(draw, 10);</code></pre>
+
+<p> </p>
+
+<p>次に2番目のif節を次の内容で置き換えましょう。</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">if</span><span class="punctuation token">(</span>y <span class="operator token">+</span> dy <span class="operator token">&lt;</span> ballRadius<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    dy <span class="operator token">=</span> <span class="operator token">-</span>dy<span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span><span class="punctuation token">(</span>y <span class="operator token">+</span> dy <span class="operator token">&gt;</span> canvas<span class="punctuation token">.</span>height<span class="operator token">-</span>ballRadius<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"GAME OVER"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    document<span class="punctuation token">.</span>location<span class="punctuation token">.</span><span class="function token">reload</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">clearInterval</span><span class="punctuation token">(</span>interval<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Needed for Chrome to end game</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="パドルをボールに当てる">パドルをボールに当てる</h2>
+
+<p>このレッスンのしあげに、ボールとパドルの衝突検出を作り、ボールが弾んでプレイエリアに戻ってくるようにしましょう。最も簡単なやり方はボールがパドルの左端と右端の間にあるか確認することです。最後に編集したコードを今度は次のように書き換えます。</p>
+
+<pre class="brush: js">if(y + dy &lt; ballRadius) {
+    dy = -dy;
+} else if(y + dy &gt; canvas.height-ballRadius) {
+    if(x &gt; paddleX &amp;&amp; x &lt; paddleX + paddleWidth) {
+        dy = -dy;
+    }
+    else {
+        alert("GAME OVER");
+        document.location.reload();
+    }
+}</pre>
+
+<p>ボールがCanvasの下端に当たっていたら、パドルにも当たっているかどうか確認します。もしパドルに当たっていたら、思ったとおりにボールは弾みます。当たらなかったら、先ほどと同じようにゲームオーバーになります。</p>
+
+<h2 id="自分のコードと比べる">自分のコードと比べる</h2>
+
+<p>自分のコードと比べられるように、実際に動くコードを以下に示します。</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/L61c9y50/","","395")}}</p>
+
+<div class="note">
+<p><strong>練習</strong>: ボールがパドルに当たったときに速く動くようにしましょう。</p>
+</div>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>今のところかなり順調に進歩してきていて、ゲームも負けるようになったことでもっと遊ぶ価値が感じられるようになってきました。第六章<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">『ブロックのかたまりを作る』</a>に進み、ボールが壊せるブロックを作りましょう。</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}</p>
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html
new file mode 100644
index 0000000000..e708967860
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html
@@ -0,0 +1,49 @@
+---
+title: そのままのJavaScriptを使ったブロックくずしゲーム
+slug: Games/Workflows/2D_Breakout_game_pure_JavaScript
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ja/docs/Games")}}</div>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}}</p>
+
+<p class="summary">このステップ・バイ・ステップのチュートリアルでは全てJavaScriptだけで書かれた、HTML5 {{htmlelement("canvas")}}で表示できる簡単な<strong>MDN ブロックくずし</strong>ゲームを作ります。</p>
+
+<p>全てのステップには編集可能かつすぐに実行できるサンプルがあり、どのような過程で作るべきか確認できます。映像の描画、移動、当たり判定、操作機構、勝ち負けの状態といった基礎的なゲームの仕組みを{{htmlelement("canvas")}}要素を使って実装する基本を学びましょう。</p>
+
+<p>このシリーズのほとんどの記事は理解するために初歩または中級レベルの<a href="/ja/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>の知識を必要とします。このチュートリアルを一通りこなすことで簡単なWebゲームを作れるようになるでしょう。</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="レッスン詳細">レッスン詳細</h2>
+
+<p>全てのレッスン、そしてこれから一緒に作る<a href="http://breakout.enclavegames.com/lesson10.html">MDNブロック崩しゲーム</a>の各バージョンは<a href="https://github.com/end3r/Canvas-gamedev-workshop">GitHub上で入手可能</a>です:</p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Canvasを作ってその上に描画する</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">ボールを動かす</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">ボールを壁で弾ませる</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">パドルとキーボード操作</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">ゲームオーバー</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">ブロックのかたまりを作る</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">衝突検出</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">スコアと勝ち負けを記録する</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">マウス操作</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">仕上げ</a></li>
+</ol>
+
+<p>まずはJavaScriptだけで始めるのがWebゲーム開発の確実な知識を手に入れる一番良い方法です。そのあと、自分のプロジェクトで使うフレームワークを選びましょう。フレームワークはJavaScript言語で書かれた単なるツールです。ですから、たとえフレームワークを用いて開発しようとしていてもまずはその言語を学び、手元で実際に何が起こっているか理解すると良いでしょう。フレームワークは開発速度を上げ、ゲームのとるに足らない部分を処理してくれますが、もし何かが思ったように動かないなんてことがあったらいつでもデバッグしたり、あるいは単にJavaScriptで自分なりの解を出すということもできるのです。</p>
+
+<div class="note">
+<p><strong>ノート</strong>: ゲームライブラリを用いた2D Webゲーム開発に興味があるのであれば、このシリーズに対応する<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_breakout_game_Phaser">Phaserを使ったブロックくずしゲーム</a>も参照してください。</p>
+</div>
+
+<div class="note">
+<p><strong>ノート</strong>: このシリーズはゲーム開発ワークショップのハンズオンの資料として使えます。ゲーム開発全般について話すつもりならこのチュートリアルに基づいた<a href="https://github.com/end3r/Gamedev-Canvas-Content-Kit">Gamedev Canvas Content Kit</a>も利用できます。</p>
+</div>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>それでは始めましょう! 最初の章、<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">『Canvasを作ってその上に描画する』</a>に進みます。</p>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} </p>
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
new file mode 100644
index 0000000000..51da95cada
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
@@ -0,0 +1,57 @@
+---
+title: マウス操作
+slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ja/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}</p>
+
+<div class="summary">
+<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>9番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html" rel="noopener">Gamedev-Canvas-workshop/lesson9.html</a>で入手できます。</p>
+</div>
+
+<p><span class="seoSummary">ゲーム自体は実際に完成したので、磨き上げにかかりましょう。既にキーボード操作を追加していますが、マウス操作も簡単に追加できます。</span></p>
+
+<h2 id="マウスの動作を監視する">マウスの動作を監視する</h2>
+
+<p>マウスの操作を監視するのはキー入力を監視するのよりも簡単です。{{event("mousemove")}}イベントのリスナーさえあればよいのです。次の行を、他のイベントリスナーの近く、<code>keyup event</code>のすぐ下に追記してください。</p>
+
+<pre class="brush: js">document.addEventListener("mousemove", mouseMoveHandler, false);</pre>
+
+<h2 id="パドルの動きをマウスの動きと紐付ける">パドルの動きをマウスの動きと紐付ける</h2>
+
+<p>パドルの位置をカーソルの座標に基づいて更新することができます。次のハンドラ関数は実際にそれを行います。次の関数を自分のコードの、先程追記したコードのすぐ下に追記しましょう。</p>
+
+<pre class="brush: js">function mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if(relativeX &gt; 0 &amp;&amp; relativeX &lt; canvas.width) {
+        paddleX = relativeX - paddleWidth/2;
+    }
+}</pre>
+
+<p>この関数ではまずビューポートの水平方向のマウスの位置 (<code>e.clientX</code>) からキャンバスの左端とビューポートの左端の距離 (<code>canvas.offsetLeft</code>) をひいて<code>relativeX</code>の値を導出します。これはキャンバスの左端とマウスカーソルの距離とちょうど同じになります。もしカーソルの相対X座標が0より大きくCanvasの幅より小さいのならば、カーソルはキャンバス内にあります。また、座標<code>paddleX</code> (パドルの左端と紐付けられている) は、パドルの中点で対称に動くように<code>relativeX</code>の値からパドルの幅の半分をひいた値に設定されます。</p>
+
+<p>パドルはマウスカーソルの位置を追うようになりますが、動きをCanvasの大きさに制限しているため、両端で消え失せてしまうようなことはありません。</p>
+
+<h2 id="自分のコードと比べる">自分のコードと比べる</h2>
+
+<p>比較用にコードの最新の状態を示します。</p>
+
+<p> </p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}</p>
+
+<p> </p>
+
+<div class="summary">
+<p>練習: パドル動作の境界を調節して、Canvasの両端でもパドルの半分ではなく全体が見えるようにしてください。</p>
+</div>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>最後に微調整する準備が整った、完全なゲームが完成しました。では、<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">仕上げ</a>に入りましょう。</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}</p>
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html
new file mode 100644
index 0000000000..b1a53ead12
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html
@@ -0,0 +1,140 @@
+---
+title: ボールを動かす
+slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ja/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}}</p>
+
+<div class="summary">
+<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>2番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html">Gamedev-Canvas-workshop/lesson2.html</a>で入手できます。</p>
+</div>
+
+<p><span class="seoSummary">前回のレッスンを一通りこなしてみてボールの描き方が分かりました。では今回はそれを動かしましょう。技術的には、ボールを描画し、またそれを消してからほんの少し違う位置に描画し直すという処理を毎フレームずつ行うことで動いているような印象を生み出します。ちょうど映画がどのように動くのかと同じです。</span></p>
+
+<h2 id="描画ループを定義する">描画ループを定義する</h2>
+
+<p>Canvasの映像を毎フレーム、定期的に更新し続けるためには、何度も実行されるような関数を定義する必要があります。この関数には画像の位置を変えたりするために毎回違う値が与えらます。{{domxref("WindowTimers.setInterval()", "setInterval()")}}や{{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}といったJavaScriptのタイミング関数を用いれば同じ関数を何度も実行できます。</p>
+
+<p>HTMLファイル内に既に書かれているJavaScriptを最初の2行を除いて全て削除し、次のコードを追記してください。<code>draw()</code>関数が<code>setInterval</code>の中で10ミリ秒おきに実行されます。</p>
+
+<pre class="brush: js">function draw() {
+    // 描画コード
+}
+setInterval(draw, 10);</pre>
+
+<p>無限に続く <code>setInterval</code> の性質のため、<code>draw()</code>は10ミリ秒おきにずっと、あるいは私達が止めるまで呼ばれ続けます。では、ボールを描画してみましょう。<code>draw()</code>関数の中に下記のコードを追記してください。</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+</pre>
+
+<p>では、書き換えたコードを試してみましょう。ボールが毎フレーム再描画されるはずです。</p>
+
+<h2 id="ボール動かす">ボール動かす</h2>
+
+<p>動きがないのでボールが再描画され続けていることに気づかないはずです。動きを加えてみましょう。まず、直書きされた位置 (50,50) のかわりに <code>x</code>、<code>y</code>という名の変数に開始位置を中央下端として定義し、それらを用いて円が描画される位置を定義します。</p>
+
+<p>まず、<code>x</code>と<code>y</code>を定義するために自分の <code>draw()</code>関数の上に次の2行を追加しましょう。</p>
+
+<pre class="brush: js">var x = canvas.width/2;
+var y = canvas.height-30;
+</pre>
+
+<p>次に、{{domxref("CanvasRenderingContext2D.arc()","arc()")}}メソッド内で変数xと変数yを使うように<code>draw()</code> 関数を書き換えましょう。次のハイライトされている行のとおりです。</p>
+
+<pre class="brush: js; highlight:[3]">function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+</pre>
+
+<p>ここからが大事な部分です。<code>x</code>と<code>y</code>に毎フレーム描画した後に小さな値を加え、ボールが動いているように見せるのです。その小さな値を<code>dx</code>、<code>dy</code>として2、-2をそれぞれ設定しましょう。変数x、yの定義のあとに次のコードを追記してください。</p>
+
+<pre class="brush: js">var dx = 2;
+var dy = -2;
+</pre>
+
+<p>最後に残っていることがあります。フレームごとに<code>x</code>と<code>y</code>を変数<code>dx</code>、<code>dy</code>で更新して、更新されるたびにボールが新しい位置に描画されるようにするのです。次に示されている新しい2行を<code>draw()</code>関数の最後に追記してください。</p>
+
+<pre class="brush: js; highlight:[7,8]">function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}</pre>
+
+<p>コードを保存してください。問題なく動作しますが、ボールの軌跡が残ります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10430/ball-trail.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="フレームの後にCanvasを消去する">フレームの後にCanvasを消去する</h2>
+
+<p>前のフレームを削除せずに毎フレーム描画しているために軌跡が残ってしまいます。でも心配する必要はありません。Canvasの内容を消去するメソッド、{{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}があります。このメソッドは4つのパラメータをとります。四角形の左上端のx、y座標と四角形の右下端のx、y座標です。この四角形で囲われた領域にある内容全てが消去されます。</p>
+
+<p>次のハイライトされている新しい行を<code>draw()</code>関数に追記してください。</p>
+
+<pre class="brush: js; highlight:[2]">function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+</pre>
+
+<p>コードを保存してもう一度試してみてください。今度は軌跡のないボールがみえるはずです。10ミリ秒おきにキャンバスは消去され、青い円 (ボール) が指定された位置に描画され、 <code>x</code>と<code>y</code>の値は次のフレームに備えて更新されます。</p>
+
+<h2 id="コードを整える">コードを整える</h2>
+
+<p>次のいくつかの記事では<code>draw()</code>関数にもっと命令を追加します。ですから<code>draw()</code>関数をできるだけ簡潔にしておくのは大事なことです。ボールを描画するコードを別の関数に移しましょう。</p>
+
+<p>既にあるdraw()関数を次の2つの関数で置き換えてください。</p>
+
+<pre class="brush: js">function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    x += dx;
+    y += dy;
+}</pre>
+
+<h2 id="自分のコードと比べる">自分のコードと比べる</h2>
+
+<p>この記事で組み上げた自分のコードを下のライブデモで確認したり、書き換えたりしてどのように動いているかしっかり理解しましょう。</p>
+
+<p> </p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}</p>
+
+<p> </p>
+
+<div class="summary">
+<p>練習: 動くボールの速さや向きを変えてみましょう。</p>
+</div>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>ボールを描画して動くようにしましたが、そのままCanvasの縁から消えていってしまいます。第3章ではどのように<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">ボールを壁で弾ませる</a>か探っていきます。</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}}</p>
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html
new file mode 100644
index 0000000000..1602332d81
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html
@@ -0,0 +1,128 @@
+---
+title: パドルとキーボード操作
+slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}</p>
+
+<div class="summary">
+<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>4番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html" rel="noopener">Gamedev-Canvas-workshop/lesson4.html</a>で入手できます。</p>
+</div>
+
+<p><span class="seoSummary">ボールは壁で自由に弾み、あなたはずっとそれを見ていることができますが、今の所何の対話要素もありません。操作できないものなんてゲームじゃありません! ですからユーザーとの対話要素、操作できるパドルを追加しましょう。</span></p>
+
+<h2 id="ボールにぶつかるパドルを定義する">ボールにぶつかるパドルを定義する</h2>
+
+<p>そういうわけで、ボールに当てるパドルが必要になりました。パドルに用いるいくつかの変数を定義しましょう。次の変数を、他の変数と一緒にコードの一番上に追加してください。</p>
+
+<pre class="brush: js">var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width-paddleWidth)/2;</pre>
+
+<p>ここではパドルの高さと幅、<code>x</code>軸上の開始地点を定義しています。続くコードではこれらを用いてさらなる計算が行われます。パドルを画面上に表示する関数を作成しましょう。<code>drawBall()</code>のすぐ下に次の関数を追加してください。</p>
+
+<pre class="brush: js">function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}</pre>
+
+<h2 id="パドルを操作できるようにする">パドルを操作できるようにする</h2>
+
+<p>こにパドルを描画しても良いですが、ユーザーの行動に応答する必要があります。キーボード操作を実装するのです。必要なものは次のとおりです。</p>
+
+<ul>
+ <li>左の操作ボタンが押されているか、右の操作ボタンが押されているかという情報を保存する2つの変数。</li>
+ <li><code>keydown</code>イベントと<code>keyup</code>イベントの2つのイベントリスナー。ボタンが押されたときにパドルの動きを扱うコードを走らせたいのです。</li>
+ <li><code>keydown</code>イベントと<code>keyup</code>イベントを扱い、ボタンが押されたときに実行されるコード。</li>
+ <li>パドルを左や右に動かす機能</li>
+</ul>
+
+<p>押されているボタンはこのとおり、ブーリアン値として定義、初期化できます。このコードをどこか他の変数の近くに追記してください。</p>
+
+<pre class="brush: js">var rightPressed = false;
+var leftPressed = false;</pre>
+
+<p>最初は制御ボタンは押されていないため、どちらにおいてもデフォルトの値は<code>false</code>です。ボタンが押されたのを検知するため、2つのイベントリスナーを設定します。JavaScriptの最後にある<code>setInterval()</code>の行のちょうど上に次のコードを追記してください。</p>
+
+<pre class="brush: js">document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);</pre>
+
+<p>キーボードのキーのどれかに対して<code>keydown</code>イベントが発火したとき (どれかが押されたとき) 、<code>keyDownHandler()</code>関数が実行されます。2つ目のリスナーについても同様で、(そのキーが押されなくなったき) <code>keyup</code>イベントは<code>keyUpHandler()</code>関数を呼び出します。自分の<code>addEventListener()</code>の行の下に次のコードを追記してください。</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">keyDownHandler</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>key <span class="operator token">==</span> <span class="string token">"Right"</span> <span class="operator token">||</span> e<span class="punctuation token">.</span>key <span class="operator token">==</span> <span class="string token">"ArrowRight"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        rightPressed <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">else</span> <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>key <span class="operator token">==</span> <span class="string token">"Left"</span> <span class="operator token">||</span> e<span class="punctuation token">.</span>key <span class="operator token">==</span> <span class="string token">"ArrowLeft"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        leftPressed <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">keyUpHandler</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>key <span class="operator token">==</span> <span class="string token">"Right"</span> <span class="operator token">||</span> e<span class="punctuation token">.</span>key <span class="operator token">==</span> <span class="string token">"ArrowRight"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        rightPressed <span class="operator token">=</span> <span class="boolean token">false</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">else</span> <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>key <span class="operator token">==</span> <span class="string token">"Left"</span> <span class="operator token">||</span> e<span class="punctuation token">.</span>key <span class="operator token">==</span> <span class="string token">"ArrowLeft"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        leftPressed <span class="operator token">=</span> <span class="boolean token">false</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>キーが押されたとき、その情報は変数に保存されます。それぞれの場合で関連する変数が<code>true</code>に設定されます。キーが離されたときに変数は<code>false</code>に戻されます。</p>
+
+<p>どちらの関数も変数<code>e</code>で表されるイベントをパラメーターとしてとります。これから有用な情報が手に入ります。<code>key</code>は押されたキーについての情報を持っています。大抵のブラウザでは左右の矢印キーにそれぞれ <code>ArrowLeft</code> と <code>ArrowRight</code> が対応します。ただし IE/Edge に対応するために、 <code>Left</code> と <code>Right</code>も確認する必要があります。 もし左カーソルが押されたら、変数<code>leftPressed</code>は<code>true</code>に、離されたら変数<code>leftPressed</code>は<code>false</code>に設定されます。右カーソルと変数<code>rightPressed</code>についても同様です。</p>
+
+<h3 id="パドルの移動ロジック">パドルの移動ロジック</h3>
+
+<p>押されているキーについての情報を保存している変数、そして関連する関数が設定されました。ではそれらを使う実際のコードに手を入れて画面上のパドルを動かしてみましょう。<code>draw()</code>関数の中で、各々のフレームを描画するときに左カーソルキーが押されているか、右カーソルが押されているか確認しましょう。次のようなコードになっているでしょう。</p>
+
+<pre class="brush: js">if(rightPressed) {
+    paddleX += 7;
+}
+else if(leftPressed) {
+    paddleX -= 7;
+}</pre>
+
+<p>左カーソルが押されていたら7ピクセル左に動き、右カーソルが押されていたら7ピクセル右に動きます。これだけでも良さそうですが、どちらかのキーを長く押し続けたらパドルがCanvasの縁から消えてしまいます。コードを次のように変えることでCanvasの境界内でのみ動くように改善できます。</p>
+
+<pre class="brush: js">if(rightPressed &amp;&amp; paddleX &lt; canvas.width-paddleWidth) {
+    paddleX += 7;
+}
+else if(leftPressed &amp;&amp; paddleX &gt; 0) {
+    paddleX -= 7;
+}</pre>
+
+<p>ここで用いられている位置<code>paddleX</code>は期待されているように左端の<code>0</code>と右端の<code>canvas.width-paddleWidth</code>間で動きます。</p>
+
+<p>上記のコード片を<code>draw()</code>関数の最後、閉じ波括弧のちょうど前に追記してください。</p>
+
+<p>あとは<code>drawPaddle()</code>関数を<code>draw()</code>関数から呼び出し、実際に画面に表示するようにすれば完了です。次の行を<code>draw()</code>関数の、ちょうど<code>drawBall()</code>を呼ぶ行の下に追記してください。</p>
+
+<pre class="brush: js">drawPaddle();
+</pre>
+
+<h2 id="自分のコードと比べる">自分のコードと比べる</h2>
+
+<p>自分のコードと比べられる、実際に動くコードがこちらになります。</p>
+
+<p> </p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/t2udo69j/","","395")}}</p>
+
+<p> </p>
+
+<div class="note">
+<p><strong>練習</strong>: パドルを速く、または遅く動くようにしたり、大きさを変えたりしてみましょう。</p>
+</div>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>ゲームっぽい要素を追加しましょう。今問題なのはただパドルでボールを永遠に打ち続けることしか出来ないという点です。これは第5章、<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Game_over">ゲームオーバー</a>でゲームの終了状態を追加することで完全に変わることになります。</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}</p>
diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html
new file mode 100644
index 0000000000..44ba7aa804
--- /dev/null
+++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html
@@ -0,0 +1,94 @@
+---
+title: スコアと勝ち負けを記録する
+slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ja/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
+
+<div class="summary">
+<p>これは<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">ゲーム開発Canvasチュートリアル</a>の10ステップのうち<strong>8番目</strong>のステップです。このレッスンを終えたあとの完成予想のソースコードは<a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html" rel="noopener">Gamedev-Canvas-workshop/lesson8.html</a>で入手できます。</p>
+</div>
+
+<p><span class="seoSummary">ブロックを崩せるのは最高ですが、より素晴らしいものにするためにユーザーが壊した全てのブロックに対してポイントを与え、合計スコアのカウントを更新し続けましょう。</span></p>
+
+<h2 id="スコアを数える">スコアを数える</h2>
+
+<p>ゲームを通してスコアを見せることができればあとで友達に自慢することができます。スコアを記録する変数が必要です。次の行を自分のJavaScriptの他の変数のあとに追記してください。</p>
+
+<pre class="brush: js">var score = 0;</pre>
+
+<p>スコア表示を作成し更新するために<code>drawScore()</code>関数も必要です。次のコードを<code>collisionDetection()</code>関数のあとに追加してください。</p>
+
+<pre class="brush: js">function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+}</pre>
+
+<p>文字をキャンバス上に描画するのは図形を描画するのと似ています。フォント定義はCSS出するものとちょうど同じように描きます。大きさとフォントの種類は{{domxref("CanvasRenderingContext2D.font","font()")}}メソッドで設定できます。それからフォントの色を設定するには{{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}}を、キャンバス上に配置される実際の文章を設定するには{{domxref("CanvasRenderingContext2D.fillText","fillText()")}}を使用してください。最初のパラメーターは文章自体です。上記のコードは現在のポイントの数を表示します。最後の2つのパラメーターは文章がキャンバス上に置かれる座標です。</p>
+
+<p>ブロックに当たるたびにスコアを与えるには、衝突が検出されるたびにスコア変数を増加させる1行を<code>collisionDetection()</code>関数に追加します。次のハイライトされた行を自分のコードに追加してください。</p>
+
+<pre class="brush: js; highlight:[9]">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                }
+            }
+        }
+    }
+}</pre>
+
+<p><code>draw()</code>関数から<code>drawScore()</code>を呼び続けることで新しいフレームごとにスコアは最新の状態に保たれます。次の行を<code>draw()</code>の中、ちょうど<code>drawPaddle()</code>の呼び出しの下に追加してください。</p>
+
+<pre class="brush: js">drawScore();</pre>
+
+<h2 id="全てのブロックが崩されたときに勝利を伝えるメッセージを表示する">全てのブロックが崩されたときに勝利を伝えるメッセージを表示する</h2>
+
+<p>ポイントを集め続けるという動作はうまく働きますが、永久に増やし続けることは出来ません。全てのブロックが崩されたらどうなるのでしょうか。何においてもそれこそがゲームの主目標なのですから、得られる全てのポイントが集まったときには勝利を伝えるメッセージを表示すべきです。次のハイライトされた部分を自分の<code>collisionDetection()</code>関数に追記してください。</p>
+
+<pre class="brush: js; highlight:[10,11,12,13]">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    if(score == brickRowCount*brickColumnCount) {
+                        alert("YOU WIN, CONGRATULATIONS!");
+                        document.location.reload();
+                    }
+                }
+            }
+        }
+    }
+}</pre>
+
+<p>これのおかげで、全てのブロックが崩されたときにユーザーは実際にゲームに勝つことができます。ゲームにおいてはこれは非常に重要です。アラートのボタンがクリックされたら<code>document.location.reload()</code>関数はページを再読込しゲームをもう一度始めます。</p>
+
+<h2 id="自分のコードと比べる">自分のコードと比べる</h2>
+
+<p>自分のものと比べたいときのために最新のコードをいかに示します。このように見え、そして動くはずです。</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/b3z2Lpu9/","","395")}}</p>
+
+<div class="note">
+<p><strong>練習</strong>: ブロックに当たるたびにより多くのポイントを追加し、ゲームの終わりに集めたポイントの数を表示するようにしましょう。</p>
+</div>
+
+<h2 id="次のステップ">次のステップ</h2>
+
+<p>この時点でもこのゲームはかなりよく見えます。次のレッスンでは<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">マウス操作</a>を追加することでゲームの魅力を広げます。</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
diff --git a/files/ja/games/tutorials/index.html b/files/ja/games/tutorials/index.html
new file mode 100644
index 0000000000..9d9b5e2ff3
--- /dev/null
+++ b/files/ja/games/tutorials/index.html
@@ -0,0 +1,25 @@
+---
+title: Workflows for different game types
+slug: Games/Workflows
+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 articles that highlight different workflows for effectively creating different types of web games, whether you want to create a 2D or 3D game from scratch, or port a C++ or Flash game over to open web technologies.</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>
+</dl>