From 290d4f4c202b73e53eca3676d91a189f8097b396 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 14 Sep 2021 11:05:50 +0900 Subject: Games以下の文書内のリンクURLを正規化 (#2355) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - /en-US へのリンクを /ja へのリンクに修正 - /ja が付いていないものに /ja を付加 - MDN内のリンクが完全URLの場合、 /ja/docs からのURLに修正 --- .../2d_breakout_game_phaser/physics/index.html | 4 ++-- .../bounce_off_the_walls/index.html | 6 +++--- .../build_the_brick_field/index.html | 4 ++-- .../collision_detection/index.html | 4 ++-- .../create_the_canvas_and_draw_on_it/index.html | 4 ++-- .../finishing_up/index.html | 6 +++--- .../game_over/index.html | 4 ++-- .../2d_breakout_game_pure_javascript/index.html | 24 +++++++++++----------- .../mouse_controls/index.html | 4 ++-- .../move_the_ball/index.html | 4 ++-- .../paddle_and_keyboard_controls/index.html | 4 ++-- .../track_the_score_and_win/index.html | 4 ++-- files/ja/games/tutorials/index.html | 8 ++++---- 13 files changed, 40 insertions(+), 40 deletions(-) (limited to 'files/ja/games/tutorials') 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 index 283cabbffd..0556233fa2 100644 --- a/files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html @@ -9,7 +9,7 @@ original_slug: Games/Workflows/2D_breakout_game_Phaser/Physics

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

-

全 16回のゲーム開発チュートリアル の 5 回目です。 今回終了後のソースコードは Gamedev-Phaser-Content-Kit/demos/lesson05.html でご覧になれます。

+

全 16回のゲーム開発チュートリアル の 5 回目です。 今回終了後のソースコードは Gamedev-Phaser-Content-Kit/demos/lesson05.html でご覧になれます。

モノ同士の衝突を正しく処理するためには、物理演算が必要になります。この文書では、Phaser での実装と、典型的な例を紹介します。

@@ -86,6 +86,6 @@ function update() {

次のステップ

-

次のステップでは、ボールの跳ね返り を実装します。

+

次のステップでは、ボールの跳ね返り を実装します。

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

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 index 9a1833d45e..c7cab2f4e9 100644 --- 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 @@ -11,10 +11,10 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_w

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

-

これはゲーム開発Canvasチュートリアルの10ステップのうち3番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson3.htmlで入手できます。

+

これはゲーム開発Canvasチュートリアルの10ステップのうち3番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson3.htmlで入手できます。

-

ボールが動くのを見られたのは良いことですが、画面からすぐ消えてしまっては面白くないじゃありませんか! これを解決するためにとても簡単な衝突検知 (後ほど詳しく説明します) を導入し、Canvasの四辺でボールを弾ませます。

+

ボールが動くのを見られたのは良いことですが、画面からすぐ消えてしまっては面白くないじゃありませんか! これを解決するためにとても簡単な衝突検知 (後ほど詳しく説明します) を導入し、Canvasの四辺でボールを弾ませます。

簡単な衝突検知

@@ -101,6 +101,6 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {

次のステップ

-

ボールが動き、かつゲームボードに留まるようになることまでこぎつけました。第4章では操作できるパドルを実装してみます。 パドルとキーボード操作を見てみましょう。

+

ボールが動き、かつゲームボードに留まるようになることまでこぎつけました。第4章では操作できるパドルを実装してみます。 パドルとキーボード操作を見てみましょう。

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

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 index 154b273e25..7220f84470 100644 --- 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 @@ -11,7 +11,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_

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

-

これはゲーム開発Canvasチュートリアルの10ステップのうち6番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson6.htmlで入手できます。

+

これはゲーム開発Canvasチュートリアルの10ステップのうち6番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson6.htmlで入手できます。

ゲームプレイ制御を修正することにより負けることができるようになります。この大きな変更により、ついにゲームらしさを感じられるようになりました。ですが、壁とパドルでボールが弾むだけではすぐに空きてしまいます。ブロック崩しで本当に必要な要素、それはボールで崩すことができるブロックです。これが今回作り込んでいく部分になります。

@@ -108,6 +108,6 @@ var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;

次のステップ

-

というわけでついにブロックができました。でもボールはブロックに全く反応しません。第7章、衝突検知ではこれを変えます。

+

というわけでついにブロックができました。でもボールはブロックに全く反応しません。第7章、衝突検知ではこれを変えます。

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

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 index db29a8dec4..0f4dc41587 100644 --- 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 @@ -11,7 +11,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detect

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

-

これはゲーム開発Canvasチュートリアルの10ステップのうち7番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson7.htmlで入手できます。

+

これはゲーム開発Canvasチュートリアルの10ステップのうち7番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson7.htmlで入手できます。

ブロックは既に画面上に現れていますが、ボールが素通りしてしまうのでは面白くありません。ボールがブロックで弾み、ブロックが壊れるように衝突検出を追加することを考えなくてはなりません。

@@ -128,6 +128,6 @@ for(var c=0; c<brickColumnCount; c++) {

次のステップ

-

着実にゴールに近づいています。では、先に進みましょう。第8章ではどのようにスコアと勝ち負けを記録するか見てみます。

+

着実にゴールに近づいています。では、先に進みましょう。第8章ではどのようにスコアと勝ち負けを記録するか見てみます。

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

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 index edbd9e1d3f..046b910bd8 100644 --- 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 @@ -12,7 +12,7 @@ original_slug: >-

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

-

これはゲーム開発Canvasチュートリアルの10ステップのうち1番最初のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson1.htmlで入手できます。

+

これはゲーム開発Canvasチュートリアルの10ステップのうち1番最初のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson1.htmlで入手できます。

ゲームの機能を書き始める前に、ゲーム内部を記述する基本的な構造を作る必要があります。これにはHTMLと{{htmlelement("canvas")}}要素を用います。

@@ -109,6 +109,6 @@ ctx.closePath();

次のステップ

-

ここまでで基本的なHTMLを組み上げcanvasに少し学習しました。それでは、第2章に進みどうやってゲーム内のボールを動かすか学びましょう。

+

ここまでで基本的なHTMLを組み上げcanvasに少し学習しました。それでは、第2章に進みどうやってゲーム内のボールを動かすか学びましょう。

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

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 index b277e0f86d..5d6c9d30ba 100644 --- 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 @@ -11,7 +11,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

-

これはゲーム開発Canvasチュートリアルの10ステップのうち10番目、最後のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson10.htmlで入手できます。

+

これはゲーム開発Canvasチュートリアルの10ステップのうち10番目、最後のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson10.htmlで入手できます。

書いたゲームのどれも常に改善の余地があります。例えば、プレイヤーに1つ以上のライフを与えることができます。1回や2回間違えてもゲームを終わらせられるようにするのです。また、描画も改善できます。

@@ -91,8 +91,8 @@ else {

ゲームクリア - 今のところは。

-

おめでとうございます。これで全てのレッスンを終えました。ここまでで、キャンバス操作の基本をと簡単な2Dゲームの裏にあるロジックを学んだはずです。フレームワークを学びゲーム開発を続ける良い時期です。このシリーズに対応するPhaserを使ったブロックくずしゲームやデバイス回転方向を使った2D 迷路ゲームチュートリアルを見てみると良いでしょう。MDNのゲームセクションで発想やより多くの知識を探してみても良いでしょう。

+

おめでとうございます。これで全てのレッスンを終えました。ここまでで、キャンバス操作の基本をと簡単な2Dゲームの裏にあるロジックを学んだはずです。フレームワークを学びゲーム開発を続ける良い時期です。このシリーズに対応するPhaserを使ったブロックくずしゲームやデバイス回転方向を使った2D 迷路ゲームチュートリアルを見てみると良いでしょう。MDNのゲームセクションで発想やより多くの知識を探してみても良いでしょう。

-

また、このチュートリアルシリーズの目次を見返せます。コーディングを楽しみましょう。

+

また、このチュートリアルシリーズの目次を見返せます。コーディングを楽しみましょう。

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

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 index 771de0d6e5..0ce491e613 100644 --- 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 @@ -10,7 +10,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over

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

-
これはゲーム開発Canvasチュートリアルの10ステップのうち5番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson5.htmlで入手できます。
+
これはゲーム開発Canvasチュートリアルの10ステップのうち5番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson5.htmlで入手できます。

ボールが壁で弾むのを見たりパドルを左右雨に動かしたりできるのは楽しいですが、そのことを除くとこのゲームは何もせず、進捗や最終目標といったものが全くありません。ゲームプレイの観点からすると、まず負けることができるようにするのが良いでしょう。ブロック崩しで負けるということの裏にある論理は簡潔です。もしパドルでボールを逃してボールが画面の下端についてしまったらゲームオーバーになるのです。

@@ -82,6 +82,6 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {

次のステップ

-

今のところかなり順調に進歩してきていて、ゲームも負けるようになったことでもっと遊ぶ価値が感じられるようになってきました。第六章『ブロックのかたまりを作る』に進み、ボールが壊せるブロックを作りましょう。

+

今のところかなり順調に進歩してきていて、ゲームも負けるようになったことでもっと遊ぶ価値が感じられるようになってきました。第六章『ブロックのかたまりを作る』に進み、ボールが壊せるブロックを作りましょう。

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

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 index 2332bd2bf9..06051cec72 100644 --- a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html @@ -21,22 +21,22 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript

全てのレッスン、そしてこれから一緒に作るMDNブロック崩しゲームの各バージョンはGitHub上で入手可能です:

    -
  1. Canvasを作ってその上に描画する
    2. -
  2. ボールを動かす
    3. -
  3. ボールを壁で弾ませる
    4. -
  4. パドルとキーボード操作
    5. -
  5. ゲームオーバー
    6. -
  6. ブロックのかたまりを作る
    7. -
  7. 衝突検出
    8. -
  8. スコアと勝ち負けを記録する
    9. -
  9. マウス操作
    10. -
  10. 仕上げ
    11. +
  11. Canvasを作ってその上に描画する
    12. +
  12. ボールを動かす
    13. +
  13. ボールを壁で弾ませる
    14. +
  14. パドルとキーボード操作
    15. +
  15. ゲームオーバー
    16. +
  16. ブロックのかたまりを作る
    17. +
  17. 衝突検出
    18. +
  18. スコアと勝ち負けを記録する
    19. +
  19. マウス操作
    20. +
  20. 仕上げ

まずはJavaScriptだけで始めるのがWebゲーム開発の確実な知識を手に入れる一番良い方法です。そのあと、自分のプロジェクトで使うフレームワークを選びましょう。フレームワークはJavaScript言語で書かれた単なるツールです。ですから、たとえフレームワークを用いて開発しようとしていてもまずはその言語を学び、手元で実際に何が起こっているか理解すると良いでしょう。フレームワークは開発速度を上げ、ゲームのとるに足らない部分を処理してくれますが、もし何かが思ったように動かないなんてことがあったらいつでもデバッグしたり、あるいは単にJavaScriptで自分なりの解を出すということもできるのです。

-

ノート: ゲームライブラリを用いた2D Webゲーム開発に興味があるのであれば、このシリーズに対応するPhaserを使ったブロックくずしゲームも参照してください。

+

ノート: ゲームライブラリを用いた2D Webゲーム開発に興味があるのであれば、このシリーズに対応するPhaserを使ったブロックくずしゲームも参照してください。

@@ -45,6 +45,6 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript

次のステップ

-

それでは始めましょう! 最初の章、『Canvasを作ってその上に描画する』に進みます。

+

それでは始めましょう! 最初の章、『Canvasを作ってその上に描画する』に進みます。

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

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 index 676302d3f2..31d2ac0e1f 100644 --- 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 @@ -11,7 +11,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls

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

-

これはゲーム開発Canvasチュートリアルの10ステップのうち9番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson9.htmlで入手できます。

+

これはゲーム開発Canvasチュートリアルの10ステップのうち9番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson9.htmlで入手できます。

ゲーム自体は実際に完成したので、磨き上げにかかりましょう。既にキーボード操作を追加していますが、マウス操作も簡単に追加できます。

@@ -53,6 +53,6 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls

次のステップ

-

最後に微調整する準備が整った、完全なゲームが完成しました。では、仕上げに入りましょう。

+

最後に微調整する準備が整った、完全なゲームが完成しました。では、仕上げに入りましょう。

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

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 index 6d50976800..b87aceacb0 100644 --- 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 @@ -9,7 +9,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball

{{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")}}

-

これはゲーム開発Canvasチュートリアルの10ステップのうち2番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson2.htmlで入手できます。

+

これはゲーム開発Canvasチュートリアルの10ステップのうち2番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson2.htmlで入手できます。

前回のレッスンを一通りこなしてみてボールの描き方が分かりました。では今回はそれを動かしましょう。技術的には、ボールを描画し、またそれを消してからほんの少し違う位置に描画し直すという処理を毎フレームずつ行うことで動いているような印象を生み出します。ちょうど映画がどのように動くのかと同じです。

@@ -136,6 +136,6 @@ function draw() {

次のステップ

-

ボールを描画して動くようにしましたが、そのままCanvasの縁から消えていってしまいます。第3章ではどのようにボールを壁で弾ませるか探っていきます。

+

ボールを描画して動くようにしましたが、そのままCanvasの縁から消えていってしまいます。第3章ではどのようにボールを壁で弾ませるか探っていきます。

{{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")}}

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 index 15b18e0bb5..9728bef6c5 100644 --- 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 @@ -11,7 +11,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keybo

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

-

これはゲーム開発Canvasチュートリアルの10ステップのうち4番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson4.htmlで入手できます。

+

これはゲーム開発Canvasチュートリアルの10ステップのうち4番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson4.htmlで入手できます。

ボールは壁で自由に弾み、あなたはずっとそれを見ていることができますが、今の所何の対話要素もありません。操作できないものなんてゲームじゃありません! ですからユーザーとの対話要素、操作できるパドルを追加しましょう。

@@ -124,6 +124,6 @@ else if(leftPressed && paddleX > 0) {

次のステップ

-

ゲームっぽい要素を追加しましょう。今問題なのはただパドルでボールを永遠に打ち続けることしか出来ないという点です。これは第5章、ゲームオーバーでゲームの終了状態を追加することで完全に変わることになります。

+

ゲームっぽい要素を追加しましょう。今問題なのはただパドルでボールを永遠に打ち続けることしか出来ないという点です。これは第5章、ゲームオーバーでゲームの終了状態を追加することで完全に変わることになります。

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

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 index 6e9b796c0b..dc5119dd85 100644 --- 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 @@ -11,7 +11,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_

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

-

これはゲーム開発Canvasチュートリアルの10ステップのうち8番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson8.htmlで入手できます。

+

これはゲーム開発Canvasチュートリアルの10ステップのうち8番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson8.htmlで入手できます。

ブロックを崩せるのは最高ですが、より素晴らしいものにするためにユーザーが壊した全てのブロックに対してポイントを与え、合計スコアのカウントを更新し続けましょう。

@@ -90,6 +90,6 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_

次のステップ

-

この時点でもこのゲームはかなりよく見えます。次のレッスンではマウス操作を追加することでゲームの魅力を広げます。

+

この時点でもこのゲームはかなりよく見えます。次のレッスンではマウス操作を追加することでゲームの魅力を広げます。

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

diff --git a/files/ja/games/tutorials/index.html b/files/ja/games/tutorials/index.html index 5ece03f6be..7d02c40371 100644 --- a/files/ja/games/tutorials/index.html +++ b/files/ja/games/tutorials/index.html @@ -17,10 +17,10 @@ original_slug: Games/Workflows

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.

-
2D breakout game using pure JavaScript
+
2D breakout game using pure JavaScript
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.
-
2D breakout game using Phaser
+
2D breakout game using Phaser
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 thePhaser HTML5 game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.
-
2D maze game with device orientation
-
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 Device Orientation and Vibration APIs to enhance the gameplay and is built using the Phaser framework.
+
2D maze game with device orientation
+
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 Device Orientation and Vibration APIs to enhance the gameplay and is built using the Phaser framework.
-- cgit v1.2.3-54-g00ecf