diff options
24 files changed, 74 insertions, 74 deletions
diff --git a/files/ja/games/index.html b/files/ja/games/index.html index 8a0aa54e82..362240ccf0 100644 --- a/files/ja/games/index.html +++ b/files/ja/games/index.html @@ -33,7 +33,7 @@ translation_of: Games <div class="section"> <h2 id="Port_native_games_to_the_Web" name="Port_native_games_to_the_Web">ネイティブゲームをウェブに移植する</h2> -<p>あなたがネイティブ開発者 (例えば、C++ でゲームを書くような) で、あなたのゲームをウェブに移植する方法に興味がある場合、<a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a> ツール — これは LLVM から JavaScript へのコンパイラーで、LLVM バイトコード(例えば Clang を使って C/C++ から、あるいは他の言語から生成したもの) を受け取り、それを <a href="https://developer.mozilla.org/ja/docs/Games/Tools/asm.js">asm.js</a> というウェブで実行できるものにコンパイルします。</p> +<p>あなたがネイティブ開発者 (例えば、C++ でゲームを書くような) で、あなたのゲームをウェブに移植する方法に興味がある場合、<a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a> ツール — これは LLVM から JavaScript へのコンパイラーで、LLVM バイトコード(例えば Clang を使って C/C++ から、あるいは他の言語から生成したもの) を受け取り、それを <a href="/ja/docs/Games/Tools/asm.js">asm.js</a> というウェブで実行できるものにコンパイルします。</p> <p>開始するには、次のものを見てください:</p> diff --git a/files/ja/games/techniques/3d_on_the_web/basic_theory/index.html b/files/ja/games/techniques/3d_on_the_web/basic_theory/index.html index 079a49bed5..b2e15e7f94 100644 --- a/files/ja/games/techniques/3d_on_the_web/basic_theory/index.html +++ b/files/ja/games/techniques/3d_on_the_web/basic_theory/index.html @@ -58,7 +58,7 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory <li><strong>ピクセル(Pixel)</strong>: スクリーン上の二次元のグリッドに配置された点、それぞれ RGBA の色を持つ。</li> </ul> -<p>頂点とフラグメントの処理はプログラミング可能です - あなたは <a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">自分自身でシェーダを書いて</a> 出力を操作することができます。</p> +<p>頂点とフラグメントの処理はプログラミング可能です - あなたは <a href="/ja/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">自分自身でシェーダを書いて</a> 出力を操作することができます。</p> <h2 id="Vertex_processing" name="Vertex_processing">頂点の処理</h2> @@ -123,10 +123,10 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory <p>これで 3D の処理の基本的な背景を知ることができました。もし練習に進んだり、動作するデモを見たいのでえあれば、下のチュートリアルを引き続き調べてください:</p> <ul> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js でデモを作る</a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js </a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas </a></li> - <li><a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの作成 </a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js でデモを作る</a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js </a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas </a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの作成 </a></li> </ul> <p>さらに進んで、クールな最先端な 3D の試みをあなた自身で作ってください！</p> diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.html b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.html index 8dac345c69..182f22c5ed 100644 --- a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.html +++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.html @@ -5,7 +5,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-F --- <div>{{GamesSidebar}}</div> -<p class="summary"><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR</a> APIと <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> API によって、ウェブブラウザ内でバーチャルリアリティ (VR) 体験を作成し始めることが可能になっていますが、コミュニティはもっと簡単に作れるツールやライブラリが現れるのを待っています。Mozilla の <a href="https://aframe.io/">A-Frame</a> フレームワークは、ウェブ開発者が慣れ親しんでいるシステムを用いて 3D VR 空間を構築するマークアップ言語を提供しています。このシステムはゲーム開発のコーディング原則に従っています; これはプロトタイプやデモを、大量の JavaScript や GLSL を書かずに、迅速にうまく構築するのに役立ちます。この記事では A-Frame をどうやって起動するか、そしてそれをつかって簡単なデモを構築する方法を説明します。</p> +<p class="summary"><a href="/ja/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR</a> APIと <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> API によって、ウェブブラウザ内でバーチャルリアリティ (VR) 体験を作成し始めることが可能になっていますが、コミュニティはもっと簡単に作れるツールやライブラリが現れるのを待っています。Mozilla の <a href="https://aframe.io/">A-Frame</a> フレームワークは、ウェブ開発者が慣れ親しんでいるシステムを用いて 3D VR 空間を構築するマークアップ言語を提供しています。このシステムはゲーム開発のコーディング原則に従っています; これはプロトタイプやデモを、大量の JavaScript や GLSL を書かずに、迅速にうまく構築するのに役立ちます。この記事では A-Frame をどうやって起動するか、そしてそれをつかって簡単なデモを構築する方法を説明します。</p> <h2 id="大まかな概要">大まかな概要</h2> diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html index 91d1b9ee9f..aa14278879 100644 --- a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html +++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html @@ -269,6 +269,6 @@ torus.scale.y = Math.abs(Math.sin(t)); <p>{{JSFiddleEmbed("https://jsfiddle.net/rybr720u/","","350")}}</p> -<p>あなたは今までのコードを<a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html">GitHubで見る</a>こともできるし、ローカル環境で遊びたいと思ったら<a href="https://github.com/end3r/MDN-Games-3D/">リポジトリをフォークする</a>こともできます。今あなたは Three.js の基本を理解しているでしょう。このページの親ページである <a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web">Web上の3Dに関するドキュメント</a>に行くこともできます。</p> +<p>あなたは今までのコードを<a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html">GitHubで見る</a>こともできるし、ローカル環境で遊びたいと思ったら<a href="https://github.com/end3r/MDN-Games-3D/">リポジトリをフォークする</a>こともできます。今あなたは Three.js の基本を理解しているでしょう。このページの親ページである <a href="/ja/docs/Games/Techniques/3D_on_the_web">Web上の3Dに関するドキュメント</a>に行くこともできます。</p> <p>WebGLを実際に触ることで、内部で何が起こっているのかをより理解することもできます。私たちの<a href="/ja/docs/Web/API/WebGL_API">WebGLドキュメンテーション</a>を参考にしてみてください。</p> diff --git a/files/ja/games/techniques/3d_on_the_web/webvr/index.html b/files/ja/games/techniques/3d_on_the_web/webvr/index.html index 82c41790e6..6c0755a7f2 100644 --- a/files/ja/games/techniques/3d_on_the_web/webvr/index.html +++ b/files/ja/games/techniques/3d_on_the_web/webvr/index.html @@ -106,7 +106,7 @@ translation_of: Games/Techniques/3D_on_the_web/WebVR <p>Boris Smus は、<a href="http://smus.com/responsive-vr/">レスポンシブ WebVR</a> の概念について書いています。 このコンセプトでは、VR ハードウェアのないラップトップ、Oculus Rift を搭載した PC、Google Cardboard に内蔵したスマートフォンなど、さまざまなデバイスで単一の Web ゲームをプレイしながら、それらすべてにユニークで価値のある体験を提供できます。 レスポンシブデザインに似ていますが、VR の世界に適用されます — 一度書けば VR ヘッドセットで実行できます ... またはそれなしで。 <a href="http://github.com/borismus/webvr-boilerplate">WebVR ボイラープレート</a>のソースを確認できます。 これは、WebVR の学習を開始する良い例であり、Web ベースの VR 体験の出発点です。</p> -<p>WebVR のシンプルなビルディングブロックを提供する <a href="https://aframe.io/">A-Frame</a> と呼ばれるマークアップフレームワークもあるため、VR Web サイトやゲームをすばやく構築して実験できます。 詳細については、<a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの作成</a>というチュートリアルを参照してください。</p> +<p>WebVR のシンプルなビルディングブロックを提供する <a href="https://aframe.io/">A-Frame</a> と呼ばれるマークアップフレームワークもあるため、VR Web サイトやゲームをすばやく構築して実験できます。 詳細については、<a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの作成</a>というチュートリアルを参照してください。</p> <p>没入感は、ゲームプレイやグラフィックスよりも重要です — 体験の "内側にいる" と感じる必要があります。 実現するのは簡単ではありませんが、リアルな画像は必要ありません。 それどころか、基本的な形状を高フレームレートで飛び交うだけで、かなりの効果が得られます。 実験が重要なことを覚えておいてください — 特にあなたのゲームに何が有効かを確認してください。</p> diff --git a/files/ja/games/techniques/async_scripts/index.html b/files/ja/games/techniques/async_scripts/index.html index 0e5279f64d..ed95e3a3c8 100644 --- a/files/ja/games/techniques/async_scripts/index.html +++ b/files/ja/games/techniques/async_scripts/index.html @@ -11,7 +11,7 @@ translation_of: Games/Techniques/Async_scripts <div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ja/docs/Games")}}</div> <div class="summary"> -<p><span class="seoSummary">全ての中~大規模ゲームでは、コンパイル処理を最適化してブラウザを最大限柔軟にする、非同期スクリプトとして <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a> コードをコンパイルします。Gecko では、非同期コンパイルによって、ゲームのロード時に JavaScript エンジンがメインスレッド外で asm.js をコンパイルし、生成した機械語コードをキャッシュしてそれ以降のロード時にコンパイル不要となります(Firefox 28から)。違いを見るには、<code>about:config</code> で <code>javascript.options.parallel_parsing</code> を反転させてください。</span></p> +<p><span class="seoSummary">全ての中~大規模ゲームでは、コンパイル処理を最適化してブラウザを最大限柔軟にする、非同期スクリプトとして <a href="/ja/docs/Games/Tools/asm.js">asm.js</a> コードをコンパイルします。Gecko では、非同期コンパイルによって、ゲームのロード時に JavaScript エンジンがメインスレッド外で asm.js をコンパイルし、生成した機械語コードをキャッシュしてそれ以降のロード時にコンパイル不要となります(Firefox 28から)。違いを見るには、<code>about:config</code> で <code>javascript.options.parallel_parsing</code> を反転させてください。</span></p> </div> <h2 id="非同期を動作させる">非同期を動作させる</h2> diff --git a/files/ja/games/techniques/audio_for_web_games/index.html b/files/ja/games/techniques/audio_for_web_games/index.html index 4bb44a5b8f..f0481c7596 100644 --- a/files/ja/games/techniques/audio_for_web_games/index.html +++ b/files/ja/games/techniques/audio_for_web_games/index.html @@ -44,7 +44,7 @@ translation_of: Games/Techniques/Audio_for_Web_Games <p>急騰するモバイルネットワークのデータ使用を軽減するための試みとして、再生開始前のバッファリングができなくなることが恐らくあります。バッファリングとは、ブラウザが前もってメディアのダウンロードをする処理であり、円滑な再生を確実なものにするために度々必要になります。</p> -<p>{{domxref("HTMLMediaElement")}} インターフェイスが備える <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#Properties">多くのプロパティ</a> はトラックが再生可能な状態にあるかどうかを決定する助けになります。</p> +<p>{{domxref("HTMLMediaElement")}} インターフェイスが備える <a href="/ja/docs/Web/API/HTMLMediaElement#Properties">多くのプロパティ</a> はトラックが再生可能な状態にあるかどうかを決定する助けになります。</p> <div class="note"> <p><strong>注</strong>: 色々な意味でバッファリングの概念は時代遅れです。バイトレンジリクエストが許容される限り（これが既定の振る舞いです）、先行する内容のダウンロードの必要なしにオーディオの任意の点に飛ぶことができるべきです。しかしながら、先読みは依然として便利です。それなしでは、再生が始められるようになる前に、常にいくらかのクライアント・サーバー間通信が必要になるでしょう。</p> @@ -52,7 +52,7 @@ translation_of: Games/Techniques/Audio_for_Web_Games <h3 id="並行したオーディオ再生">並行したオーディオ再生</h3> -<p>多くのゲームでは、複数のオーディオを同時に再生することが求められます。例えば、ゲーム内で様々なことが起こるために、バックグラウンドミュージックと効果音を一緒に再生することがあります。この状況は近々、<a href="/docs/Web/API/Web_Audio_API">Web Audio API</a>の採用でもっと上手くいくようになる予定ですが、現状最も広くサポートされている方法 ― 平凡な{{htmlelement("audio")}}要素を使用すること ― は、モバイルデバイス上では不安定な結果になります。</p> +<p>多くのゲームでは、複数のオーディオを同時に再生することが求められます。例えば、ゲーム内で様々なことが起こるために、バックグラウンドミュージックと効果音を一緒に再生することがあります。この状況は近々、<a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a>の採用でもっと上手くいくようになる予定ですが、現状最も広くサポートされている方法 ― 平凡な{{htmlelement("audio")}}要素を使用すること ― は、モバイルデバイス上では不安定な結果になります。</p> <h3 id="テストとサポート">テストとサポート</h3> @@ -152,7 +152,7 @@ translation_of: Games/Techniques/Audio_for_Web_Games <h3 id="オーディオスプライト">オーディオスプライト</h3> -<p>オーディオスプライトは<a href="/docs/Web/Guide/CSS/CSS_Image_Sprites">CSSスプライト</a>から名前をとったもので、CSSスプライトとは単一グラフィックリソースを連続したスプライトに分解して使うCSSのための視覚的なテクニックです。同じ原理をオーディオに適用することで、読み込みと再生に時間のかかる小さなオーディオファイルの束ではなく、必要とするオーディオすべてを含む大きなオーディオファイル一つを用いることができます。そのファイルから特定の音を再生するには、各オーディオスプライトの既知の開始・停止時間を指定するだけです。</p> +<p>オーディオスプライトは<a href="/ja/docs/Web/Guide/CSS/CSS_Image_Sprites">CSSスプライト</a>から名前をとったもので、CSSスプライトとは単一グラフィックリソースを連続したスプライトに分解して使うCSSのための視覚的なテクニックです。同じ原理をオーディオに適用することで、読み込みと再生に時間のかかる小さなオーディオファイルの束ではなく、必要とするオーディオすべてを含む大きなオーディオファイル一つを用いることができます。そのファイルから特定の音を再生するには、各オーディオスプライトの既知の開始・停止時間を指定するだけです。</p> <p>利点は、一つのオーディオを前もって提供しておき、スプライトをすぐ使える状態にできることです。こうすることで、大きな一つのオーディオの再生と即時停止をするだけですみます。また、サーバーリクエスト数を減らすことと、帯域幅を節約することもできます。</p> @@ -215,11 +215,11 @@ myAudio.addEventListener('timeupdate', function() { <p>ゲーム内の音楽は感情に訴える強力な効果があります。あなたは様々な楽曲サンプルを組み合わせることができ、さらに、オーディオ要素のボリュームをコントロールすることができることを想定すれば、異なる楽曲をクロスフェードさせることができます。<code><a href="/Apps/Build/Audio_and_video_delivery/HTML5_playbackRate_explained">playbackRate()</a></code>を使うことで、動きにより良く同期させるために、ピッチに影響なく音楽のスピードの調節もできます。</p> -<p>これは標準の{{HTMLElement("audio")}}要素を使って{{domxref("HTMLMediaElement")}}と連携しさえすれば可能となりますが、より発展した<a href="/docs/Web/API/Web_Audio_API">Web Audio API</a>を使えばもっと簡単で柔軟になります。次にこれについて見ていきましょう。</p> +<p>これは標準の{{HTMLElement("audio")}}要素を使って{{domxref("HTMLMediaElement")}}と連携しさえすれば可能となりますが、より発展した<a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a>を使えばもっと簡単で柔軟になります。次にこれについて見ていきましょう。</p> <h2 id="ゲーム用の_Web_オーディオ_API">ゲーム用の Web オーディオ API</h2> -<p>Now that it's supported in all modern browsers except for Opera Mini and Internet Explorer (<a href="https://status.modern.ie/webaudioapi">although Microsoft is now working on it</a>), an acceptable approach for many situations is to use the <a href="/docs/Web/API/Web_Audio_API">Web Audio API</a> (see the <a href="http://caniuse.com/#search=web%20audio%20api">Can I use Web Audio API page</a> for more on browser compatibility). The Web Audio API is an advanced audio JavaScript API that is ideal for game audio. Developers can generate audio and manipulate audio samples as well as positioning sound in 3D game space.</p> +<p>Now that it's supported in all modern browsers except for Opera Mini and Internet Explorer (<a href="https://status.modern.ie/webaudioapi">although Microsoft is now working on it</a>), an acceptable approach for many situations is to use the <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> (see the <a href="http://caniuse.com/#search=web%20audio%20api">Can I use Web Audio API page</a> for more on browser compatibility). The Web Audio API is an advanced audio JavaScript API that is ideal for game audio. Developers can generate audio and manipulate audio samples as well as positioning sound in 3D game space.</p> <p>A feasible cross-browser strategy would be to provide basic audio using the standard {{HTMLElement("audio")}} element and, where supported, enhance the experience using the Web Audio API.</p> @@ -241,7 +241,7 @@ myAudio.addEventListener('timeupdate', function() { <h3 id="トラックを読み込む">トラックを読み込む</h3> -<p>With the Web Audio API you can load separate tracks and loops individually using <a href="/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, which means you can load them synchronously or in parallel. Loading synchronously might mean parts of your music are ready earlier and you can start playing them while others load.</p> +<p>With the Web Audio API you can load separate tracks and loops individually using <a href="/ja/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, which means you can load them synchronously or in parallel. Loading synchronously might mean parts of your music are ready earlier and you can start playing them while others load.</p> <p>Either way you may want to synchronize tracks or loops. The Web Audio API contains the notion of an internal clock that starts ticking the moment you create an audio context. You'll need to take account of the time between creating an audio context and when the first audio track starts playing. Recording this offset and querying the playing track's current time gives you enough information to synchronize separate pieces of audio.</p> @@ -370,10 +370,10 @@ for (var i = 0, len = tracks.length; i < len; i++) { <li>The environment (cavernous, underwater, etc.)</li> </ul> -<p>This is especially useful in a three-dimensional environment rendered using <a href="/docs/Web/WebGL">WebGL</a>, where the Web Audio API makes it possible to tie audio to the objects and viewpoints.</p> +<p>This is especially useful in a three-dimensional environment rendered using <a href="/ja/docs/Web/WebGL">WebGL</a>, where the Web Audio API makes it possible to tie audio to the objects and viewpoints.</p> <div class="note"> -<p><strong>注</strong>: See <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio API Spatialization Basics</a> for more details.</p> +<p><strong>注</strong>: See <a href="/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio API Spatialization Basics</a> for more details.</p> </div> <h2 id="こちらも確認">こちらも確認</h2> diff --git a/files/ja/games/techniques/controls_gamepad_api/index.html b/files/ja/games/techniques/controls_gamepad_api/index.html index 1eb8e559d3..adb633b4cd 100644 --- a/files/ja/games/techniques/controls_gamepad_api/index.html +++ b/files/ja/games/techniques/controls_gamepad_api/index.html @@ -7,7 +7,7 @@ translation_of: Games/Techniques/Controls_Gamepad_API <h2 id="Web_ゲームのコントロール">Web ゲームのコントロール</h2> -<p><span id="result_box" lang="ja"><span>歴史的には、テレビに接続されたコンソールでゲームをすること、PC 上でのゲームとはまったく異なる体験でした。</span></span><span id="result_box" lang="ja"><span>最終的にはドライバとプラグインにより、コンソールゲームパッドをデスクトップゲームーネイティブかブラウザで実行されるゲームー</span></span><span lang="ja"><span>で使用できるようになりました。</span> <span>HTML5 の時代になり、</span></span><a href="https://developer.mozilla.org/docs/Web/API/Gamepad_API">Gamepad API</a><span lang="ja"><span> が完成し、プラグインなしでゲームパッドコントローラを使用してブラウザベースのゲームをプレイできるようになりました。</span> <span>Gamepad API は、入力を処理するために JavaScript コード内で使用できるボタンの押下と軸の変更を公開するインターフェイスを提供することで、これを実現します。</span> <span>これらは、ブラウザゲームにとって良いことです。</span></span></p> +<p><span id="result_box" lang="ja"><span>歴史的には、テレビに接続されたコンソールでゲームをすること、PC 上でのゲームとはまったく異なる体験でした。</span></span><span id="result_box" lang="ja"><span>最終的にはドライバとプラグインにより、コンソールゲームパッドをデスクトップゲームーネイティブかブラウザで実行されるゲームー</span></span><span lang="ja"><span>で使用できるようになりました。</span> <span>HTML5 の時代になり、</span></span><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a><span lang="ja"><span> が完成し、プラグインなしでゲームパッドコントローラを使用してブラウザベースのゲームをプレイできるようになりました。</span> <span>Gamepad API は、入力を処理するために JavaScript コード内で使用できるボタンの押下と軸の変更を公開するインターフェイスを提供することで、これを実現します。</span> <span>これらは、ブラウザゲームにとって良いことです。</span></span></p> <p><img alt="gamepad-controls" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img01.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p> diff --git a/files/ja/games/techniques/index.html b/files/ja/games/techniques/index.html index f3dee722b0..2f1c134d9f 100644 --- a/files/ja/games/techniques/index.html +++ b/files/ja/games/techniques/index.html @@ -16,18 +16,18 @@ translation_of: Games/Techniques </div> <dl> - <dt><a href="/docs/Games/Techniques/Async_scripts">asm.js用の非同期スクリプトを使用する</a></dt> + <dt><a href="/ja/docs/Games/Techniques/Async_scripts">asm.js用の非同期スクリプトを使用する</a></dt> <dd>中~大規模ゲームの作成に必要となる、非同期スクリプトは活用すべき重要テクニックであり、その結果あなたのゲームのJavaScriptはメインスレッド外でコンパイルされて、将来のゲーム実行のためにキャッシュされ、その結果ユーザにとっては目覚ましいパフォーマンス改良となります。この記事では方法を説明します。</dd> - <dt><a href="/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">起動パフォーマンスを最適化する</a></dt> + <dt><a href="/ja/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">起動パフォーマンスを最適化する</a></dt> <dd>作成したゲームが素早く、スムーズに、ユーザのブラウザや端末が固まったように見えなくする方法。</dd> - <dt><a href="/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">WebRTC のp2pデータチャネルを使う</a></dt> + <dt><a href="/ja/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">WebRTC のp2pデータチャネルを使う</a></dt> <dd>オーディオとビデオ通信のサポートに加えて、WebRTCはプレイヤー同士のテキスト・バイナリデータ交換を可能にする、ピア・ツー・ピアのデータチャネルもあります。この記事ではこれでできる事を説明し、簡単に実現するライブラリの使用方法を示します。</dd> - <dt><a href="/docs/Games/Techniques/Efficient_animation_for_web_games">webゲーム用の効率的アニメーション</a></dt> + <dt><a href="/ja/docs/Games/Techniques/Efficient_animation_for_web_games">webゲーム用の効率的アニメーション</a></dt> <dd>この記事ではwebゲーム用の効果的なアニメーション作成のテクニックとアドバイスをモバイルフォンといった下位側の端末サポートに偏って網羅します。CSS トランジションや CSS アニメーション、{{ domxref("window.requestAnimationFrame") }} を含むJavaScriptループについて触れます。</dd> - <dt><a href="/docs/Games/Techniques/Audio_for_Web_Games">Webゲーム用のオーディオ</a></dt> + <dt><a href="/ja/docs/Games/Techniques/Audio_for_Web_Games">Webゲーム用のオーディオ</a></dt> <dd>ゲームにとってオーディオは重要部分です — フィードバックと雰囲気を付け加えます。Webベースのオーディオは早くから成熟していましたが、まだ多くのブラウザに案内するべき違いがあります。この記事ではwebゲーム用のオーディオを実装するための詳細なガイドを提供し、現在なるべく広い範囲のプラットフォームで動作するものを観察します。</dd> - <dt><a href="/docs/Games/Techniques/2D_collision_detection">2D 衝突検出</a></dt> + <dt><a href="/ja/docs/Games/Techniques/2D_collision_detection">2D 衝突検出</a></dt> <dd>2D ゲームの衝突検出についての正確な紹介</dd> - <dt><a href="/docs/Games/Techniques/Tilemaps">タイルマップ</a></dt> + <dt><a href="/ja/docs/Games/Techniques/Tilemaps">タイルマップ</a></dt> <dd>タイルは2Dゲームの世界を作るのに、とてもよくあるテクニックです。この記事ではタイルマップと、Canvas API でそれを実装する方法を紹介します。</dd> </dl> diff --git a/files/ja/games/techniques/webrtc_data_channels/index.html b/files/ja/games/techniques/webrtc_data_channels/index.html index 512aa787e0..b11e1ca2ab 100644 --- a/files/ja/games/techniques/webrtc_data_channels/index.html +++ b/files/ja/games/techniques/webrtc_data_channels/index.html @@ -15,7 +15,7 @@ translation_of: Games/Techniques/WebRTC_data_channels <div>{{IncludeSubnav("/ja/docs/Games")}}</div> -<p><a href="/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> (Web Real-Time Communications; Webリアルタイム通信の略語) API は、第一にオーディオとビデオ通信のサポートによって知られています。しかしながら、ピア・ツー・ピアのデータチャネルもあります。この記事ではこれの詳細を説明し、ゲーム内にデータチャネルを実装するライブラリの使用方法を示します。</p> +<p><a href="/ja/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> (Web Real-Time Communications; Webリアルタイム通信の略語) API は、第一にオーディオとビデオ通信のサポートによって知られています。しかしながら、ピア・ツー・ピアのデータチャネルもあります。この記事ではこれの詳細を説明し、ゲーム内にデータチャネルを実装するライブラリの使用方法を示します。</p> <h2 id="データチャネルとは">データチャネルとは?</h2> diff --git a/files/ja/games/tools/index.html b/files/ja/games/tools/index.html index 0d2495ad03..613a40dead 100644 --- a/files/ja/games/tools/index.html +++ b/files/ja/games/tools/index.html @@ -17,23 +17,23 @@ translation_of: Games/Tools </div> <dl> - <dt><a href="/docs/Games/Tools/asm.js">asm.js</a></dt> + <dt><a href="/ja/docs/Games/Tools/asm.js">asm.js</a></dt> <dd>asm.js は極めて限定された JavaScript のサブセットで、ahead-of-time (AOT) コンパイラで最適化されて、通常の JavaScript コードよりも極めて高速に動作します。これはもちろん、ゲーム用に優れています。</dd> <dt><a href="https://github.com/kripken/emscripten/wiki">Emscripten</a></dt> <dd> - <p>LLVM から JavaScript へのコンパイラです。これを利用することで、C++ や LLVM バイトコードを出力する言語のコードを、高速に動作する JavaScript へコンパイル可能です。これはアプリをWebに移植する優秀なツールです! <a href="https://github.com/kripken/emscripten/wiki/Tutorial">有用な Emscripten のチュートリアルはこちらです。</a> なお <a href="/docs/Mozilla/Projects/Emscripten">MDN にも Emscripten の記事を執筆中</a>です。</p> + <p>LLVM から JavaScript へのコンパイラです。これを利用することで、C++ や LLVM バイトコードを出力する言語のコードを、高速に動作する JavaScript へコンパイル可能です。これはアプリをWebに移植する優秀なツールです! <a href="https://github.com/kripken/emscripten/wiki/Tutorial">有用な Emscripten のチュートリアルはこちらです。</a> なお <a href="/ja/docs/Mozilla/Projects/Emscripten">MDN にも Emscripten の記事を執筆中</a>です。</p> </dd> - <dt><a href="/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler" title="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/">Gecko プロファイラ</a></dt> + <dt><a href="/ja/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler" title="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/">Gecko プロファイラ</a></dt> <dd>Gecko プロファイラを利用すると、パフォーマンス上の問題を引き起こしている箇所の特定が容易になります。その結果あなたのゲームは最高速で動作できます。</dd> - <dt><a href="/docs/Games/Tools/Engines_and_tools">ゲームエンジンとツール</a></dt> + <dt><a href="/ja/docs/Games/Tools/Engines_and_tools">ゲームエンジンとツール</a></dt> <dd>ゲーム開発者にとって有用な、ゲームエンジンとテンプレートのまとめです。</dd> - <dt><a href="/docs/Mozilla/Projects/Shumway">Shumway</a></dt> + <dt><a href="/ja/docs/Mozilla/Projects/Shumway">Shumway</a></dt> <dd>Shumway は Adobe Flash で作成されたものを JavaScript や WebGL などを用いてレンダリングします。これを利用することで Flash とオープンな Web 標準との間の溝を埋められます。この文書では Shumway の利用方法と、バグ修正にコントリビュートする方法について解説します。</dd> <dt>ゲーム開発とデバッグのためのツールチェーン</dt> - <dd>通常の Web アプリのデバッグとの違いや、ツールについて解説します。多くは<a href="/docs/Tools">開発ツール</a>でカバーされますが、特に有用なツールチェーンのチュートリアルはこちらです： + <dd>通常の Web アプリのデバッグとの違いや、ツールについて解説します。多くは<a href="/ja/docs/Tools">開発ツール</a>でカバーされますが、特に有用なツールチェーンのチュートリアルはこちらです： <ul> <li>基本的なツールの概要</li> - <li><a href="/docs/Tools/Shader_Editor">シェーダエディタ</a></li> + <li><a href="/ja/docs/Tools/Shader_Editor">シェーダエディタ</a></li> <li>パフォーマンスツール</li> </ul> </dd> 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 <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> +<p>全 16回の<a href="/ja/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> @@ -86,6 +86,6 @@ function update() { <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>次のステップでは、<a href="/ja/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 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 <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> +<p>これは<a href="/ja/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> +<p><span class="seoSummary">ボールが動くのを見られたのは良いことですが、画面からすぐ消えてしまっては面白くないじゃありませんか! これを解決するためにとても簡単な衝突検知 (<a href="/ja/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection">後ほど</a>詳しく説明します) を導入し、Canvasの四辺でボールを弾ませます。</span></p> <h2 id="簡単な衝突検知">簡単な衝突検知</h2> @@ -101,6 +101,6 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { <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>ボールが動き、かつゲームボードに留まるようになることまでこぎつけました。第4章では操作できるパドルを実装してみます。 <a href="/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 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_ <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> +<p>これは<a href="/ja/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> @@ -108,6 +108,6 @@ var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;</pre> <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>というわけでついにブロックができました。でもボールはブロックに全く反応しません。第7章、<a href="/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 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 <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> +<p>これは<a href="/ja/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> @@ -128,6 +128,6 @@ for(var c=0; c<brickColumnCount; c++) { <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>着実にゴールに近づいています。では、先に進みましょう。第8章ではどのように<a href="/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 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: >- <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> +<p>これは<a href="/ja/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> @@ -109,6 +109,6 @@ ctx.closePath();</pre> <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>ここまでで基本的なHTMLを組み上げcanvasに少し学習しました。それでは、第2章に進み<a href="/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 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 <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> +<p>これは<a href="/ja/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> @@ -91,8 +91,8 @@ else { <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>おめでとうございます。これで全てのレッスンを終えました。ここまでで、キャンバス操作の基本をと簡単な2Dゲームの裏にあるロジックを学んだはずです。フレームワークを学びゲーム開発を続ける良い時期です。このシリーズに対応する<a href="/ja/docs/Games/Workflows/2D_breakout_game_Phaser">Phaserを使ったブロックくずしゲーム</a>や<a href="/ja/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">デバイス回転方向を使った2D 迷路ゲーム</a>チュートリアルを見てみると良いでしょう。<a href="/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>また、<a href="/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 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 <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> +<div class="summary">これは<a href="/ja/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> @@ -82,6 +82,6 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { <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>今のところかなり順調に進歩してきていて、ゲームも負けるようになったことでもっと遊ぶ価値が感じられるようになってきました。第六章<a href="/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 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 <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> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Canvasを作ってその上に描画する</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">ボールを動かす</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">ボールを壁で弾ませる</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">パドルとキーボード操作</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">ゲームオーバー</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">ブロックのかたまりを作る</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">衝突検出</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">スコアと勝ち負けを記録する</a></li> + <li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">マウス操作</a></li> + <li><a href="/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> +<p><strong>ノート</strong>: ゲームライブラリを用いた2D Webゲーム開発に興味があるのであれば、このシリーズに対応する<a href="/ja/docs/Games/Workflows/2D_breakout_game_Phaser">Phaserを使ったブロックくずしゲーム</a>も参照してください。</p> </div> <div class="note"> @@ -45,6 +45,6 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript <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>それでは始めましょう! 最初の章、<a href="/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 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 <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> +<p>これは<a href="/ja/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> @@ -53,6 +53,6 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls <h2 id="次のステップ">次のステップ</h2> -<p>最後に微調整する準備が整った、完全なゲームが完成しました。では、<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">仕上げ</a>に入りましょう。</p> +<p>最後に微調整する準備が整った、完全なゲームが完成しました。では、<a href="/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 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 <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> +<p>これは<a href="/ja/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> @@ -136,6 +136,6 @@ function draw() { <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>ボールを描画して動くようにしましたが、そのままCanvasの縁から消えていってしまいます。第3章ではどのように<a href="/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 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 <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> +<p>これは<a href="/ja/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> @@ -124,6 +124,6 @@ else if(leftPressed && paddleX > 0) { <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>ゲームっぽい要素を追加しましょう。今問題なのはただパドルでボールを永遠に打ち続けることしか出来ないという点です。これは第5章、<a href="/ja/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 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_ <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> +<p>これは<a href="/ja/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> @@ -90,6 +90,6 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_ <h2 id="次のステップ">次のステップ</h2> -<p>この時点でもこのゲームはかなりよく見えます。次のレッスンでは<a href="https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">マウス操作</a>を追加することでゲームの魅力を広げます。</p> +<p>この時点でもこのゲームはかなりよく見えます。次のレッスンでは<a href="/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 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 <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> + <dt><a href="/ja/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> + <dt><a href="/ja/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="/ja/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="/ja/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> and <a href="/ja/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> |