diff --git a/files/ja/learn/css/first_steps/how_css_is_structured/index.md b/files/ja/learn/css/first_steps/how_css_is_structured/index.md index 27f47cd4dad54b..2fcdf70054f01a 100644 --- a/files/ja/learn/css/first_steps/how_css_is_structured/index.md +++ b/files/ja/learn/css/first_steps/how_css_is_structured/index.md @@ -289,11 +289,11 @@ CSS のプロパティと値は大文字と小文字を区別しません。そ 例として、CSS 内で単純な計算を行うことができる `calc()` 関数が挙げられます。 -```html +```html live-sample___the_calc_function
The inner box is 90% - 30px.
``` -```css +```css live-sample___the_calc_function .outer { border: 5px solid black; } @@ -316,11 +316,11 @@ CSS のプロパティと値は大文字と小文字を区別しません。そ 他の例としては、 {{cssxref("transform")}} のさまざまな値、たとえば `rotate()` などがあります。 -```html +```html live-sample___transform_functions
``` -```css +```css live-sample___transform_functions .box { margin: 30px; width: 100px; diff --git a/files/ja/web/api/customelementregistry/define/index.md b/files/ja/web/api/customelementregistry/define/index.md index c3490563b9e2ca..94653f76c4294b 100644 --- a/files/ja/web/api/customelementregistry/define/index.md +++ b/files/ja/web/api/customelementregistry/define/index.md @@ -28,7 +28,7 @@ customElements.define(name, constructor, options); - : 要素の定義の仕方を制御するオブジェクト。現在は、次の 1 つのオプションのみに対応しています。 -- `extends`: 拡張する組み込み要素の名前を示す文字列。*カスタム組み込み要素*を作成するのに使われる。 + - `extends`: 拡張する組み込み要素の名前を示す文字列。*カスタム組み込み要素*を作成するのに使われる。 ### 返値 diff --git a/files/ja/web/api/element/beforematch_event/index.md b/files/ja/web/api/element/beforematch_event/index.md index ddbee9e1513e14..359e476210ff74 100644 --- a/files/ja/web/api/element/beforematch_event/index.md +++ b/files/ja/web/api/element/beforematch_event/index.md @@ -38,7 +38,7 @@ HTML の [`hidden`](/ja/docs/Web/HTML/Global_attributes/hidden) 属性は、`unt この例では、次のものがあります。 -- 2 つの {{HTMLElement("div")}} 要素。最初の要素は非表示で、2 つ目には `hidden="until-found"` と `id="until-found-box"` 属性があります。 +- 2 つの {{HTMLElement("div")}} 要素。最初の要素は非表示になっていませんが、2 つ目には `hidden="until-found"` と `id="until-found-box"` 属性があります。 - `"until-found-box"` フラグメントをターゲットとしたリンク。 また、hidden until found 要素で発行される `beforematch` イベントを待ち受けする JavaScript もあります。イベントハンドラーはボックスのテキストコンテンツを変更します。 diff --git a/files/ja/web/api/htmltextareaelement/name/index.md b/files/ja/web/api/htmltextareaelement/name/index.md new file mode 100644 index 00000000000000..f33054da518541 --- /dev/null +++ b/files/ja/web/api/htmltextareaelement/name/index.md @@ -0,0 +1,35 @@ +--- +title: "HTMLTextAreaElement: name プロパティ" +slug: Web/API/HTMLTextAreaElement/name +l10n: + sourceCommit: d064784c78ec30c87ec3c3d9681b147999fd782f +--- + +{{ApiRef("HTML DOM")}} + +{{domxref("HTMLTextAreaElement")}} インターフェイスの **`name`** プロパティは、{{HTMLElement("textarea")}} 要素の名前を表します。要素の [`name`](/ja/docs/Web/HTML/Element/textarea#name) 属性を反映します。 + +## 値 + +要素の名前を表す文字列です。 + +## 例 + +```js +const textareaElement = document.querySelector("#message"); +console.log(`Element's name: ${textareaElement.name}`); +textareaElement.name = "response"; // 要素の名前を設定または更新する +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLTextAreaElement.value")}} +- {{domxref("HTMLTextAreaElement.textLength")}} diff --git a/files/ja/web/api/svganimateelement/index.md b/files/ja/web/api/svganimateelement/index.md new file mode 100644 index 00000000000000..e9c5c5236c1b16 --- /dev/null +++ b/files/ja/web/api/svganimateelement/index.md @@ -0,0 +1,28 @@ +--- +title: SVGAnimateElement +slug: Web/API/SVGAnimateElement +l10n: + sourceCommit: 226ac33eb70ed5411dd2d68bd602c80cafd780b6 +--- + +{{APIRef("SVG")}} + +**`SVGAnimateElement`** インターフェイスは {{SVGElement("animate")}} 要素に対応します。 + +{{InheritanceDiagram}} + +## インスタンスプロパティ + +_このインターフェイスにはプロパティがありませんが、親である {{domxref("SVGAnimationElement")}} からプロパティを継承しています。_ + +## インスタンスメソッド + +_このインターフェイスにはメソッドがありませんが、親である {{domxref("SVGAnimationElement")}} からメソッドを継承しています。_ + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/html/element/dialog/index.md b/files/ja/web/html/element/dialog/index.md index 39d8a4a15a5a85..5b4ae5503d2890 100644 --- a/files/ja/web/html/element/dialog/index.md +++ b/files/ja/web/html/element/dialog/index.md @@ -9,7 +9,7 @@ l10n: **``** は [HTML](/ja/docs/Web/HTML) の要素で、モーダルまたは非モーダルダイアログボックスや、それ以外の消すことができるアラート、インスペクター、サブウィンドウなどのような対話的コンポーネントを表します。 -HTML の `` 要素は、モーダルダイアログボックスと非モーダルダイアログボックスのどちらを作成する時にも使用します。 モーダルダイアログボックスは、ページの他の部分との操作を中断し、非モーダルダイアログボックスは、ページの他の部分との走査を許可します。 +HTML の `` 要素は、モーダルダイアログボックスと非モーダルダイアログボックスのどちらを作成する時にも使用します。 モーダルダイアログボックスは、ページの他の部分との操作を中断し、非モーダルダイアログボックスは、ページの他の部分との操作を許可します。 `` 要素を表示するには、JavaScript を使用して下さい。モーダルダイアログを表示するには {{domxref("HTMLDialogElement.showModal()", ".showModal()")}} メソッドを、非モーダルダイアログを表示するには {{domxref("HTMLDialogElement.show()", ".show()")}} メソッドを使用して下さい。ダイアログボックスは {{domxref("HTMLDialogElement.close()", ".close()")}} メソッドを使用するか、または `` 要素内に含まれる `
` フォームを送信する際に [`dialog`](/ja/docs/Web/HTML/Element/form#method) メソッドを使用して閉じることができます。モーダルダイアログは、Esc キーを押すことでも閉じることができます。 diff --git a/files/ja/web/http/status/501/index.md b/files/ja/web/http/status/501/index.md index 28a42836dc4e65..faf86e37e2c442 100644 --- a/files/ja/web/http/status/501/index.md +++ b/files/ja/web/http/status/501/index.md @@ -9,7 +9,7 @@ l10n: HyperText Transfer Protocol (HTTP) の **`501 Not Implemented`** サーバーエラーレスポンスコードは、**サーバーがリクエストを満たすのに必要な機能に対応していないこと**を示します。 -このステータスは {{HTTPHeader("Retry-After")}} ヘッダーを送信することもでき、いつまでに機能を機能がサポートされているかどうかを確認するためのチェックバックのタイミングを要求元に伝えることができます。 +このステータスは {{HTTPHeader("Retry-After")}} ヘッダーを送信することもでき、いつまでに機能がサポートされるかを確認するためのチェックバックのタイミングを要求元に伝えることができます。 `501` は、サーバーがリクエストメソッドを理解できず、あるリソースに対して対応することができない場合のレスポンスに適切です。サーバーが対応する必要がある（したがって、 `501` を返す必要がない）メソッドは {{HTTPMethod("GET")}} と {{HTTPMethod("HEAD")}} だけです。 diff --git a/files/ja/web/javascript/reference/global_objects/isnan/index.md b/files/ja/web/javascript/reference/global_objects/isnan/index.md index a688417ab15dbb..12052cb506b316 100644 --- a/files/ja/web/javascript/reference/global_objects/isnan/index.md +++ b/files/ja/web/javascript/reference/global_objects/isnan/index.md @@ -5,7 +5,7 @@ slug: Web/JavaScript/Reference/Global_Objects/isNaN {{jsSidebar("Objects")}} -**`isNaN()`** 関数は引数が {{jsxref("NaN")}} (非数) かどうかを判定します。`isNaN` 関数の型強制は[意外なもの](#confusing_special-case_behavior)になる可能性があるため、他の {{jsxref("Number.isNaN()")}} を使用した方が良いかもしれません。 +**`isNaN()`** 関数は引数が {{jsxref("NaN")}} (非数) かどうかを判定します。`isNaN` 関数の型強制は[意外なもの](#解説)になる可能性があるため、他の {{jsxref("Number.isNaN()")}} を使用した方が良いかもしれません。 {{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}} diff --git a/files/ja/web/javascript/reference/global_objects/iterator/drop/index.md b/files/ja/web/javascript/reference/global_objects/iterator/drop/index.md new file mode 100644 index 00000000000000..734bb5c420d698 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/iterator/drop/index.md @@ -0,0 +1,138 @@ +--- +title: Iterator.prototype.drop() +slug: Web/JavaScript/Reference/Global_Objects/Iterator/drop +l10n: + sourceCommit: 7df171ff1d6da6a5e3911b7aedd56f6312bf0cca +--- + +{{JSRef}} + +**`drop()`** は {{jsxref("Iterator")}} インスタンスのメソッドで、新しい[イテレーターヘルパーオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator#イテレーターヘルパーオブジェクト)を返します。これは、このイテレーターの開始位置から指定した数の要素を読み飛ばします。 + +## 構文 + +```js-nolint +drop(limit) +``` + +### 引数 + +- `limit` + - : 反復処理の先頭から削除する要素の数です。 + +### 返値 + +新しい[イテレーターヘルパーオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator#イテレーターヘルパーオブジェクト)です。 返されたイテレーターヘルパーの `next()` メソッドが最初に呼び出されると、現在のイテレーターは `limit` 要素分だけ即座に進められ、次の要素（`limit+1` 番目の要素）が返されます。その後、イテレーターヘルパーは残りの要素を順に返します。現在のイテレーターが `limit` 未満の数の要素しか保有していない場合、新しいイテレーターヘルパーは、 `next()` が最初に呼び出された時点で即座に処理が完了します。 + +### 例外 + +- {{jsxref("RangeError")}} + - : `limit` を[整数に変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数変換)する際に、 {{jsxref("NaN")}} または負の数になった場合に発生します。 + +## 例 + +### drop() の使用 + +次の例では、フィボナッチ数列の項を反復処理するイテレーターを作成します。最初の 2 項を省略し、 3 番目の項から開始します。 + +```js +function* fibonacci() { + let current = 1; + let next = 1; + while (true) { + yield current; + [current, next] = [next, current + next]; + } +} + +const seq = fibonacci().drop(2); +console.log(seq.next().value); // 2 +console.log(seq.next().value); // 3 +``` + +これは次のものと同等です。 + +```js +const seq = fibonacci(); +seq.next(); +seq.next(); +``` + +### drop() を for...of ループで使用 + +`drop()` は、イテレーターを手作業で作成しない場合に最も便利です。イテレーターも反復可能オブジェクトであるため、返されたヘルパーを {{jsxref("Statements/for...of", "for...of")}} ループで反復処理することができます。 + +```js +for (const n of fibonacci().drop(2)) { + console.log(n); + if (n > 30) { + break; + } +} + +// Logs: +// 2 +// 3 +// 5 +// 8 +// 13 +// 21 +// 34 +``` + +### drop() と take() の組み合わせ + +`drop()` と {{jsxref("Iterator.prototype.take()")}} を組み合わせることで、イテレーターの一部を取得することができます。 + +```js +for (const n of fibonacci().drop(2).take(5)) { + // 最初の 2 つの要素を削除し、次の 5 つを抽出する + console.log(n); +} +// Logs: +// 2 +// 3 +// 5 +// 8 +// 13 + +for (const n of fibonacci().take(5).drop(2)) { + // 最初の 5 つの要素を抽出し、次の 2 つを削除する + console.log(n); +} +// Logs: +// 2 +// 3 +// 5 +``` + +### 削除数の下限と上限 + +`limit` が負の数か {{jsxref("NaN")}} であった場合、 {{jsxref("RangeError")}} が発生します。 + +```js +fibonacci().drop(-1); // RangeError: -1 must be positive +fibonacci().drop(undefined); // RangeError: undefined must be positive +``` + +`limit` が反復処理で生成可能な要素の総数よりも大きい場合（{{jsxref("Infinity")}} など）、返された反復処理ヘルパーは、 `next()` が最初に呼び出されたときに、すべての要素を即座に破棄して完了します。現在の反復処理が無限である場合、返された反復処理ヘルパーは、決して完了しません。 + +```js +fibonacci().drop(Infinity).next(); // 終了しない +new Set([1, 2, 3]).values().drop(Infinity).next(); // { value: undefined, done: true } +new Set([1, 2, 3]).values().drop(4).next(); // { value: undefined, done: true } +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`Iterator.prototype.drop` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#iterator-helpers) +- {{jsxref("Iterator")}} +- {{jsxref("Iterator.prototype.take()")}} diff --git a/files/ja/web/javascript/reference/global_objects/iterator/every/index.md b/files/ja/web/javascript/reference/global_objects/iterator/every/index.md new file mode 100644 index 00000000000000..4f691a024d563b --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/iterator/every/index.md @@ -0,0 +1,81 @@ +--- +title: Iterator.prototype.every() +slug: Web/JavaScript/Reference/Global_Objects/Iterator/every +l10n: + sourceCommit: a71768c124d1bb2dceef873c0bda266e9f714e4c +--- + +{{JSRef}} + +**`every()`** は {{jsxref("Iterator")}} インスタンスのメソッドで、 {{jsxref("Array.prototype.every()")}} と似ています。このイテレーターによって生成されたすべての要素が、指定された関数によって実装された試験に合格するかどうかを確認します。論理値を返します。 + +## 構文 + +```js-nolint +every(callbackFn) +``` + +### 引数 + +- `callbackFn` + - : このイテレーターによって生成された各要素に対して実行する関数。要素が試験に合格したことを示す[真値](/ja/docs/Glossary/Truthy)、またはそうでなければ[偽値](/ja/docs/Glossary/Falsy)を返さなければなりません。この関数は、以下の引数とともに呼び出されます。 + - `element` + - : 処理中の現在の要素です。 + - `index` + - : 処理中の現在の要素のインデックスです。 + +### 返値 + +`callbackFn` がすべての要素に対して{{Glossary("truthy","真値")}}を返した場合は `true` です。そうでなければ `false` です。 + +## 解説 + +`every()` はイテレーターを反復処理し、各要素に対して一度ずつ `callbackFn` 関数を呼び出します。 コールバック関数が偽値を返した場合は、ただちに `false` を返します。そうでない場合は、イテレーターの最後まで反復処理を行い、 `true` を返します。 `every()` が `false` を返した場合、そのイテレーターの `return()` メソッドを呼び出して終了します。 + +イテレーターヘルパーの主な利点は、配列メソッドよりも「遅延的」であるということです。つまり、要求されたときにのみ次の値を生成するという意味です。これにより、不必要なコンピューター処理を避けることができ、また無限イテレーターでも使用することができます。無限イテレーターでは、`every()` は最初の偽値が得られるとすぐに `false` を返します。もし `callbackFn` が常に真値を返した場合、メソッドは終了しません。 + +## 例 + +### every() の使用 + +```js +function* fibonacci() { + let current = 1; + let next = 1; + while (true) { + yield current; + [current, next] = [next, current + next]; + } +} + +const isEven = (x) => x % 2 === 0; +console.log(fibonacci().every(isEven)); // false + +const isPositive = (x) => x > 0; +console.log(fibonacci().take(10).every(isPositive)); // true +console.log(fibonacci().every(isPositive)); // Never completes +``` + +`every()` を呼び出すと、メソッドが早期に終了した場合でも、常にその元となるイテレーターが閉じられます。 イテレーターが未完了の状態で残されることはありません。 + +```js +const seq = fibonacci(); +console.log(seq.every(isEven)); // false +console.log(seq.next()); // { value: undefined, done: true } +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`Iterator.prototype.every` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#iterator-helpers) +- {{jsxref("Iterator")}} +- {{jsxref("Iterator.prototype.find()")}} +- {{jsxref("Iterator.prototype.some()")}} +- {{jsxref("Array.prototype.every()")}} diff --git a/files/ja/web/javascript/reference/global_objects/iterator/filter/index.md b/files/ja/web/javascript/reference/global_objects/iterator/filter/index.md new file mode 100644 index 00000000000000..98459d3b760b03 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/iterator/filter/index.md @@ -0,0 +1,106 @@ +--- +title: Iterator.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Iterator/filter +l10n: + sourceCommit: 7df171ff1d6da6a5e3911b7aedd56f6312bf0cca +--- + +{{JSRef}} + +**`filter()`** は {{jsxref("Iterator")}} インスタンスのメソッドで、新しい[イテレーターヘルパーオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator#イテレーターヘルパーオブジェクト)を返します。このオブジェクトは、提供されたコールバック関数が `true` を返すイテレーターの要素のみを返します。 + +## 構文 + +```js-nolint +filter(callbackFn) +``` + +### 引数 + +- `callbackFn` + - : このイテレーターが生成するすべての要素に対して実行する関数です。[真値](/ja/docs/Glossary/Truthy)を返すと、その要素をこのイテレーターヘルパーが生成し、[偽値](/ja/docs/Glossary/Falsy)の場合は生成しません。この関数は、以下の引数とともに呼び出されます。 + - `element` + - : 処理中の現在の要素です。 + - `index` + - : 処理中の現在の要素のインデックスです。 + +### 返値 + +新しい[イテレーターヘルパーオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator#イテレーターヘルパーオブジェクト)です。イテレーターヘルパーの `next()` メソッドを呼び出すたびに、このイテレーターでコールバック関数が `true` を返す次の要素を返します。このイテレーターが完了した場合、イテレーターヘルパーオブジェクトも完了します（`next()` メソッドが `{ value: undefined, done: true }` を生成します）。 + +## 解説 + +配列メソッドよりもイテレーターヘルパーのほうが優れている主な点は、遅延処理されるということ、つまり、リクエストされたときにのみ次の値を生成するという意味です。これにより、不必要なコンピューター処理を避けることができ、また、無限イテレーターでも使用することができます。 + +## 例 + +### filter() の使用 + +次の例では、フィボナッチ数列の項を生成するイテレーターを作成し、最初のいくつかの偶数の項を読み取ります。 + +```js +function* fibonacci() { + let current = 1; + let next = 1; + while (true) { + yield current; + [current, next] = [next, current + next]; + } +} + +const seq = fibonacci().filter((x) => x % 2 === 0); +console.log(seq.next().value); // 2 +console.log(seq.next().value); // 8 +console.log(seq.next().value); // 34 +``` + +### filter() と for...of ループの使用 + +`filter()` は、イテレーターを手作業で処理しない場合に最も便利です。イテレーターも反復可能オブジェクトであるため、返されたヘルパーを {{jsxref("Statements/for...of", "for...of")}} ループで反復処理することができます。 + +```js +for (const n of fibonacci().filter((x) => x % 2 === 0)) { + console.log(n); + if (n > 30) { + break; + } +} + +// Logs: +// 2 +// 8 +// 34 +``` + +これは次のものと同等です、 + +```js +for (const n of fibonacci()) { + if (n % 2 !== 0) { + continue; + } + console.log(n); + if (n > 30) { + break; + } +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`Iterator.prototype.filter` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#iterator-helpers) +- {{jsxref("Iterator")}} +- {{jsxref("Iterator.prototype.forEach()")}} +- {{jsxref("Iterator.prototype.every()")}} +- {{jsxref("Iterator.prototype.map()")}} +- {{jsxref("Iterator.prototype.some()")}} +- {{jsxref("Iterator.prototype.reduce()")}} +- {{jsxref("Array.prototype.filter()")}} diff --git a/files/ja/web/javascript/reference/global_objects/iterator/find/index.md b/files/ja/web/javascript/reference/global_objects/iterator/find/index.md new file mode 100644 index 00000000000000..272bbfc5a7f853 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/iterator/find/index.md @@ -0,0 +1,81 @@ +--- +title: Iterator.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Iterator/find +l10n: + sourceCommit: a71768c124d1bb2dceef873c0bda266e9f714e4c +--- + +{{JSRef}} + +**`find()`** は {{jsxref("Iterator")}} インスタンスのメソッドで、 {{jsxref("Array.prototype.find()")}} に似ています。イテレーターが生成する要素のうち、指定された試験関数を満たす最初のものを返します。試験関数を満たす値がない場合は、 {{jsxref("undefined")}} を返します。 + +## 構文 + +```js-nolint +find(callbackFn) +``` + +### 引数 + +- `callbackFn` + - : このイテレーターが生成するすべての要素に対して実行する関数です。[真値](/ja/docs/Glossary/Truthy)を返すと、一致する要素が見つかったことを示し、[偽値](/ja/docs/Glossary/Falsy)はそ腕はないことを示します。この関数は、以下の引数とともに呼び出されます。 + - `element` + - : 処理中の現在の要素です。 + - `index` + - : 処理中の現在の要素のインデックスです。 + +### 返値 + +イテレーターが生成する要素のうち、指定された試験関数を満たす最初のものです。試験関数を満たす値がない場合は、 {{jsxref("undefined")}} を返します。 + +## 解説 + +`find()` はイテレーターを反復処理し、各要素に対して一度ずつ `callbackFn` 関数を呼び出します。 コールバック関数が真値を返した場合、その要素をただちに返します。 そうでない場合は、イテレーターの終わりまで反復処理を続け、`undefined` を返します。 `find()` が要素を返した場合、その元となるイテレーターは `return()` メソッドを呼んで閉じられます。 + +イテレーターヘルパーの主な利点は、配列メソッドよりも「遅延的」であるということです。つまり、要求されたときにのみ次の値を生成するという意味です。これにより、不必要なコンピューター処理を避けることができ、また、無限イテレーターでも使用することができます。無限イテレーターでは、 `find()` は最初の該当要素が見つかった時点でそれを返します。 `callbackFn` が常に偽値を返す場合、このメソッドは終了しません。 + +## 例 + +### find() の使用 + +```js +function* fibonacci() { + let current = 1; + let next = 1; + while (true) { + yield current; + [current, next] = [next, current + next]; + } +} + +const isEven = (x) => x % 2 === 0; +console.log(fibonacci().find(isEven)); // 2 + +const isNegative = (x) => x < 0; +console.log(fibonacci().take(10).find(isNegative)); // undefined +console.log(fibonacci().find(isNegative)); // Never completes +``` + +`find()` を呼び出すと、メソッドが途中で返った場合でも、常にその元となるイテレーターが閉じられます。イテレーターが未完了の状態で残されることはありません。 + +```js +const seq = fibonacci(); +console.log(seq.find(isEven)); // 2 +console.log(seq.next()); // { value: undefined, done: true } +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`Iterator.prototype.find` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#iterator-helpers) +- {{jsxref("Iterator")}} +- {{jsxref("Iterator.prototype.every()")}} +- {{jsxref("Iterator.prototype.some()")}} +- {{jsxref("Array.prototype.find()")}} diff --git a/files/ja/web/javascript/reference/global_objects/string/repeat/index.md b/files/ja/web/javascript/reference/global_objects/string/repeat/index.md index baaf83b53fe381..081917ddac6447 100644 --- a/files/ja/web/javascript/reference/global_objects/string/repeat/index.md +++ b/files/ja/web/javascript/reference/global_objects/string/repeat/index.md @@ -40,7 +40,7 @@ repeat(count) "abc".repeat(0); // '' "abc".repeat(1); // 'abc' "abc".repeat(2); // 'abcabc' -"abc".repeat(3.5); // 'abcabcabc' （小数は丸められ、整数の結果が返されます） +"abc".repeat(3.5); // 'abcabcabc' （小数点以下は切り捨てられます） "abc".repeat(1 / 0); // RangeError ({ toString: () => "abc", repeat: String.prototype.repeat }).repeat(2); diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/index.md index 366a82feeeb7de..2a65e8a50c35e0 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/index.md @@ -13,7 +13,7 @@ l10n: ## 解説 -`TypedArray` コンストラクター（よく `%TypedArray%` と表記されます。JavaScript プログラムに公開されるグローバルに対応するものがあるわけではないため、「個別のもの」を表すためです）は、すべての `TypedArray` のサブクラスの共通のスーパークラスとして機能します。`%TypedArray%` はすべての型付き配列のサブクラスに対してユーティリティメソッドの共通インターフェイスを提供する「抽象クラス」であると考えてください。このコンストラクターは直接公開されていません。グローバルプロパティである `TypedArray` プロパティは存在しません。`オブジェクト.getPrototypeOf(Int8Array)` などを通してのみアクセスすることができます。 +`TypedArray` コンストラクター（よく `%TypedArray%` と表記されます。JavaScript プログラムに公開されるグローバルに対応するものがあるわけではないため、「個別のもの」を表すためです）は、すべての `TypedArray` のサブクラスの共通のスーパークラスとして機能します。`%TypedArray%` はすべての型付き配列のサブクラスに対してユーティリティメソッドの共通インターフェイスを提供する「抽象クラス」であると考えてください。このコンストラクターは直接公開されていません。グローバルプロパティである `TypedArray` プロパティは存在しません。`Object.getPrototypeOf(Int8Array)` などを通してのみアクセスすることができます。 `TypedArray` のサブクラス（例えば `Int8Array`）のインスタンスを作成する際、配列バッファーがメモリーに内部作成されるか、コンストラクターの引数に `ArrayBuffer` オブジェクトが指定されると、代わりにその `ArrayBuffer` を使用します。バッファーアドレスはインスタンスの内部プロパティとして保存され、`%TypedArray%.prototype` のすべてのメソッドがその配列バッファーアドレスに基づいて値を設定したり取得したりします。 diff --git a/files/ja/web/javascript/reference/global_objects/typedarray/slice/index.md b/files/ja/web/javascript/reference/global_objects/typedarray/slice/index.md index d0e9cd59eb7039..6a8d6358e5e043 100644 --- a/files/ja/web/javascript/reference/global_objects/typedarray/slice/index.md +++ b/files/ja/web/javascript/reference/global_objects/typedarray/slice/index.md @@ -7,7 +7,7 @@ l10n: {{JSRef}} -**`slice()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列の一部を `start` から `end` （`end` は含まれない）まで選択された新しい型付き配列オブジェクトにコピーして返します。元の型付き配列は変更されません。このメソッドは {{jsxref("Array.prototype.reverse()")}} と同じアルゴリズムです。 +**`slice()`** は {{jsxref("TypedArray")}} インスタンスのメソッドで、型付き配列の一部を `start` から `end` （`end` は含まれない）まで選択された新しい型付き配列オブジェクトにコピーして返します。元の型付き配列は変更されません。このメソッドは {{jsxref("Array.prototype.slice()")}} と同じアルゴリズムです。 {{EmbedInteractiveExample("pages/js/typedarray-slice.html", "shorter")}} diff --git a/files/ja/web/svg/attribute/viewbox/index.md b/files/ja/web/svg/attribute/viewbox/index.md index 2ed06565a58284..4da940911c34fb 100644 --- a/files/ja/web/svg/attribute/viewbox/index.md +++ b/files/ja/web/svg/attribute/viewbox/index.md @@ -2,92 +2,21 @@ title: viewBox slug: Web/SVG/Attribute/viewBox l10n: - sourceCommit: de098c5e3faf569b461cd8d91a68c7080e42fe9f + sourceCommit: bea339d321513fc6d66d95c8f0305b9387fa57bb --- {{SVGRef}} -**`viewBox`** 属性は、 SVG ビューポートのユーザースペースの位置と大きさを定義します。 +**`viewBox`** 属性は、 SVG ビューポートのユーザー空間の位置と大きさを定義します。 -`viewBox` 属性の値は、`min-x`、`min-y`、`width`、`height` の 4 つの数値のリストです。`min-x` と `min-y` はビューポートの左上の座標を表します。 `width` と `height` の数字は寸法を表します。これらの数値は空白やカンマで区切られ、関連する SVG 要素に設定されたビューポートの境界に割り当てられたユーザー空間の矩形を指定します（[ブラウザービューポート](/ja/docs/Glossary/Viewport)ではありません）。 +`viewBox` 属性の値は、`min-x`、`min-y`、`width`、`height` の 4 つの数値がホワイトスペースまたはカンマで区切られたリストです。 `min-x` と `min-y` は `viewBox` が持つ可能性がある最も小さい X および Y 座標（`viewBox` の原点の座標）で、 `width` と `height` は `viewBox` の寸法を表します。結果的に `viewBox` は、ユーザー空間において SVG 要素のビューポートの境界に対応付けられた四角形になります（[ブラウザービューポート](/ja/docs/Glossary/Viewport)ではありません）。 +SVG に `viewBox` 属性（[`preserveAspectRatio`](/ja/docs/Web/SVG/Attribute/preserveAspectRatio) 属性との組み合わせが多い）がある場合、座標変換により、具体的なコンテナー要素に合うように SVG ビューポートが引き伸ばされたり、サイズが変更されたりします。 -この属性は以下の SVG 要素で使用することができます。 +## 要素 -- {{SVGElement("marker")}} -- {{SVGElement("pattern")}} -- {{SVGElement("svg")}} -- {{SVGElement("symbol")}} -- {{SVGElement("view")}} +この属性は以下の節にある SVG 要素で使用することができます。 -## 例 - -```css hidden -html, -body, -svg { - height: 100%; - vertical-align: top; -} -svg:not(:root) { - display: inline-block; -} -``` - -```html - - - - - - - - - - - - - - - - - - - - - - - -``` - -{{EmbedLiveSample("Example", '100%', 200)}} - -この属性の正確な効果は {{ SVGAttr("preserveAspectRatio") }} 属性に影響されます。 - -> **メモ:** `width` または `height` に `0` 以下の値を指定すると、要素の描画が無効になります。 - -## marker +### `` {{SVGElement('marker')}} の場合、 `viewBox` は `` 要素のコンテンツの位置と寸法を定義します。 @@ -129,7 +58,7 @@ svg:not(:root) { -## pattern +### `` {{SVGElement('pattern')}} の場合、 `viewBox` はパターンタイルのコンテンツの位置と寸法を定義します。 @@ -171,7 +100,7 @@ svg:not(:root) { -## svg +### `` {{SVGElement('svg')}} の場合、 `viewBox` は `` 要素のコンテンツの位置と寸法を定義します。 @@ -213,7 +142,7 @@ svg:not(:root) { -## symbol +### `` {{SVGElement('symbol')}} の場合、 `viewBox` は `` 要素のコンテンツの位置と寸法を定義します。 @@ -255,7 +184,7 @@ svg:not(:root) { -## view +### `` {{SVGElement('view')}} の場合、 `viewBox` は `` 要素のコンテンツの位置と寸法を定義します。 @@ -297,6 +226,45 @@ svg:not(:root) { +## 例 + +```css hidden +html, +body, +svg { + height: 100%; + vertical-align: top; +} +svg:not(:root) { + display: inline-block; +} +``` + +下記おｎコードスニペットには、 3 つの {{SVGElement("svg")}} がありますが、それぞれ `viewBox` 属性の値が異なっており、子要素である {{SVGElement("rect")}} と {{SVGElement("circle")}} は同一ですが、まったく異なる結果を生成します。 `` のサイズは相対単位を使用して定義されているため、 `viewBox` の値に関わらず、生成される四角形の見た目のサイズは変わりません。 `` の半径の長さである {{SVGAttr("r")}} 属性は、いずれの場合も同じですが、このユーザー単位の値は、 `viewBox` で定義されたサイズに対して解決されるため、それぞれ異なる結果が生成されます。 + +```html + + + + + + + + + + + + + + +``` + +{{EmbedLiveSample("Examples", '100%', 200)}} + +`r="4"` のユーザー単位は `viewBox` の大きさに対して解決されるため、著しく異なる大きさの円を生成します。 `viewBox` 属性の正確な効果は {{ SVGAttr("preserveAspectRatio") }} 属性に影響されます。 + +> **メモ:** `width` または `height` に `0` 以下の値を指定すると、要素の描画が無効になります。 + ## 仕様書 {{Specifications}} diff --git a/files/ja/web/svg/element/animate/index.md b/files/ja/web/svg/element/animate/index.md index 4b4520e655d556..6a494ee375261c 100644 --- a/files/ja/web/svg/element/animate/index.md +++ b/files/ja/web/svg/element/animate/index.md @@ -1,11 +1,15 @@ --- title: slug: Web/SVG/Element/animate +l10n: + sourceCommit: da99ca19ae62059f81dbee3f7b4919de784f3510 --- {{SVGRef}} -SVG の **``** 要素は、時間の経過に応じて要素の属性を変化させる方法を提供します。 +**``** は [SVG](/ja/docs/Web/SVG) の要素で、時間の経過に応じて要素の属性を変化させる方法を提供します。 + +## 例 ```css hidden html, @@ -29,44 +33,22 @@ svg { ``` -{{EmbedLiveSample('Exemple', 150, '100%')}} - -## 属性 - -### アニメーション属性 - -- [アニメーションタイミング属性](/ja/docs/Web/SVG/Attribute#Animation_Timing_Attributes) - - : {{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}} -- [アニメーション値属性](/ja/docs/Web/SVG/Attribute#Animation_Value_Attributes) - - : {{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}} -- [その他のアニメーション属性](/ja/docs/Web/SVG/Attribute#Animation_Attributes) - - : 特に重要なもの: {{SVGAttr("attributeName")}}, {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}} -- [アニメーションイベント属性](/ja/docs/Web/SVG/Attribute/Events#アニメーションイベント属性) - - : 特に重要なもの: {{SVGAttr("onbegin")}}, {{SVGAttr("onend")}}, {{SVGAttr("onrepeat")}} - -### グローバル属性 - -- [コア属性](/ja/docs/Web/SVG/Attribute/Core) - - : 特に重要なもの: {{SVGAttr('id')}} -- [スタイル属性](/ja/docs/Web/SVG/Attribute/Styling) - - : {{SVGAttr('class')}}, {{SVGAttr('style')}} -- イベント属性 - - : [グローバルイベント属性](/ja/docs/Web/SVG/Attribute/Events#グローバルイベント属性), [文書要素イベント属性](/ja/docs/Web/SVG/Attribute/Events#文書要素イベント属性) +{{EmbedLiveSample('Example', 150, '100%')}} -## 使用上の注意 +## 使用上のメモ この要素は {{domxref("SVGAnimateElement")}} インターフェイスを実装しています。 -## アクセシビリティの考慮事項 +## アクセシビリティの考慮 点滅や発光のアニメーションは、注意欠陥障碍 (ADHD) のような認知障碍を持つ人にとって問題になることがあります。加えて、このような動きは、前庭障害、てんかん、偏頭痛、光感受性障害の引き金になる可能性があります。 -アニメーションを一時停止したり無効にしたりする仕組みを提供したり、 [Reduced Motion Media Query](/ja/docs/Web/CSS/@media/prefers-reduced-motion) を使用して、アニメーションなしの利用を設定したユーザーに適した利用方法を作成するようにすることを検討してください。 +アニメーションを一時停止したり無効にしたりする仕組みを提供したり、[動き軽減メディアクエリー](/ja/docs/Web/CSS/@media/prefers-reduced-motion)または同様の[ユーザーエージェントクライアントヒント](/ja/docs/Web/HTTP/Client_hints#user-agent_client_hints)である {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}} を使用して、アニメーションなしの利用を設定したユーザーに適した利用方法を作成するようにすることを検討してください。 -- [Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity) +- [Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/) - [An Introduction to the Reduced Motion Media Query | CSS-Tricks](https://css-tricks.com/introduction-reduced-motion-media-query/) - [Responsive Design for Motion | WebKit](https://webkit.org/blog/7551/responsive-design-for-motion/) -- [MDN Understanding WCAG, Guideline 2.2 explanations](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content) +- [MDN Understanding WCAG, Guideline 2.2 explanations](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.2_%e2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content) - [Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html) ## 仕様書 diff --git a/files/ja/web/svg/element/text/index.md b/files/ja/web/svg/element/text/index.md index 18b341c7a89c52..0f237cb907666a 100644 --- a/files/ja/web/svg/element/text/index.md +++ b/files/ja/web/svg/element/text/index.md @@ -9,10 +9,10 @@ l10n: SVG の **``** 要素は、テキストからなるグラフィク要素を定義します。`` には、他の SVG グラフィク要素と同じように、グラデーション、パターン、クリッピングパス、マスク、フィルターなどを適用することができます。 -SVG 内でテキストが `` 要素内以外で組み込まれた場合、レンダリングされません。これは既定でで隠されるのとは違い、{{SVGAttr('display')}} を変更してもテキストは表示されません。 +SVG 内でテキストが `` 要素内以外で組み込まれた場合、レンダリングされません。これは非表示になるのが既定だというわけではなく、{{SVGAttr('display')}} を変更してもテキストは表示されません。 > [!NOTE] -> 既定では `` 要素は折り返されません。これを実現するには {{CSSXRef("white-space")}} でスタイル設定する必要があります。CSS プロパティを使用する必要があります。 +> 既定では `` 要素は折り返されません。これを実現するには CSS の {{CSSXRef("white-space")}} プロパティでスタイル設定する必要があります。 ## 例 diff --git a/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.md b/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.md index d509b7ce23e73d..8a75297fb6855d 100644 --- a/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.md +++ b/files/ru/web/javascript/reference/global_objects/number/issafeinteger/index.md @@ -1,46 +1,50 @@ --- title: Number.isSafeInteger() slug: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger +l10n: + sourceCommit: 70f09675ddcfc75a3bb66d2dce4cf82738948a37 --- {{JSRef}} -Метод **`Number.isSafeInteger()`** определяет, является ли переданное значение _безопасным целым числом_. +Статический метод **`Number.isSafeInteger()`** определяет, является ли переданное значение _безопасным целым числом_. {{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}} -Безопасное целое число это такое число, которое: - -- может быть точно представлено числом IEEE-754 двойной точности и -- чьё представление IEEE-754 не может быть результатом округления любого другого целого числа, соответствующего представлению IEEE-754. - -Например, число `253 - 1` является безопасным целым числом: оно может быть представлено точно и никакое другое целое число не округляется к нему ни в каком режиме округления IEEE-754. В противовес ему, число `253` _не является_ безопасным целым числом: оно может быть точно представлено в IEEE-754, но целое число `253 + 1` не может быть напрямую представлено в IEEE-754 и округляется к числу `253` в режимах округления к ближайшему и к нулю. Безопасные целые числа состоят из всех целых чисел в диапазоне от `-(253 - 1)` до `253 - 1` включительно (± `9007199254740991` или ± 9,007,199,254,740,991). - -Обработка значений, больших или меньших чем \~9 квадриллионов, с высокой точностью требует использования [библиотеки, умеющей работать с длиной арифметикой](https://ru.wikipedia.org/wiki/%D0%94%D0%BB%D0%B8%D0%BD%D0%BD%D0%B0%D1%8F_%D0%B0%D1%80%D0%B8%D1%84%D0%BC%D0%B5%D1%82%D0%B8%D0%BA%D0%B0). Ознакомьтесь с [Что Каждому Программисту Необходимо Знать об Арифметике с Вещественными числами](http://floating-point-gui.de/) для получения дополнительной информации о представлении чисел, с плавающей запятой. - -Для больших целочисленных значений, рассмотрите возможность использования типа {{jsxref("BigInt")}}. - ## Синтаксис -``` +```js-nolint Number.isSafeInteger(testValue) ``` ### Параметры - `testValue` - - : Значение, проверяемое на целочисленную «безопасность». + - : Проверяемое значение. ### Возвращаемое значение -{{jsxref("Boolean")}} значение, сообщающее о том, является ли переданное значение безопасным целочисленным числом или же нет. +Логическое значение `true` если переданное значение является безопасным целым числом, в противном случае `false`. + +## Описание + +К безопасным целым числам относятся все целые числа от -(253 – 1) до 253 – 1 включительно (±9 007 199 254 740 991). Безопасное целое число — это целое число, которое: + +- может быть точно представлено как число двойной точности по стандарту IEEE-754, и +- это представление не может быть результатом округления любого другого целого числа для соответствия представлению по стандарту IEEE-754. + +Например, 253 - 1 является безопасным целым числом: оно может быть точно представлено, и никакое другое целое число не округляется до него ни при каком режиме округления IEEE-754. А вот 253 _не_ является безопасным целым числом: оно может быть точно представлено в IEEE-754, но целое число 253 + 1 не может быть представлено в IEEE-754, а вместо этого округляется до 253 при округлении до ближайшего и до нуля. + +Обработка значений больше или меньше \~9 квадриллионов с полной точностью требует использования библиотек, поддерживающих [арифметику произвольной точности](https://ru.wikipedia.org/wiki/Длинная_арифметика). Дополнительную информацию о представлениях чисел с плавающей точкой смотрите в [The Floating-Point Guide](https://floating-point-gui.de/) (англ.). + +Для бо́льших целых чисел рассмотрите возможность использования типа {{jsxref("BigInt")}}. ## Примеры ```js Number.isSafeInteger(3); // true -Number.isSafeInteger(Math.pow(2, 53)); // false -Number.isSafeInteger(Math.pow(2, 53) - 1); // true +Number.isSafeInteger(2 ** 53); // false +Number.isSafeInteger(2 ** 53 - 1); // true Number.isSafeInteger(NaN); // false Number.isSafeInteger(Infinity); // false Number.isSafeInteger("3"); // false @@ -48,18 +52,6 @@ Number.isSafeInteger(3.1); // false Number.isSafeInteger(3.0); // true ``` -## Полифил - -```js -Number.isSafeInteger = - Number.isSafeInteger || - function (value) { - return ( - Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER - ); - }; -``` - ## Спецификации {{Specifications}} @@ -70,7 +62,8 @@ Number.isSafeInteger = ## Смотрите также -- Объект {{jsxref("Number")}}, которому принадлежит этот метод. +- [Полифил `Number.isSafeInteger` в `core-js`](https://github.com/zloirock/core-js#ecmascript-number) +- {{jsxref("Number")}} - {{jsxref("Number.MIN_SAFE_INTEGER")}} - {{jsxref("Number.MAX_SAFE_INTEGER")}} - {{jsxref("BigInt")}} diff --git a/files/zh-cn/games/introduction_to_html5_game_development/index.md b/files/zh-cn/games/introduction_to_html5_game_development/index.md index eeea9215fd14f3..43cf4883e39d74 100644 --- a/files/zh-cn/games/introduction_to_html5_game_development/index.md +++ b/files/zh-cn/games/introduction_to_html5_game_development/index.md @@ -17,45 +17,45 @@ slug: Games/Introduction_to_HTML5_Game_Development ## 网络技术 -| **Function** | **Technology** | -| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Audio** | [Web Audio API](/zh-CN/docs/Web_Audio_API) | -| **Graphics** | [WebGL](/zh-CN/docs/WebGL) ([OpenGL ES](http://www.khronos.org/opengles/) 2.0) | -| **Input** | [Touch events](/zh-CN/docs/DOM/Touch_events), [Gamepad API](/zh-CN/docs/API/Gamepad/Using_Gamepad_API), device sensors, [WebRTC](/zh-CN/docs/WebRTC), [Full Screen API](/zh-CN/docs/DOM/Using_fullscreen_mode), [Pointer Lock API](/zh-CN/docs/WebAPI/Pointer_Lock) | -| **Language** | [JavaScript](/zh-CN/docs/JavaScript) (or C/C++ using [Emscripten](https://github.com/kripken/emscripten/wiki) to compile to JavaScript) | -| **Networking** | [WebRTC](/zh-CN/docs/WebRTC) and/or [WebSockets](/zh-CN/docs/WebSockets) | -| **Storage** | [IndexedDB](/zh-CN/docs/IndexedDB) or the "cloud" | -| **Web** | [HTML](/zh-CN/docs/HTML), [CSS](/zh-CN/docs/CSS), [SVG](/zh-CN/docs/SVG), [Social API](/zh-CN/docs/Social_API) (and much more!) | - -- [Full Screen API](/zh-CN/docs/DOM/Using_fullscreen_mode) +| **Function** | **Technology** | +| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Audio** | [Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API) | +| **Graphics** | [WebGL](/zh-CN/docs/Web/API/WebGL_API) ([OpenGL ES](https://www.khronos.org/opengles/) 2.0) | +| **Input** | [Touch events](/zh-CN/docs/Web/API/Touch_events), [Gamepad API](/zh-CN/docs/Web/API/Gamepad_API/Using_the_Gamepad_API), device sensors, [WebRTC](/zh-CN/docs/Web/API/WebRTC_API), [Full Screen API](/zh-CN/docs/Web/API/Fullscreen_API), [Pointer Lock API](/zh-CN/docs/Web/API/Pointer_Lock_API) | +| **Language** | [JavaScript](/zh-CN/docs/Web/JavaScript) (or C/C++ using [Emscripten](https://github.com/kripken/emscripten/wiki) to compile to JavaScript) | +| **Networking** | [WebRTC](/zh-CN/docs/Web/API/WebRTC_API) and/or [WebSockets](/zh-CN/docs/Web/API/WebSockets_API) | +| **Storage** | [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) or the "cloud" | +| **Web** | [HTML](/zh-CN/docs/Web/HTML), [CSS](/zh-CN/docs/Web/CSS), [SVG](/zh-CN/docs/Web/SVG), [Social API](/zh-CN/docs/Social_API) (and much more!) | + +- [Full Screen API](/zh-CN/docs/Web/API/Fullscreen_API) - : 全屏游戏。 -- [Gamepad API](/zh-CN/docs/API/Gamepad/Using_Gamepad_API) +- [Gamepad API](/zh-CN/docs/Web/API/Gamepad_API/Using_the_Gamepad_API) - : 使用游戏手柄或其他游戏控制器。 -- [HTML](/zh-CN/docs/HTML) and [CSS](/zh-CN/docs/CSS) +- [HTML](/zh-CN/docs/Web/HTML) and [CSS](/zh-CN/docs/Web/CSS) - : 构建，样式和布局游戏的用户界面。 -- [HTML audio](/zh-CN/docs/HTML/Element/audio) +- [HTML audio](/zh-CN/docs/Web/HTML/Element/audio) - : 轻松播放简单的音效和音乐。 -- [IndexedDB](/zh-CN/docs/IndexedDB) +- [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) - : 将用户数据存储在他们自己的计算机或设备上。 -- [JavaScript](/zh-CN/docs/JavaScript) +- [JavaScript](/zh-CN/docs/Web/JavaScript) - : 快速的网页编程语言为你的游戏编写代码。轻松移植你现有的游戏 [Emscripten](https://github.com/kripken/emscripten/wiki) 或 [Asm.js](http://asmjs.org/spec/latest/)。 -- [Pointer Lock API](/zh-CN/docs/WebAPI/Pointer_Lock) +- [Pointer Lock API](/zh-CN/docs/Web/API/Pointer_Lock_API) - : 在游戏界面中锁定鼠标或其他指针设备。 -- [SVG](/zh-CN/docs/SVG) (Scalable Vector Graphics) +- [SVG](/zh-CN/docs/Web/SVG) (Scalable Vector Graphics) - : 构建能够顺利扩展的矢量图形，无论用户显示器的大小或分辨率如何。 -- [Typed Arrays](/zh-CN/docs/JavaScript/Typed_arrays) +- [Typed Arrays](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays) - : 从 JavaScript 中访问原始二进制数据; 操纵 GL 纹理，游戏数据或其他任何东西。 -- [Web Audio API](/zh-CN/docs/Web_Audio_API) +- [Web Audio API](/zh-CN/docs/Web/API/Web_Audio_API) - : 实时控制音频的播放，合成和操纵。 -- [WebGL](/zh-CN/docs/WebGL) - - : 创建高性能，硬件加速的 3D（和 2D）图形。[OpenGL ES](http://www.khronos.org/opengles/) 2.0. -- [WebRTC](/zh-CN/docs/WebRTC) +- [WebGL](/zh-CN/docs/Web/API/WebGL_API) + - : 创建高性能，硬件加速的 3D（和 2D）图形。[OpenGL ES](https://www.khronos.org/opengles/) 2.0. +- [WebRTC](/zh-CN/docs/Web/API/WebRTC_API) - : 实时通讯控制音频和视频数据，包括电话会议，并在两个用户之间来回传送其他应用数据，如聊天。 -- [WebSockets](/zh-CN/docs/WebSockets) +- [WebSockets](/zh-CN/docs/Web/API/WebSockets_API) - : 将你的应用程序或站点连接到一个服务器以实时传输数据。适合多人游戏动作，聊天服务等。 -- [Web Workers](/zh-CN/docs/DOM/Using_web_workers) +- [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) - : 生成后台线程为多核处理器运行自己的 JavaScript 代码。 -- [XMLHttpRequest](/zh-CN/docs/DOM/XMLHttpRequest) and [File API](/zh-CN/docs/DOM/File_API) +- [XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest) and [File API](/zh-CN/docs/DOM/File_API) - : 从一个 Web 服务器发送和接收任何你想要的数据，如下载新的游戏级别和艺术品，以便来回传送非实时游戏状态信息。 diff --git a/files/zh-cn/games/publishing_games/game_distribution/index.md b/files/zh-cn/games/publishing_games/game_distribution/index.md index f95086c47a7353..6eb9cc4044e9a9 100644 --- a/files/zh-cn/games/publishing_games/game_distribution/index.md +++ b/files/zh-cn/games/publishing_games/game_distribution/index.md @@ -5,7 +5,7 @@ slug: Games/Publishing_games/Game_distribution {{GamesSidebar}} -你已经跟着一两个[教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript)做了一个 HTML5 游戏了——真棒 ! 这篇文章介绍了一些可以让你投放你的游戏的方式。包括自己建立网站，在公开的应用市场上线，或是发布到 Google Play 或 IOS 的 App Store。 +你已经跟着一两个[教程](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)做了一个 HTML5 游戏了——真棒 ! 这篇文章介绍了一些可以让你投放你的游戏的方式。包括自己建立网站，在公开的应用市场上线，或是发布到 Google Play 或 IOS 的 App Store。 ## HTML5 相较于传统的好处 @@ -15,7 +15,7 @@ slug: Games/Publishing_games/Game_distribution HTML5 本身是多平台的，所以你只需要写一种代码就可以适配不同的平台。从小型的智能手机和平板电脑，到笔记本电脑和台式电脑，再到智能电视，智能手表甚至是智能冰箱（如果它内置现代化浏览器的话）。 -你并不需要数个开发小组去编写不同平台的代码，你们只需要维护这一种基础代码。你可以花更多时间去[推广游戏](/zh-CN/docs/Games/Techniques/Publishing_games/Game_promotion)和促进[游戏收益化](/zh-CN/docs/Games/Techniques/Publishing_games/Game_monetization)。 +你并不需要数个开发小组去编写不同平台的代码，你们只需要维护这一种基础代码。你可以花更多时间去[推广游戏](/zh-CN/docs/Games/Publishing_games/Game_promotion)和促进[游戏收益化](/zh-CN/docs/Games/Publishing_games/Game_monetization)。 ### 即时更新 @@ -41,7 +41,7 @@ HTML5 本身是多平台的，所以你只需要写一种代码就可以适配 - 发行商代理 - 上架商店 -记住你的游戏名应该要足够独特，这样可以在发布之后迅速地[推广](/zh-CN/docs/Games/Techniques/Publishing_games/Game_promotion), 但也要同样朗朗上口，这样人们才不会忘记。 +记住你的游戏名应该要足够独特，这样可以在发布之后迅速地[推广](/zh-CN/docs/Games/Publishing_games/Game_promotion), 但也要同样朗朗上口，这样人们才不会忘记。 ### 自运营 @@ -94,7 +94,7 @@ HTML5 本身是多平台的，所以你只需要写一种代码就可以适配 ## 打包游戏 -网页是 HTML5 游戏的首选也是最好的选择，但如果你想接触到更广泛的受众并在封闭的生态系统中发行你的游戏，你仍然可以通过打包它来做到这一点。好在你不需要几个独立的团队在不同的平台上致力于同一款游戏——你可以一次性构建它，并使用像 [Phonegap](/zh-CN/docs/) 或 [CocoonIO](/zh-CN/docs/) 这样的工具为本地商店打包游戏。生成的包通常非常可靠，但是你仍然应该测试它们，并注意要修复的小问题或 bug。 +网页是 HTML5 游戏的首选也是最好的选择，但如果你想接触到更广泛的受众并在封闭的生态系统中发行你的游戏，你仍然可以通过打包它来做到这一点。好在你不需要几个独立的团队在不同的平台上致力于同一款游戏——你可以一次性构建它，并使用像 [Phonegap](/zh-CN/docs/Web) 或 [CocoonIO](/zh-CN/docs/Web) 这样的工具为本地商店打包游戏。生成的包通常非常可靠，但是你仍然应该测试它们，并注意要修复的小问题或 bug。 ### 实用工具 diff --git a/files/zh-cn/games/publishing_games/game_monetization/index.md b/files/zh-cn/games/publishing_games/game_monetization/index.md index cca163755d6bed..b734ac8090045d 100644 --- a/files/zh-cn/games/publishing_games/game_monetization/index.md +++ b/files/zh-cn/games/publishing_games/game_monetization/index.md @@ -5,7 +5,7 @@ slug: Games/Publishing_games/Game_monetization {{GamesSidebar}} -当你花时间创造一个游戏的时候，从[发布](/zh-CN/docs/Games/Techniques/Publishing_games/Game_distribution)和[促销](/zh-CN/docs/Games/Techniques/Publishing_games/Game_promotion)中赚钱是你应该考虑的事。如果你正做出大量努力去成为一个能够以此为生的独立游戏开发者，接下去，看看你有哪些选择。技术手段已经足够成熟; 接下来只是选择正确的方法。 +当你花时间创造一个游戏的时候，从[发布](/zh-CN/docs/Games/Publishing_games/Game_distribution)和[促销](/zh-CN/docs/Games/Publishing_games/Game_promotion)中赚钱是你应该考虑的事。如果你正做出大量努力去成为一个能够以此为生的独立游戏开发者，接下去，看看你有哪些选择。技术手段已经足够成熟; 接下来只是选择正确的方法。 ## 付费游戏 @@ -17,7 +17,7 @@ slug: Games/Publishing_games/Game_monetization 你可以提供一款带有应用内购买功能（IAP）的免费游戏，而不是让人们预先为你的游戏付费。在这种情况下，玩家不需要花一分钱就可以获得游戏——将游戏交给玩家，但要提供游戏内的货币、奖金或福利。具体的例子可以包括奖金水平，更好的武器或咒语，或补充所需的能量发挥。设计一个好的 IAP 系统本身就是一门艺术。 -记住，你需要下载数千次游戏才能使 IAPs 有效——只有一小部分玩家会真正为 IAPs 付费。多小？情况各不相同，但大约每千人中就有一个人处于平均水平。玩你的游戏的人越多，别人就越有可能付钱，所以你的收入很大程度取决于你的[推广](/zh-CN/docs/Games/Techniques/Publishing_games/Game_promotion)方式。 +记住，你需要下载数千次游戏才能使 IAPs 有效——只有一小部分玩家会真正为 IAPs 付费。多小？情况各不相同，但大约每千人中就有一个人处于平均水平。玩你的游戏的人越多，别人就越有可能付钱，所以你的收入很大程度取决于你的[推广](/zh-CN/docs/Games/Publishing_games/Game_promotion)方式。 ### 免费增值模式 @@ -29,7 +29,7 @@ slug: Games/Publishing_games/Game_monetization ## 推广 -除了积极销售游戏以外，你也可以尝试被动销售 — 投放广告和开展相关活动或许有益于[推广](/zh-CN/docs/Games/Techniques/Publishing_games/Game_promotion)你的游戏，但你的游戏必须让人上瘾，这并不像听起来那么容易。你仍然需要计划好，在某种程度上，你也需要一些运气。如果你的游戏像病毒一样传播开来，人们开始分享它，你就能从广告中获得大量的下载和收益。 +除了积极销售游戏以外，你也可以尝试被动销售 — 投放广告和开展相关活动或许有益于[推广](/zh-CN/docs/Games/Publishing_games/Game_promotion)你的游戏，但你的游戏必须让人上瘾，这并不像听起来那么容易。你仍然需要计划好，在某种程度上，你也需要一些运气。如果你的游戏像病毒一样传播开来，人们开始分享它，你就能从广告中获得大量的下载和收益。 有许多公司提供广告系统——你注册后，允许他们展示广告，以换取一定比例的利润。谷歌 AdSense 被认为是最有效的一个，但它不是为游戏而设计的，使用它来达到这个目的是一个非常糟糕的做法。不要冒着让你的账户被封禁，资产被冻结的风险，游戏开发者们更青睐门户网站，如[LeadBolt](https://www.leadbolt.com/)。他们提供了易于实现的系统，以在你的游戏显示广告并与你分享收益。 @@ -75,7 +75,7 @@ slug: Games/Publishing_games/Game_monetization ### 撰写文章和教程 -你可以写一些关于你的游戏的文章，甚至可以从中获得报酬。可以同时取得游戏[推广](/zh-CN/docs/Games/Techniques/Publishing_games/Game_promotion)和收益化的双赢，如果你不滥用它与太多的广告，读者将享受阅读他们以及学习一两个东西。如果你专注于先分享知识，并将游戏作为例子来使用，这应该是可以的。浏览[Tuts+ Game Development](http://gamedevelopment.tutsplus.com/) 或相似的网站来找寻协作机会 +你可以写一些关于你的游戏的文章，甚至可以从中获得报酬。可以同时取得游戏[推广](/zh-CN/docs/Games/Publishing_games/Game_promotion)和收益化的双赢，如果你不滥用它与太多的广告，读者将享受阅读他们以及学习一两个东西。如果你专注于先分享知识，并将游戏作为例子来使用，这应该是可以的。浏览[Tuts+ Game Development](http://gamedevelopment.tutsplus.com/) 或相似的网站来找寻协作机会 ### 周边商品 @@ -83,7 +83,7 @@ slug: Games/Publishing_games/Game_monetization ### 捐助 -当其他方法都失败时，你可以尝试在你的游戏页面上放置一个捐赠按钮并寻求社区的支持。有时候它是有效的，但前提是玩家了解你并觉得它能够帮助你。这就是为什么小心管理你的社区是如此重要。这在[js13kGames](http://js13kgames.com/)比赛中很管用 — 每个参与者都得到了一件免费的 t 恤，有些人甚至还退了一些钱，以帮助它在未来几年继续运行下去。 +当其他方法都失败时，你可以尝试在你的游戏页面上放置一个捐赠按钮并寻求社区的支持。有时候它是有效的，但前提是玩家了解你并觉得它能够帮助你。这就是为什么小心管理你的社区是如此重要。这在[js13kGames](https://js13kgames.com/)比赛中很管用 — 每个参与者都得到了一件免费的 t 恤，有些人甚至还退了一些钱，以帮助它在未来几年继续运行下去。 ## 小结 diff --git a/files/zh-cn/games/publishing_games/game_promotion/index.md b/files/zh-cn/games/publishing_games/game_promotion/index.md index 167687e94591e7..f81ecdb46feeb6 100644 --- a/files/zh-cn/games/publishing_games/game_promotion/index.md +++ b/files/zh-cn/games/publishing_games/game_promotion/index.md @@ -5,7 +5,7 @@ slug: Games/Publishing_games/Game_promotion {{GamesSidebar}} -开发与发行你的游戏并不是全部.。你应该让大家知道你有个大家会喜欢玩的游戏。这儿有很多方法去推广你的游戏——大部分方法是免费的，所以即使即使你正努力以一名零预算的独立开发者的身份谋生，你也可以让人们知道你的新游戏.。推广游戏也对之后的[游戏收益化](/zh-CN/docs/Games/Techniques/Publishing_games/Game_monetization)大有裨益，所以正确地推广游戏是很重要的。 +开发与发行你的游戏并不是全部.。你应该让大家知道你有个大家会喜欢玩的游戏。这儿有很多方法去推广你的游戏——大部分方法是免费的，所以即使即使你正努力以一名零预算的独立开发者的身份谋生，你也可以让人们知道你的新游戏.。推广游戏也对之后的[游戏收益化](/zh-CN/docs/Games/Publishing_games/Game_monetization)大有裨益，所以正确地推广游戏是很重要的。 ## 竞赛 @@ -28,7 +28,7 @@ slug: Games/Publishing_games/Game_promotion ## 游戏门户网站 -设立门户网站主要与[收益化](/zh-CN/docs/Games/Techniques/Publishing_games/Game_monetization)挂钩，但是如果你不打算[售卖许可](/zh-CN/docs/Games/Techniques/Publishing_games/Game_monetization#Licensing)来让人们可以购买你的游戏而是打算[发布广告](/zh-CN/docs/Games/Techniques/Publishing_games/Game_monetization#Advertisements) , 在免费的门户网站上推广游戏会更有效。你可以在公共门户网站，比如[HTML5Games.com](http://html5games.com/)发布游戏，比起传统的游戏发行平台，它更像一个宣传平台。 +设立门户网站主要与[收益化](/zh-CN/docs/Games/Publishing_games/Game_monetization)挂钩，但是如果你不打算[售卖许可](/zh-CN/docs/Games/Publishing_games/Game_monetization#licensing)来让人们可以购买你的游戏而是打算[发布广告](/zh-CN/docs/Games/Publishing_games/Game_monetization#advertisements) , 在免费的门户网站上推广游戏会更有效。你可以在公共门户网站，比如[HTML5Games.com](http://html5games.com/)发布游戏，比起传统的游戏发行平台，它更像一个宣传平台。 免费的门户网站带来了流量，但是，只有最好的广告才足够受欢迎，能够从发布的广告中获得一些业绩。另一方面，如果你没有预算和有限的时间，门户网站也是一个完美的工具，它可以让更多人看到你的游戏 @@ -44,7 +44,7 @@ slug: Games/Publishing_games/Game_promotion 像是[Tuts+ Game Development](http://gamedevelopment.tutsplus.com/) 这样的网站可能会更让人开心——他们为文章付稿费。但并不是所有的主旨都会被接受。当你在写教程的时候，记住要把重点放在给读者提供一些有价值的东西上。他们想要学习一些东西——提供你的专业知识并将你的游戏作为案例研究。专注于一个方面，并试图解释它的全部和细节。如果人们有任何问题，请记得在评论中跟进讨论。 -如果你联系的门户网站因你未写过教程而未采纳你的教程，可以在[自己的博客](/zh-CN/docs/Games/Publishing_games/Game_promotion#Website_and_blog)先发布教程，这是锻炼你的写作技巧的最简单的方式。 +如果你联系的门户网站因你未写过教程而未采纳你的教程，可以在[自己的博客](#Website_and_blog)先发布教程，这是锻炼你的写作技巧的最简单的方式。 ## YouTuber 视频主 (YouTubers) @@ -70,10 +70,10 @@ slug: Games/Publishing_games/Game_promotion ## 培养社区 -你可以帮助社区成长，同时推广你自己和你的游戏。发布[每周时事通讯](http://gamedevjsweekly.com/)，组织[在线竞赛](http://js13kgames.com/)或者[线下聚会](http://gamedevjs.com/)，这些都能让别人知道你对自己的工作充满激情，他们可以依靠你。当你需要帮助的时候，他们会在你身边 +你可以帮助社区成长，同时推广你自己和你的游戏。发布[每周时事通讯](http://gamedevjsweekly.com/)，组织[在线竞赛](https://js13kgames.com/)或者[线下聚会](http://gamedevjs.com/)，这些都能让别人知道你对自己的工作充满激情，他们可以依靠你。当你需要帮助的时候，他们会在你身边 ## 总结 任何推广你的游戏的方法都是好的。你有很多选择，其中大部分都是免费的，所以关键在于你的热情和可用时间。有时候你不得不花更多的时间去推广一款游戏，而不是真正去开发它。记住，如果没有人知道世界上最好的游戏的存在，那么拥有它是没有任何意义的。 -现在让我们进入[游戏收益化](/zh-CN/docs/Games/Techniques/Publishing_games/Game_monetization)部分，然后挣口饭吃吧。 +现在让我们进入[游戏收益化](/zh-CN/docs/Games/Publishing_games/Game_monetization)部分，然后挣口饭吃吧。 diff --git a/files/zh-cn/games/publishing_games/index.md b/files/zh-cn/games/publishing_games/index.md index 87b6ba5d6fd91a..8ffb19ef17301b 100644 --- a/files/zh-cn/games/publishing_games/index.md +++ b/files/zh-cn/games/publishing_games/index.md @@ -9,7 +9,7 @@ HTML5 游戏在发布和分发上具有极大的优势--你可以通过网络自 ## 游戏发布 -你按照一个或两个教程（[1](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript)，[2](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser)）制作了一个 HTML5 游戏。[Game distribution](/zh-CN/docs/Games/Publishing_games/Game_distribution)提供了你发布游戏时所需的一切知识。包括如何在线托管游戏，提交游戏到开放的游戏市场，或封闭的游戏市场，如 Google Play，iOS App Store. +你按照一个或两个教程（[1](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)，[2](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser)）制作了一个 HTML5 游戏。[Game distribution](/zh-CN/docs/Games/Publishing_games/Game_distribution)提供了你发布游戏时所需的一切知识。包括如何在线托管游戏，提交游戏到开放的游戏市场，或封闭的游戏市场，如 Google Play，iOS App Store. ## 游戏推广 diff --git a/files/zh-cn/games/techniques/3d_on_the_web/basic_theory/index.md b/files/zh-cn/games/techniques/3d_on_the_web/basic_theory/index.md index b1e2a155fe6047..cce7c1e6b59c35 100644 --- a/files/zh-cn/games/techniques/3d_on_the_web/basic_theory/index.md +++ b/files/zh-cn/games/techniques/3d_on_the_web/basic_theory/index.md @@ -54,7 +54,7 @@ WebGL 使用右手坐标系统 — `x` 轴向右，`y` 轴向上 `z` 轴指向 ![Camera](mdn-games-3d-camera.png) -**投射转换**(projection transformation), 也被称作透视转换 (perspective transformation), 这一步定义摄像机设置，在此过程会设置哪些在摄像机中可见，配置包含视野 (field of view), 宽高比例 (aspect ratio) 和可选的近裁剪和远裁剪参数。阅读 Three.js 文章[摄像机](/zh-CN/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera)了解更多。 +**投射转换**(projection transformation), 也被称作透视转换 (perspective transformation), 这一步定义摄像机设置，在此过程会设置哪些在摄像机中可见，配置包含视野 (field of view), 宽高比例 (aspect ratio) 和可选的近裁剪和远裁剪参数。阅读 Three.js 文章[摄像机](/zh-CN/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#camera)了解更多。 ![Camera settings](mdn-games-3d-camera-settings.png) diff --git a/files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md index 44173d9c2ad17a..8a346db9a9953a 100644 --- a/files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md +++ b/files/zh-cn/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md @@ -16,8 +16,8 @@ slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js - 确保使用的支持 [WebGL](/zh-CN/docs/Web/API/WebGL_API) 的现代浏览器，例如最新版的 Firefox 或 Chrome. - 创建一个目录保存例子。 -- 复制最新的压缩版 [Three.js](http://threejs.org/build/three.min.js) 到你的目录。 -- 用单独的浏览器 tab 打开 [Three.js](http://threejs.org/docs/) 文档 — 对应参考很有用。 +- 复制最新的压缩版 [Three.js](https://threejs.org/build/three.min.js) 到你的目录。 +- 用单独的浏览器 tab 打开 [Three.js](https://threejs.org/docs/) 文档 — 对应参考很有用。 ## HTML 结构 @@ -105,7 +105,7 @@ You should experiment with these values and see how they change what you see in ## Rendering the scene -Everything is ready, but we still can't see anything. Although we set the renderer up, we still have to actually render everything. Our `render()` function will do this job, with a little help from [`requestAnimationFrame()`](/zh-CN/docs/Web/API/window/requestAnimationFrame), which causes the scene to be re-rendered constantly on every frame: +Everything is ready, but we still can't see anything. Although we set the renderer up, we still have to actually render everything. Our `render()` function will do this job, with a little help from [`requestAnimationFrame()`](/zh-CN/docs/Web/API/Window/requestAnimationFrame), which causes the scene to be re-rendered constantly on every frame: ```js function render() { diff --git a/files/zh-cn/games/techniques/3d_on_the_web/glsl_shaders/index.md b/files/zh-cn/games/techniques/3d_on_the_web/glsl_shaders/index.md index 51030de486fbe8..09c753c35f1bdb 100644 --- a/files/zh-cn/games/techniques/3d_on_the_web/glsl_shaders/index.md +++ b/files/zh-cn/games/techniques/3d_on_the_web/glsl_shaders/index.md @@ -52,7 +52,7 @@ void main() { - 确保你在使用对 [WebGL](/zh-CN/docs/Web/API/WebGL_API) 有良好支持的现代浏览器，比如最新版的 Firefox 或 Chrome. - 创建一个目录保存你的实验。 -- 拷贝一份的 [压缩版的 Three.js 库](http://threejs.org/build/three.min.js) 到你的目录。 +- 拷贝一份的 [压缩版的 Three.js 库](https://threejs.org/build/three.min.js) 到你的目录。 ### HTML 结构 @@ -118,7 +118,7 @@ void main() { 每次的`gl_Position` 的结果是计算 model-view 矩阵和投射矩阵和投射矩阵相乘并得到最后的顶点位置。 > [!NOTE] -> 你可以在 [顶点处理](/zh-CN/docs/Games/Techniques/3D_on_the_web/Basic_theory#Vertex_processing)中学到更多关于模型，视图和投射变换，并且你可以在文末看到更多学习链接。 +> 你可以在 [顶点处理](/zh-CN/docs/Games/Techniques/3D_on_the_web/Basic_theory#vertex_processing)中学到更多关于模型，视图和投射变换，并且你可以在文末看到更多学习链接。 `projectionMatrix` 和 `modelViewMatrix` 两个函数都是 Three.js 提供的，并且传入了一个新的 3D 位置向量，转成着色器之后直接导致立方体向 `x` 轴移动 10 个单位，向`z` 轴移动了 5 个单位。我们可以忽略第四个参数并且保持为默认的`1.0` ; 这是用来控制 3D 空间中订单位置裁剪的，这个例子中不需要。 @@ -142,7 +142,7 @@ void main() { // var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); ``` -然后创建 [`shaderMaterial`](http://threejs.org/docs/#Reference/Materials/ShaderMaterial): +然后创建 [`shaderMaterial`](https://threejs.org/docs/#Reference/Materials/ShaderMaterial): ```js var shaderMaterial = new THREE.ShaderMaterial({ @@ -182,4 +182,4 @@ Three.js 编译和运行这两个这两个着色器到材质所在的网格 (mes ## 其他链接 - [学习 WebGL](http://learningwebgl.com/blog/?page_id=1217) — 基本 WebGL 知识 -- [WebGL 着色器和 WebGL 中的 GLSL 基础](http://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html) — GLSL 特定信息 +- [WebGL 着色器和 WebGL 中的 GLSL 基础](https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html) — GLSL 特定信息 diff --git a/files/zh-cn/games/techniques/controls_gamepad_api/index.md b/files/zh-cn/games/techniques/controls_gamepad_api/index.md index ca24eb9d6d1681..ca8f38744e7d96 100644 --- a/files/zh-cn/games/techniques/controls_gamepad_api/index.md +++ b/files/zh-cn/games/techniques/controls_gamepad_api/index.md @@ -13,7 +13,7 @@ slug: Games/Techniques/Controls_Gamepad_API ## API 状态与浏览器支持 -[Gamepad API](http://www.w3.org/TR/gamepad/) 在 W3C 的进程中仍然还是工作草案的状态，这意味着它的实现方法可能还会出现变动，但是就目前来说[浏览器的支持性](http://caniuse.com/gamepad)相当不错。Firefox 29+ 和 Chrome 35+ 对其支持得非常好。Opera 在版本 22+ 对 API 进行了支持 (一点也不奇怪，因为他们现在使用 Chrome 的引擎了。) 并且微软最近在 Edge 中对 API 实现了支持，也就是说四大主流浏览器现在都支持 Gamepad API。 +[Gamepad API](https://www.w3.org/TR/gamepad/) 在 W3C 的进程中仍然还是工作草案的状态，这意味着它的实现方法可能还会出现变动，但是就目前来说[浏览器的支持性](http://caniuse.com/gamepad)相当不错。Firefox 29+ 和 Chrome 35+ 对其支持得非常好。Opera 在版本 22+ 对 API 进行了支持 (一点也不奇怪，因为他们现在使用 Chrome 的引擎了。) 并且微软最近在 Edge 中对 API 实现了支持，也就是说四大主流浏览器现在都支持 Gamepad API。 ## 哪种控制器最好？ diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.md index b1cb123142648a..9e5e4995a54025 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Extra_lives", "Games/Workflows/2D_Breakout_game_Phaser/Buttons")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 的**第 14 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson14.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson14.html)完成本课程后找到源代码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 的**第 14 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson14.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson14.html)完成本课程后找到源代码。 为了使游戏看起来更加多汁和活泼，我们可以使用动画和补间。这将导致更好，更有趣的体验。让我们来探讨如何在游戏中实现 Phaser 动画和补间。 @@ -102,6 +102,6 @@ game.add ## 下一步 -动画和 tweens 看起来很不错，但我们可以添加更多的我们的游戏 - 在下一节我们将看看处理[按钮](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons)输入。 +动画和 tweens 看起来很不错，但我们可以添加更多的我们的游戏 - 在下一节我们将看看处理[按钮](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Buttons)输入。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Extra_lives", "Games/Workflows/2D_Breakout_game_Phaser/Buttons")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.md index 3f6ebc04ee543a..58f8d1c21d661a 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser)的**第 6 步**。在[Gamedev-Phaser-Content-Kit / demos / lesson06.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson06.html)完成本课后，你可以找到源代码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser)的**第 6 步**。在[Gamedev-Phaser-Content-Kit / demos / lesson06.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson06.html)完成本课后，你可以找到源代码。 现在已经介绍了物理引擎，我们可以开始在游戏中实现碰撞检测 - 首先我们来看看墙壁。 @@ -35,6 +35,6 @@ ball.body.bounce.set(1); ## 下一步 -现在开始看起来更像是一个游戏，但是我们无法以任何方式控制它 - 现在是介绍[玩家挡板和控制的时候了](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls)。 +现在开始看起来更像是一个游戏，但是我们无法以任何方式控制它 - 现在是介绍[玩家挡板和控制的时候了](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls)。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.md index ffb59a7b3df504..83a18ad62fec16 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Game_over", "Games/Workflows/2D_Breakout_game_Phaser/Collision_detection")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 的**第 9 步**。在[Gamedev-Phaser-Content-Kit / demos / lesson09.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson09.html)完成本课后，你可以找到源代码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 的**第 9 步**。在[Gamedev-Phaser-Content-Kit / demos / lesson09.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson09.html)完成本课后，你可以找到源代码。 建立砖块比将单个对象添加到屏幕要复杂一点，尽管使用 Phaser 还是比纯 JavaScript 更容易。我们来探讨如何创建一组砖块，并使用循环在屏幕上打印。 @@ -158,6 +158,6 @@ function initBricks() { ## 下一步 -有些东西丢失了 球不经停，经过砖块 - 我们需要适当的[碰撞检测](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Collision_detection)。 +有些东西丢失了 球不经停，经过砖块 - 我们需要适当的[碰撞检测](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Collision_detection)。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Game_over", "Games/Workflows/2D_Breakout_game_Phaser/Collision_detection")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/buttons/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/buttons/index.md index a6e7e7c01cf805..4fb4910d2860b3 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/buttons/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/buttons/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Buttons {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 的**第 15 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson15.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson15.html)完成本课程后找到源代码 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 的**第 15 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson15.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson15.html)完成本课程后找到源代码 而不是立即开始游戏，我们可以通过添加他们可以按的开始按钮将该决定留给玩家。我们来调查如何做到这一点。 @@ -99,6 +99,6 @@ function update() { ## 下一步 -在本系列文章中我们将做的最后一件事情是，通过添加一些[随机化](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay)的方式，球从球上弹起来，使游戏更有趣。 +在本系列文章中我们将做的最后一件事情是，通过添加一些[随机化](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Randomizing_gameplay)的方式，球从球上弹起来，使游戏更有趣。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md index 8c8a64cd281528..285d1612258b12 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Collision_detection {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_Phaser/The_score")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 的**第 10 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson10.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson10.html)完成本课程后找到源代码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 的**第 10 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson10.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson10.html)完成本课程后找到源代码。 现在接下来的挑战 - 球和砖块之间的碰撞检测。幸运的是，我们可以使用物理引擎来检查单个对象（如球和桨）之间的碰撞，也可以检测对象和组之间的碰撞。 @@ -35,7 +35,7 @@ function ballHitBrick(ball, brick) { 感谢 Phaser，有两个参数传递给函数 - 第一个是球，我们在碰撞方法中明确定义，第二个是球碰撞的砖组中的单个砖。在功能内部，我们从屏幕上删除所讨论的砖块，只需运行其`kill()`上的方法即可。 -你将期望在使用[纯 JavaScript](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection)时编写更多自己的计算机来实现碰撞检测。这是使用框架的好处 - 你可以为 Phaser 留下大量无聊的代码，并专注于制作游戏中最有趣和最有趣的部分。 +你将期望在使用[纯 JavaScript](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection)时编写更多自己的计算机来实现碰撞检测。这是使用框架的好处 - 你可以为 Phaser 留下大量无聊的代码，并专注于制作游戏中最有趣和最有趣的部分。 ## 比较你的代码 @@ -45,6 +45,6 @@ function ballHitBrick(ball, brick) { ## 下一步 -我们可以打砖块并删除它们，这已经是游戏的一个很好的补充。结果，更好地计算被毁砖增加[得分](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score)。 +我们可以打砖块并删除它们，这已经是游戏的一个很好的补充。结果，更好地计算被毁砖增加[得分](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score)。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_Phaser/The_score")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md index c78249afb52af4..425aa434549a05 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Extra_lives {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 的**第 13 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson13.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson13.html)完成本课程后找到源代码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 的**第 13 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson13.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson13.html)完成本课程后找到源代码。 我们可以通过增加生活使游戏更愉快。在这篇文章中，我们将实施一个生活系统，以便玩家可以继续玩，直到他们失去了三个生命，而不仅仅是一个人。 @@ -25,7 +25,7 @@ var lifeLostText; ## 定义新的文本标签 -定义文本看起来像我们已经在[分数](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score)课上已经做[的](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score)。`scoreText`在`create()`函数内的现有定义下方添加以下行： +定义文本看起来像我们已经在[分数](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score)课上已经做[的](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score)。`scoreText`在`create()`函数内的现有定义下方添加以下行： ```js livesText = game.add.text(game.world.width - 5, 5, "Lives: " + lives, { @@ -132,6 +132,6 @@ function ballLeaveScreen() { ## 下一步 -生活让游戏更加宽容 - 如果你失去一个生命，你还剩下两个，可以继续玩。现在让我们通过添加[动画和补间来](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens)扩展游戏的外观和感觉。 +生活让游戏更加宽容 - 如果你失去一个生命，你还剩下两个，可以继续玩。现在让我们通过添加[动画和补间来](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens)扩展游戏的外观和感觉。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/game_over/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/game_over/index.md index 95bd34e5fe59b7..71cf6382d943b3 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/game_over/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/game_over/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Game_over {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls", "Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 的**第 8 步**。在[Gamedev-Phaser-Content-Kit / demos / lesson08.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson08.html)完成本课后，你可以找到源代码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 的**第 8 步**。在[Gamedev-Phaser-Content-Kit / demos / lesson08.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson08.html)完成本课后，你可以找到源代码。 为了使游戏更有趣，我们可以引入失去的能力 - 如果在到达屏幕底部边缘之前没有击球，那么这个游戏将会结束。 @@ -39,6 +39,6 @@ ball.events.onOutOfBounds.add(function () { ## 下一步 -现在的基本游戏就是让我们通过引入砖块来更有趣的是 - 现在是[建造砖块](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field)的时候了。 +现在的基本游戏就是让我们通过引入砖块来更有趣的是 - 现在是[建造砖块](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field)的时候了。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls", "Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/index.md index ebe7f931439971..21ae7e05f94481 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/index.md @@ -19,24 +19,24 @@ slug: Games/Tutorials/2D_breakout_game_Phaser 所有的课程 — 以及我们接下来将一起做的各个版本的 [MDN Breakout game](https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/lesson16.html) 都能在 [GitHub](https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/)上找到 -1. [初始化框架](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework) -2. [缩放](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Scaling) -3. [加载资源并在屏幕上打印](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen) -4. [移动小球](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball) -5. [物理](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Physics) -6. [从墙上弹开](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls) -7. [弹块和控制](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls) -8. [游戏结束](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Game_over) -9. [建立砖块](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field) -10. [碰撞检测](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Collision_detection) -11. [得分](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score) -12. [胜利](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Win_the_game) -13. [额外生命](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Extra_lives) -14. [动画与补间](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens) -15. [按钮](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons) -16. [随机游戏](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay) - -学习路线的小提示 — 最好先熟悉使用原生 JavaScript 进行网页游戏开发，这样可以打下坚实的基础。如果你还不熟悉原生 javascript 开发，我们建议你先过一遍这个系列，[使用原生 Javascript 开发 MDN 消除游戏](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). +1. [初始化框架](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework) +2. [缩放](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Scaling) +3. [加载资源并在屏幕上打印](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_screen) +4. [移动小球](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball) +5. [物理](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Physics) +6. [从墙上弹开](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls) +7. [弹块和控制](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls) +8. [游戏结束](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Game_over) +9. [建立砖块](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field) +10. [碰撞检测](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Collision_detection) +11. [得分](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score) +12. [胜利](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Win_the_game) +13. [额外生命](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Extra_lives) +14. [动画与补间](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens) +15. [按钮](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Buttons) +16. [随机游戏](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Randomizing_gameplay) + +学习路线的小提示 — 最好先熟悉使用原生 JavaScript 进行网页游戏开发，这样可以打下坚实的基础。如果你还不熟悉原生 javascript 开发，我们建议你先过一遍这个系列，[使用原生 Javascript 开发 MDN 消除游戏](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). 在那之后，你就能随意挑选框架并用在你的项目中;我们选择了 Phaser 这个稳定优越的框架，它有着好的支持和社区环境以及大量优秀的插件。框架加速了开发并能帮你管理无趣的部分，让你专注于有意思的事务。然而，框架也有不好的地方，所以当一些意想不到的事情发生了或者想实现一些框架没有提供的功能时，你就将需要原生的 JavaScript 知识了。 @@ -45,6 +45,6 @@ slug: Games/Tutorials/2D_breakout_game_Phaser ## Next steps -好了，那我们就开始吧！前往系列第一部分 — [初始化框架](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework). +好了，那我们就开始吧！前往系列第一部分 — [初始化框架](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework). {{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md index 25e01da63bc4de..a905c0e269fcca 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework {{PreviousNext("Games/Tutorials/2D_Breakout_game_Phaser", "Games/Tutorials/2D_Breakout_game_Phaser/Scaling")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser)系列的第一课。在课程完成之后，你可以在[Gamedev-Phaser-Content-Kit/demos/lesson01.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson01.html)找到源码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser)系列的第一课。在课程完成之后，你可以在[Gamedev-Phaser-Content-Kit/demos/lesson01.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson01.html)找到源码。 在我们开始写游戏的功能之前，我们需要创建一个用来内部渲染游戏的基础架构。使用 HTML 就能做到 — Parser 框架将生成所需的 {{htmlelement("canvas")}} 元素。 @@ -76,6 +76,6 @@ HTML 文档结构非常的简单，这个游戏将整个被渲染在框架生成 ## 下一步 -现在我们已经完成了一个简单的 HTML 页面，并且学习了如何安装 Phaser，让我们继续学习第二章： [scaling](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Scaling). +现在我们已经完成了一个简单的 HTML 页面，并且学习了如何安装 Phaser，让我们继续学习第二章： [scaling](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Scaling). {{PreviousNext("Games/Tutorials/2D_Breakout_game_Phaser", "Games/Tutorials/2D_Breakout_game_Phaser/Scaling")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md index c9deb141d99ecc..61e08326c5ef19 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_ {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Scaling", "Games/Workflows/2D_Breakout_game_Phaser/Move the ball")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 的**第三步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson03.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson03.html)完成本课程后找到源代码 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 的**第三步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson03.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson03.html)完成本课程后找到源代码 我们的游戏将围绕屏幕滚动，弹出一个桨，摧毁砖块赚取积分 - 熟悉吗？在本文中，我们将介绍如何将 sprite 添加到我们的 gameworld 中。 @@ -55,6 +55,6 @@ function create() { ## 下一步 -打出球很容易; 接下来我们将尝试在屏幕上[移动球](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball)。 +打出球很容易; 接下来我们将尝试在屏幕上[移动球](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball)。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Scaling", "Games/Workflows/2D_Breakout_game_Phaser/Move the ball")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.md index 39d63aa4391b52..9145a4e7189914 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen", "Games/Workflows/2D_Breakout_game_Phaser/Physics")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 的**第 4 步**。在[Gamedev-Phaser-Content-Kit / demos / lesson04.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson04.html)完成本课后，你可以找到源代码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 的**第 4 步**。在[Gamedev-Phaser-Content-Kit / demos / lesson04.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson04.html)完成本课后，你可以找到源代码。 我们在屏幕上打印了我们的蓝色球，但它什么都不做，这样做会很酷。本文介绍如何做到这一点。 @@ -34,6 +34,6 @@ function update() { 下一步是添加一些基本的碰撞检测，所以我们的球可以从墙壁反弹。这将需要几行代码 - 一个比我们迄今为止看到的更复杂的步骤，特别是如果我们也想添加桨和砖碰撞 - 但是幸运的是 Phaser 使我们比我们想要使用纯粹的方法更容易做到这一点 JavaScript 的。 -无论如何，在我们做所有的事情之前，我们将首先介绍 Phaser 的[物理](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Physics)引擎，并做一些设置工作。 +无论如何，在我们做所有的事情之前，我们将首先介绍 Phaser 的[物理](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Physics)引擎，并做一些设置工作。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen", "Games/Workflows/2D_Breakout_game_Phaser/Physics")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/physics/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/physics/index.md index 6b0af75418f55f..d625de2326cffc 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/physics/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/physics/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/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")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 的**第 5 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson05.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson05.html)完成本课程后找到源代码 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 的**第 5 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson05.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson05.html)完成本课程后找到源代码 为了在我们的游戏中的对象之间进行正确的碰撞检测，我们将需要物理学; 本文将向你介绍 Phaser 中的可用内容，以及演示典型的简单设置。 @@ -87,6 +87,6 @@ function update() {} ## 下一步 -现在我们可以转到下一课，看看如何让球[从墙上弹起](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls)。 +现在我们可以转到下一课，看看如何让球[从墙上弹起](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls)。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md index 7e52bca218e974..ae92b31eb39228 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_Phaser/Game_over")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 的**第 7 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson07.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson07.html)完成本课程后找到源代码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 的**第 7 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson07.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson07.html)完成本课程后找到源代码。 我们有球从墙上移动并弹跳，但它很快变得无聊 - 没有互动！我们需要一种介绍游戏的方法，所以在这篇文章中，我们将创建一个桨来移动并击中球。 @@ -123,6 +123,6 @@ ball.body.velocity.set(150, -150); ## 下一步 -我们可以移动桨，并将球反弹，但是如果球从屏幕的底部边缘反弹，那又有什么意义？我们来介绍丢失的可能性 - 也称为[游戏](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Game_over)逻辑。 +我们可以移动桨，并将球反弹，但是如果球从屏幕的底部边缘反弹，那又有什么意义？我们来介绍丢失的可能性 - 也称为[游戏](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Game_over)逻辑。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_Phaser/Game_over")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/randomizing_gameplay/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/randomizing_gameplay/index.md index 05becac11b8387..4eeb5a5cf5545a 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/randomizing_gameplay/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/randomizing_gameplay/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Randomizing_gameplay {{Previous("Games/Workflows/2D_Breakout_game_Phaser/Buttons")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 中的第**16 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson16.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson16.html)完成本课程后找到源代码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 中的第**16 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson16.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson16.html)完成本课程后找到源代码。 我们的游戏似乎已经完成了，但是如果你看起来足够近，你会发现球在整个游戏中都以相同的角度从桨上弹起。这意味着每个游戏都非常相似。为了解决这个问题，提高可玩性，我们应该使反弹角度更加随机，在本文中我们将介绍一下如何。 @@ -46,6 +46,6 @@ function ballHitPaddle(ball, paddle) { 一定要检查越来越多的[示例](http://examples.phaser.io/)列表和[官方文档](http://docs.phaser.io/)，如果你需要任何帮助，请访问[HTML5 Gamedevs 论坛](http://www.html5gamedevs.com/forum/14-phaser/)。 -你也可以返回[本教程系列的索引页](/zh-CN/docs/Games/Workflows/2D_breakout_game_Phaser)。 +你也可以返回[本教程系列的索引页](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser)。 {{Previous("Games/Workflows/2D_Breakout_game_Phaser/Buttons")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/scaling/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/scaling/index.md index 178f50be758f82..7f5760bda05f55 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/scaling/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/scaling/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Scaling {{PreviousNext("Games/Tutorials/2D_Breakout_game_Phaser/Initialize_the_framework", "Games/Tutorials/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser)系列的第二课。在课程完成之后，你可以在[Gamedev-Phaser-Content-Kit/demos/lesson02.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson01.html)找到源码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser)系列的第二课。在课程完成之后，你可以在[Gamedev-Phaser-Content-Kit/demos/lesson02.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson01.html)找到源码。 缩放是指游戏画布如何在不同的屏幕尺寸上进行显示。我们可以在预加载阶段自动使游戏规模适合任何屏幕尺寸，之后就可以不用再担心屏幕尺寸的问题了。 @@ -49,6 +49,6 @@ game.stage.backgroundColor = "#eee"; ## 下一步 -现在我们设置了我们游戏的缩放比例，让我们继续第三课，并设计出如何[加载资源并将其显示在屏幕上](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen)。 +现在我们设置了我们游戏的缩放比例，让我们继续第三课，并设计出如何[加载资源并将其显示在屏幕上](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_screen)。 {{PreviousNext("Games/Tutorials/2D_Breakout_game_Phaser/Initialize_the_framework", "Games/Tutorials/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/the_score/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/the_score/index.md index 4c0b5afbbcd6ba..0a193ef6990e48 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/the_score/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/the_score/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/The_score {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 的**第 11 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson11.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson11.html)完成本课程后找到源代码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 的**第 11 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson11.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson11.html)完成本课程后找到源代码。 得分也可以使游戏更有趣 - 你可以尝试击败自己的高分，或者你的朋友。在这篇文章中，我们将为我们的游戏添加一个评分系统。 @@ -64,6 +64,6 @@ function ballHitBrick(ball, brick) { ## 下一步 -我们现在有一个得分系统，但是如果你不能赢得，那么玩和保持分数是多少？让我们看看我们如何能够增加胜利的状态，让我们[赢得比赛](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Win_the_game)。 +我们现在有一个得分系统，但是如果你不能赢得，那么玩和保持分数是多少？让我们看看我们如何能够增加胜利的状态，让我们[赢得比赛](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Win_the_game)。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/win_the_game/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/win_the_game/index.md index a30d91b3f1bd87..441548a52beb79 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_phaser/win_the_game/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_phaser/win_the_game/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/Win_the_game {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/The_score", "Games/Workflows/2D_Breakout_game_Phaser/Extra_lives")}} -这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser) 16 的**第 12 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson12.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson12.html)完成本课程后找到源代码。 +这是[Gamedev Phaser 教程](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 16 的**第 12 步**。你可以在[Gamedev-Phaser-Content-Kit / demos / lesson12.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson12.html)完成本课程后找到源代码。 在我们的游戏中实现获胜是相当容易的：如果你碰巧摧毁所有的砖块，那么你赢了。 @@ -44,6 +44,6 @@ function ballHitBrick(ball, brick) { ## 下一步 -失败和获胜都是实施的，所以我们的游戏的核心游戏就完成了。现在让我们添加一些额外的东西 - 我们会给玩家将 3 个[生活](/zh-CN/docs/Games/Workflows/2D_Breakout_game_Phaser/Extra_lives)的，而不是一个。 +失败和获胜都是实施的，所以我们的游戏的核心游戏就完成了。现在让我们添加一些额外的东西 - 我们会给玩家将 3 个[生活](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser/Extra_lives)的，而不是一个。 {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/The_score", "Games/Workflows/2D_Breakout_game_Phaser/Extra_lives")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md index a0b7c35860d28e..612842fbf915e6 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}} -本篇是 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch) 10 节教程中的第三节。如果你完成了本篇教程之后，你可以从 [Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html) 看到源码。 +本篇是 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) 10 节教程中的第三节。如果你完成了本篇教程之后，你可以从 [Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html) 看到源码。 看到我们的球动起来很惊讶吧，但是它很快就从屏幕上消失了，当然我们是可以控制它的。我们会实现一些非常简单的碰撞检测 (详细后面解释),使球在画布的四周反弹回来。 @@ -105,6 +105,6 @@ if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { ## 下一步 -现在我们已经到了我们的球正在移动和留在游戏板上的阶段。在第四章中，我们将看看如何实现一个可控制的 paddle - 参见[paddle 和键盘控制](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls)。 +现在我们已经到了我们的球正在移动和留在游戏板上的阶段。在第四章中，我们将看看如何实现一个可控制的 paddle - 参见[paddle 和键盘控制](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls)。 {{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/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md index 96f4e269fa5250..7b3c063bfd65cc 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}} -这是 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch)教程 10 节的第 6 节。你可以在完成本课程后在这里[Gamedev-Canvas-workshop/lesson6.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html)找到源代码。 +这是 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)教程 10 节的第 6 节。你可以在完成本课程后在这里[Gamedev-Canvas-workshop/lesson6.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html)找到源代码。 在修改游戏机制后，我们可以输了 — 这样这游戏看起来终于像是一个游戏了，这真是太好了。但是，如果你总是让球与墙、板碰撞的话，很快就会感到无聊的。好游戏需要的是让球消灭砖，这就是我们即将要做的！ @@ -109,6 +109,6 @@ drawBricks(); ## 下一节 -现在，我们有砖啦！但是球根本就没有和它们互动——接下来的第七章我们将让球和砖产生碰撞：[碰撞检测](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection)。 +现在，我们有砖啦！但是球根本就没有和它们互动——接下来的第七章我们将让球和砖产生碰撞：[碰撞检测](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection)。 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md index 89449ac1c92d83..fa6af7adf81597 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}} -本篇为[Gamedev Canvas tutorial](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch)10 节教程中的**第 7 节。**在你完成这篇课程之后，你可以在[Gamedev-Canvas-workshop/lesson7.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html).找到我们的源代码。 +本篇为[Gamedev Canvas tutorial](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)10 节教程中的**第 7 节。**在你完成这篇课程之后，你可以在[Gamedev-Canvas-workshop/lesson7.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html).找到我们的源代码。 我们已经在屏幕上画出了砖块，但游戏仍然没有那么有趣，因为球通过它们。我们需要考虑增加碰撞检测，这样球就可以弹击砖块并打破它们。 @@ -132,6 +132,6 @@ collisionDetection(); ## 下一节 -我们现在肯定到了，继续前进吧！在第八章中，我们将探讨如何跟踪得分和获胜。[Track the score and win](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win). +我们现在肯定到了，继续前进吧！在第八章中，我们将探讨如何跟踪得分和获胜。[Track the score and win](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win). {{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/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md index c1a617c2a7aa70..eed0ca9e200d46 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_dra {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}} -本篇是 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch) 10 节教程中的第一节。如果你完成了本篇教程之后，你可以从 [Gamedev-Canvas-workshop/lesson1.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html) 看到源码。 +本篇是 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) 10 节教程中的第一节。如果你完成了本篇教程之后，你可以从 [Gamedev-Canvas-workshop/lesson1.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html) 看到源码。 在我们开始编写游戏功能之前，我们可以通过 HTML 的 canvas 标签创建支撑游戏的基本结构。 @@ -110,6 +110,6 @@ ctx.closePath(); ## 下一节 -现在我们已经创建了基本的 HTML 和关于画布的基本知识。我们继续第二节，如何让球在游戏中动起来 — [让球动起来](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch/Move_the_ball)。 +现在我们已经创建了基本的 HTML 和关于画布的基本知识。我们继续第二节，如何让球在游戏中动起来 — [让球动起来](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball)。 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md index 885a1614e38eb3..f514c979029bf2 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up {{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}} -本篇为 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch) 10 节教程中的**第 10 节也是最后一节。**完成这篇课程后，你可以在 [Gamedev-Canvas-workshop/lesson10.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html) 找到我们的源代码。 +本篇为 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) 10 节教程中的**第 10 节也是最后一节。**完成这篇课程后，你可以在 [Gamedev-Canvas-workshop/lesson10.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html) 找到我们的源代码。 不管我们做什么游戏，它总是存在优化的空间。例如，我们可以为玩家多提供几条命，让他们能在发生一两次失误的情况下顺利完成游戏。或者，我们也可以在渲染代码上下工夫。 @@ -103,8 +103,8 @@ requestAnimationFrame(draw); ## 游戏结束——暂时看来！ -祝贺你——你完成了本教程的所有小节！现在，你应该已经掌握 canvas 操纵的基础和 2D 游戏背后的逻辑了。是时候去学习一些框架，继续你的游戏开发之旅了！你可以看看本系列的姊妹篇：[用 Phaser 制作 2D 打砖块游戏](/zh-CN/docs/Games/Workflows/2D_breakout_game_Phaser) 或者 [Cyber Orb built in Phaser](/zh-CN/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation) 。或者，你也可以在 [MDN 游戏区](/zh-CN/docs/Games) 中获得灵感和更多知识。 +祝贺你——你完成了本教程的所有小节！现在，你应该已经掌握 canvas 操纵的基础和 2D 游戏背后的逻辑了。是时候去学习一些框架，继续你的游戏开发之旅了！你可以看看本系列的姊妹篇：[用 Phaser 制作 2D 打砖块游戏](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser) 或者 [Cyber Orb built in Phaser](/zh-CN/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation) 。或者，你也可以在 [MDN 游戏区](/zh-CN/docs/Games) 中获得灵感和更多知识。 -你也可以回到[本教程的目录页](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch)。祝编程愉快！ +你也可以回到[本教程的目录页](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)。祝编程愉快！ {{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md index d76affc5701963..2f8193b3b16ec6 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/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")}} -这是 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch)教程的第五章。你可以在完成本课程后在这里[Gamedev-Canvas-workshop/lesson5.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html)找到源代码。 +这是 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)教程的第五章。你可以在完成本课程后在这里[Gamedev-Canvas-workshop/lesson5.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html)找到源代码。 看球从墙上反弹，并能够移动球盘是很有趣的。但除此之外，游戏什么都不做，也没有任何进展或最终目标。从游戏的角度来看，我们需要一个 game over。失败的逻辑很简单。如果你的球拍错过了球，并且球到达屏幕的底部边缘，那么游戏就结束了。 @@ -80,6 +80,6 @@ if (y + dy < ballRadius) { ## 下一步 -到目前为止，我们的表现相当不错，游戏变得更有趣，并且现在你可以输了！但它仍然缺少一些东西。让我们继续前进到第六章 - [建造砖块](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch/Build_the_brick_field) - 并创造一些砖块来消灭它们。 +到目前为止，我们的表现相当不错，游戏变得更有趣，并且现在你可以输了！但它仍然缺少一些东西。让我们继续前进到第六章 - [建造砖块](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field) - 并创造一些砖块来消灭它们。 {{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/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/index.md index 0b0d17968c18f2..05651750e24e07 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/index.md @@ -19,27 +19,27 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript 全部教程 — [MDN 消除小游戏](http://breakout.enclavegames.com/lesson10.html) 的各个版本我们正一起管理并托管到 [GitHub](https://github.com/end3r/Canvas-gamedev-workshop) 上： -1. [创建、绘制画布](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it) -2. [让球动起来](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball) -3. [反弹的墙](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls) -4. [键盘操作](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls) -5. [游戏结束](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over) -6. [创建砖块](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field) -7. [撞击处理](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection) -8. [统计得分、获得胜利](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win) -9. [鼠标控制](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls) -10. [完成](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up) +1. [创建、绘制画布](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it) +2. [让球动起来](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball) +3. [反弹的墙](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls) +4. [键盘操作](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls) +5. [游戏结束](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over) +6. [创建砖块](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field) +7. [撞击处理](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection) +8. [统计得分、获得胜利](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win) +9. [鼠标控制](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls) +10. [完成](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up) 对于实现一个网页游戏而言，最好的方式是从纯 JavaScirpt 着手，那样可以让我们建立更坚实的基础。之后你可以在你的项目中选择你喜欢的框架。框架也只是用 JavaScript 语言实现的工具；如果你想要在项目中使用框架，你必须先了解语言本身。框架可以帮你提高开发效率并生成一些基础的内容；但是如果没有达到你的预期，你只能慢慢调试或者使用原生 JavaScript 去实现解决方案。 > [!NOTE] -> 如果你对使用第三方游戏资源库开发 2d 网页游戏感兴趣，可以参考本系列教程的 [2D breakout game using Phaser](/zh-CN/docs/Games/Workflows/2D_breakout_game_Phaser). +> 如果你对使用第三方游戏资源库开发 2d 网页游戏感兴趣，可以参考本系列教程的 [2D breakout game using Phaser](/zh-CN/docs/Games/Tutorials/2D_breakout_game_Phaser). > [!NOTE] > 本系列教程可以用作游戏开发工作室的素材资源。如果你想探讨普通的游戏开发，你可以利用[Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit)以及本教程的内容。 ## 下一步 -好，让我们开始吧。第一步 — [创建、绘制画布](/zh-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it) +好，让我们开始吧。第一步 — [创建、绘制画布](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it) {{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md index 295b1328eadc42..9c15eebb9e71aa 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}} -本篇为 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch) 10 节教程中的**第 9 节**。在你完成这篇课程之后，你可以在 [Gamedev-Canvas-workshop/lesson9.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html) 找到我们的源代码。 +本篇为 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) 10 节教程中的**第 9 节**。在你完成这篇课程之后，你可以在 [Gamedev-Canvas-workshop/lesson9.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html) 找到我们的源代码。 这个游戏实际已经完成，现在让我们着手去润色。我们已经添加过键盘控制，而加入鼠标控制也同样简单。 @@ -46,6 +46,6 @@ function mouseMoveHandler(e) { ## 下一步 -现在我们已经拥有一个完整的游戏。我们的系列教程将以一些细节上的调整作为[结束。](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch/Finishing_up) +现在我们已经拥有一个完整的游戏。我们的系列教程将以一些细节上的调整作为[结束。](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up) {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md index 4d89c0167b8c84..8ef02800812a33 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball {{GamesSidebar}}{{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")}} -本篇是 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch) 10 节教程中的第二节。如果你完成了本篇教程之后，你可以从 [Gamedev-Canvas-workshop/lesson2.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html) 看到源码。 +本篇是 [Gamedev Canvas tutorial](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) 10 节教程中的第二节。如果你完成了本篇教程之后，你可以从 [Gamedev-Canvas-workshop/lesson2.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html) 看到源码。 从上一节中你已经知道如何去绘制一个球。现在让我们使它动起来。从技术上讲，我们将在画布上绘制一个球，之后让它消失，然后在一个稍微不用的位置上再绘制一个一样的球。就想电影里的每一帧动起来的感觉。 @@ -134,6 +134,6 @@ function draw() { ## 下一步 -我们已经画了我们的球，并将其移动，但它仍然消失在画布的边缘。在第三章中，我们将探讨如何使其 [从墙壁上反弹](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch/Bounce_off_the_walls). +我们已经画了我们的球，并将其移动，但它仍然消失在画布的边缘。在第三章中，我们将探讨如何使其 [从墙壁上反弹](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls). {{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/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md index ee181908804186..29d8f0c8fa62cd 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_contr {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}} -这是[Gamedev Canvas tutorial](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch)中的第四章。完成本课程后，你可以在[Gamedev-Canvas-workshop/lesson4.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html)找到源码。 +这是[Gamedev Canvas tutorial](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)中的第四章。完成本课程后，你可以在[Gamedev-Canvas-workshop/lesson4.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html)找到源码。 你可以看到球自由的、无限次的在墙壁上反弹，但是没有和我们发生任何交互。如果我们没有对它的控制操作，这仍然不是一个游戏。下面，我们新增一些用户操作：一个可以控制球的球板。 @@ -123,6 +123,6 @@ drawPaddle(); ## 下一步 -现在我们有一些类似于游戏的东西。唯一的麻烦就是无论如何你都可以继续用球拍击球。这一切都将在第五章中改变，[游戏结束](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch/Game_over)时，我们会为游戏添加一个最后的状态。 +现在我们有一些类似于游戏的东西。唯一的麻烦就是无论如何你都可以继续用球拍击球。这一切都将在第五章中改变，[游戏结束](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over)时，我们会为游戏添加一个最后的状态。 {{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/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md index b9d766662f6a7a..a058b5d5523273 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md @@ -7,7 +7,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}} -本篇为[Gamedev Canvas tutorial](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch)10 节教程中的**第 8 节。**在你完成这篇课程之后，你可以在[Gamedev-Canvas-workshop/lesson8.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html)找到我们的源代码。 +本篇为[Gamedev Canvas tutorial](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)10 节教程中的**第 8 节。**在你完成这篇课程之后，你可以在[Gamedev-Canvas-workshop/lesson8.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html)找到我们的源代码。 破坏砖块真的很酷，但更酷的是，游戏可以给每个用户击破的砖块奖励分数，并保持总分。 @@ -104,6 +104,6 @@ function collisionDetection() { ## 下一节 -游戏到这一步看起来相当不错。在下一课中，你将通过添加鼠标控件来扩大游戏的吸引力：[Mouse controls](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch/Mouse_controls).。 +游戏到这一步看起来相当不错。在下一课中，你将通过添加鼠标控件来扩大游戏的吸引力：[Mouse controls](/zh-CN/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls).。 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}} diff --git a/files/zh-cn/glossary/dns/index.md b/files/zh-cn/glossary/dns/index.md index 9ec4382bdc949e..b97ed38476bed6 100644 --- a/files/zh-cn/glossary/dns/index.md +++ b/files/zh-cn/glossary/dns/index.md @@ -13,5 +13,5 @@ DNS 最突出的功能是将易于记忆的域名（例如 mozilla.org）翻译 ## 参见 -- [理解域名](/zh-CN/docs/Learn/Common_questions/What_is_a_domain_name) +- [理解域名](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) - 维基百科上的[域名系统](https://zh.wikipedia.org/wiki/域名系统) diff --git a/files/zh-cn/glossary/endianness/index.md b/files/zh-cn/glossary/endianness/index.md index 1c9180c1ab7546..671d22c2e125bf 100644 --- a/files/zh-cn/glossary/endianness/index.md +++ b/files/zh-cn/glossary/endianness/index.md @@ -19,12 +19,12 @@ l10n: - _大端序_：`0x12 0x34 0x56 0x78` - _混合序_（曾经的做法，非常罕见）：`0x34 0x12 0x78 0x56` -类型化数组指南提供了[将任何数字转换为给定字节序的二进制表示](/zh-CN/docs/Web/JavaScript/Typed_arrays#视图)的一个示例。 +类型化数组指南提供了[将任何数字转换为给定字节序的二进制表示](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays#视图)的一个示例。 ## 参见 - {{jsxref("ArrayBuffer")}} - {{jsxref("DataView")}} -- [类型化数组](/zh-CN/docs/Web/JavaScript/Typed_arrays) +- [类型化数组](/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays) - 维基百科上的[字节序](https://zh.wikipedia.org/wiki/字节序) - {{Glossary("Data structure", "数据结构")}} diff --git a/files/zh-cn/glossary/internet/index.md b/files/zh-cn/glossary/internet/index.md index 8bc10ec3ca7a59..33d1dd41471bc2 100644 --- a/files/zh-cn/glossary/internet/index.md +++ b/files/zh-cn/glossary/internet/index.md @@ -11,4 +11,4 @@ l10n: ## 参见 -- [互联网是如何工作的](/zh-CN/docs/Learn/Common_questions/How_does_the_Internet_work)（给初学者的介绍） +- [互联网是如何工作的](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work)（给初学者的介绍） diff --git a/files/zh-cn/glossary/isp/index.md b/files/zh-cn/glossary/isp/index.md index 9093dc26573908..dffc65d0719029 100644 --- a/files/zh-cn/glossary/isp/index.md +++ b/files/zh-cn/glossary/isp/index.md @@ -11,5 +11,5 @@ l10n: ## 参见 -- [互联网是如何工作的](/zh-CN/docs/Learn/Common_questions/How_does_the_Internet_work)（给初学者的说明） +- [互联网是如何工作的](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work)（给初学者的说明） - 维基百科上的[互联网服务提供者](https://zh.wikipedia.org/wiki/互联网服务供应商) diff --git a/files/zh-cn/glossary/javascript/index.md b/files/zh-cn/glossary/javascript/index.md index 375c8a059574aa..fe7bcd14bb7aec 100644 --- a/files/zh-cn/glossary/javascript/index.md +++ b/files/zh-cn/glossary/javascript/index.md @@ -28,5 +28,5 @@ Brendan Eich（彼时受雇于 Netscape）为服务器端构想的语言——Ja - [NodeSchool 的“javascripting”工坊](https://nodeschool.io/#workshoppers) - [codecademy.com 的 JavaScript 课程](https://www.codecademy.com/catalog/language/javascript) - [最新的 ECMAScript 标准](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/) -- MDN 的 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/reference) +- MDN 的 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference) - [_Eloquent JavaScript_](https://eloquentjavascript.net/) 一书 diff --git a/files/zh-cn/glossary/server/index.md b/files/zh-cn/glossary/server/index.md index f4bbc84e11bd0d..f9180ec3ce2949 100644 --- a/files/zh-cn/glossary/server/index.md +++ b/files/zh-cn/glossary/server/index.md @@ -19,5 +19,5 @@ l10n: ## 参见 -- [服务器介绍](/zh-CN/docs/Learn/Common_questions/What_is_a_web_server) +- [服务器介绍](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server) - 维基百科上的[服务器](https://zh.wikipedia.org/wiki/服务器) diff --git a/files/zh-cn/glossary/site/index.md b/files/zh-cn/glossary/site/index.md index 1dc174a4aaaf0d..576cf695c698c1 100644 --- a/files/zh-cn/glossary/site/index.md +++ b/files/zh-cn/glossary/site/index.md @@ -41,6 +41,6 @@ l10n: ## 参见 -- [URL 是什么](/zh-CN/docs/Learn/Common_questions/What_is_a_URL) +- [URL 是什么](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) - {{Glossary("Origin", "来源")}} - [同源策略](/zh-CN/docs/Web/Security/Same-origin_policy) diff --git a/files/zh-cn/glossary/time_to_first_byte/index.md b/files/zh-cn/glossary/time_to_first_byte/index.md index fa5f072569c9ea..73ab30ab25dff7 100644 --- a/files/zh-cn/glossary/time_to_first_byte/index.md +++ b/files/zh-cn/glossary/time_to_first_byte/index.md @@ -7,7 +7,7 @@ l10n: {{GlossarySidebar}} -**第一字节时间**（TTFB）是指从浏览器请求页面到接收来自服务器发送的信息的第一个字节的时间。这包括 DNS 查询和使用 [TCP](/zh-CN/docs/Glossary/TCP) 握手建立连接的时间。如果请求是通过 [HTTPS](/zh-CN/docs/Glossary/https) 发出的，则还包括 [TLS](/zh-CN/docs/Glossary/SSL) 握手建立连接的时间。 +**第一字节时间**（TTFB）是指从浏览器请求页面到接收来自服务器发送的信息的第一个字节的时间。这包括 DNS 查询和使用 [TCP](/zh-CN/docs/Glossary/TCP) 握手建立连接的时间。如果请求是通过 [HTTPS](/zh-CN/docs/Glossary/HTTPS) 发出的，则还包括 [TLS](/zh-CN/docs/Glossary/SSL) 握手建立连接的时间。 TTFB 是从请求开始到响应开始之间所用的时间，以毫秒为单位： diff --git a/files/zh-cn/glossary/type_coercion/index.md b/files/zh-cn/glossary/type_coercion/index.md index c3b0ddb0773870..52e7886b2d6ca4 100644 --- a/files/zh-cn/glossary/type_coercion/index.md +++ b/files/zh-cn/glossary/type_coercion/index.md @@ -7,7 +7,7 @@ l10n: {{GlossarySidebar}} -强制类型转换是将值从一种数据类型自动或隐式地转换为另一种数据类型（例如字符串转换为数字）。[_类型转换_](/zh-CN/docs/Glossary/Type_conversion)类似于*强制类型转换*，因为它们都将值从一种数据类型转换为另一种数据类型，只有一个关键的区别——*强制类型转换*是隐式的，而*类型转换*可以是隐式的，*也*可以是显式的。 +强制类型转换是将值从一种数据类型自动或隐式地转换为另一种数据类型（例如字符串转换为数字）。[_类型转换_](/zh-CN/docs/Glossary/Type_Conversion)类似于*强制类型转换*，因为它们都将值从一种数据类型转换为另一种数据类型，只有一个关键的区别——*强制类型转换*是隐式的，而*类型转换*可以是隐式的，*也*可以是显式的。 ## 示例 diff --git a/files/zh-cn/glossary/viewport/index.md b/files/zh-cn/glossary/viewport/index.md index 93d6e003a841d5..38ef3146840469 100644 --- a/files/zh-cn/glossary/viewport/index.md +++ b/files/zh-cn/glossary/viewport/index.md @@ -9,7 +9,7 @@ l10n: 在电脑图形学里面，视口代表了一个可看见的多边形区域（通常来说是矩形）。在浏览器范畴里，它代表的是浏览器中网站可见内容的部分。视口外的内容在被滚动进来前都是不可见的。 -视口当前可见的部分叫做[**可视视口**](/zh-CN/docs/Glossary/Visual_viewport)。可视视口可能会比[**布局视口**](/zh-CN/docs/Glossary/Layout_viewport)更小，因为当用户缩小浏览器缩放比例时，布局视口不变，而可视视口变小了。 +视口当前可见的部分叫做[**可视视口**](/zh-CN/docs/Glossary/Visual_Viewport)。可视视口可能会比[**布局视口**](/zh-CN/docs/Glossary/Layout_viewport)更小，因为当用户缩小浏览器缩放比例时，布局视口不变，而可视视口变小了。 ## 参见 diff --git a/files/zh-cn/learn/accessibility/css_and_javascript/index.md b/files/zh-cn/learn/accessibility/css_and_javascript/index.md index d6340c0df30316..4203246b551cb4 100644 --- a/files/zh-cn/learn/accessibility/css_and_javascript/index.md +++ b/files/zh-cn/learn/accessibility/css_and_javascript/index.md @@ -170,7 +170,7 @@ a:active { ``` -你可以在我们的 [form-css.html](https://github.com/mdn/learning-area/blob/main/accessibility/css/form-css.html) 示例中看到一些很好的示例 CSS（[查看示例](http://mdn.github.io/learning-area/accessibility/css/form-css.html)）。 +你可以在我们的 [form-css.html](https://github.com/mdn/learning-area/blob/main/accessibility/css/form-css.html) 示例中看到一些很好的示例 CSS（[查看示例](https://mdn.github.io/learning-area/accessibility/css/form-css.html)）。 你将为表单编写的大多数 CSS 将用于调整元素大小、排列标签和输入，以及让它们看起来整洁。 @@ -180,7 +180,7 @@ a:active { 用于显示表格数据的表。 -你可以在 [table-css.html](https://github.com/mdn/learning-area/blob/main/accessibility/css/table-css.html) 示例中看到表 HTML 和 CSS 的一个很好的简单示例（[查看示例](http://mdn.github.io/learning-area/accessibility/css/table-css.html)）。 +你可以在 [table-css.html](https://github.com/mdn/learning-area/blob/main/accessibility/css/table-css.html) 示例中看到表 HTML 和 CSS 的一个很好的简单示例（[查看示例](https://mdn.github.io/learning-area/accessibility/css/table-css.html)）。 表的 CSS 通常使表更适合你的设计，看起来不那么难看。最好确保表标题醒目（通常使用粗体），并使用斑马条带化使不同的行更易于解析。 @@ -197,7 +197,7 @@ a:active { ### 隐藏的东西 -在很多情况下，可视化设计需要并非同时显示所有内容。例如，在我们的 [Tabbed info box 示例](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html)（参见[源码](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html)），我们有三个信息面板，但我们将它们放在彼此之上，并提供可以单击以显示每个选项卡的选项卡（也可以使用键盘——你也可以使用 Tab 和 Enter/Return 以选择它们）。 +在很多情况下，可视化设计需要并非同时显示所有内容。例如，在我们的 [Tabbed info box 示例](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html)（参见[源码](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html)），我们有三个信息面板，但我们将它们放在彼此之上，并提供可以单击以显示每个选项卡的选项卡（也可以使用键盘——你也可以使用 Tab 和 Enter/Return 以选择它们）。 ![](tabbed-info-box.png) @@ -205,7 +205,7 @@ a:active { 另一方面，不应使用 {{cssxref("visibility")}}`:hidden` 或 {{cssxref("display")}}`:none`，因为它们会隐藏屏幕阅读器中的内容。当然，除非你希望从屏幕阅读器中隐藏此内容，这是有充分理由的。 -> **备注：** [专为屏幕阅读器用户设计的不可见内容](http://webaim.org/techniques/css/invisiblecontent/)有围绕本主题的更多有用详细信息。 +> **备注：** [专为屏幕阅读器用户设计的不可见内容](https://webaim.org/techniques/css/invisiblecontent/)有围绕本主题的更多有用详细信息。 ### 接受用户覆盖样式 @@ -248,7 +248,7 @@ JavaScript 还可能会中断无障碍，具体取决于其使用方式。 - 提供客户端表单验证，它快速提醒用户表单条目出现的问题，而无需等待服务器检查数据。如果表单不可用，则窗口仍然有效，但验证速度可能较慢。 - 为 HTML5 ` @@ -210,7 +210,7 @@ the last one. 用表格布局网页是过去旧时代的遗迹 - 在“CSS”在浏览器中并不普遍被支持时，它们是有意义的，但是它们会为屏幕阅读器用户造成混淆，并且由于许多其他原因变得很糟糕（滥用表格，可能因此需要更多的标记，使设计更不灵活）。不要这样做！ -你可以通过将你之前的体验与 [更现代的网站结构示例](http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/) 进行比较，来验证这些声明，该示例如下所示： +你可以通过将你之前的体验与 [更现代的网站结构示例](https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/) 进行比较，来验证这些声明，该示例如下所示： ```html
@@ -246,7 +246,7 @@ the last one. 如果你使用屏幕阅读器阅读更现代的结构示例，则会看到布局标记不再会妨碍内容的读取。它在代码大小方面也更加精简和小巧，这意味着代码更容易维护，并且用户下载的带宽更少（特别适合慢速连接的用户）。 -创建布局时的另一个考虑因素是使用 HTML5 语义元素，如上例所示（请参阅[此内容部分](/zh-CN/docs/Web/HTML/Element#Content_sectioning)）——你只能使用嵌套的 {{htmlelement("div")}} 元素创建布局，但最好使用适当的分段元素包裹你的主导航（{{htmlelement("nav")}}），`footer`（{{htmlelement("footer")}}），重复内容单元（{{htmlelement("article")}}）等。这些为屏幕阅读器（和其他工具）提供额外的语义，为用户提供有关他们正在浏览的内容的额外信息（请参阅[屏幕阅读器支持的新的 HTML5 章节元素](https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/)，了解屏幕阅读器的支持是什么样的原理）。 +创建布局时的另一个考虑因素是使用 HTML5 语义元素，如上例所示（请参阅[此内容部分](/zh-CN/docs/Web/HTML/Element#content_sectioning)）——你只能使用嵌套的 {{htmlelement("div")}} 元素创建布局，但最好使用适当的分段元素包裹你的主导航（{{htmlelement("nav")}}），`footer`（{{htmlelement("footer")}}），重复内容单元（{{htmlelement("article")}}）等。这些为屏幕阅读器（和其他工具）提供额外的语义，为用户提供有关他们正在浏览的内容的额外信息（请参阅[屏幕阅读器支持的新的 HTML5 章节元素](https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/)，了解屏幕阅读器的支持是什么样的原理）。 > [!NOTE] > 除了你的内容具有良好的语义和有吸引力的布局之外，它的源代码顺序应该是合理的 - 你可以随时将它放在你想要使用 CSS 的位置，但是你应该先从源代码开始，如此这样，屏幕阅读器读取给他们的内容将会非常便于理解。 @@ -255,7 +255,7 @@ the last one. 通过 UI 控件，我们指的是与用户交互的 Web 文档的主要部分 - 通常是按钮，链接和表单控件。在本节中，我们将介绍创建此类控件时要注意的基本无障碍问题。稍后关于 WAI-ARIA 和多媒体的文章将着眼于 UI 无障碍的其他方面。 -UI 控件无障碍的一个关键方面是，默认情况下，浏览器允许用户通过键盘操作它们。你可以使用我们的 [native-keyboard-accessibility.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) 示例（请参阅 [源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) ）。尝试此操作 - 在新选项卡中打开此项，然后尝试按 Tab 键; 几次按下后，你应该看到标签焦点开始移动到不同的元素; 在每个浏览器中，获得焦点元素都会有一个“突出显示“的默认样式（它在不同浏览器之间略有不同），以便你可以确定当前哪些元素获得焦点。 +UI 控件无障碍的一个关键方面是，默认情况下，浏览器允许用户通过键盘操作它们。你可以使用我们的 [native-keyboard-accessibility.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) 示例（请参阅 [源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) ）。尝试此操作 - 在新选项卡中打开此项，然后尝试按 Tab 键; 几次按下后，你应该看到标签焦点开始移动到不同的元素; 在每个浏览器中，获得焦点元素都会有一个“突出显示“的默认样式（它在不同浏览器之间略有不同），以便你可以确定当前哪些元素获得焦点。 ![](button-focused-unfocused.png) @@ -321,7 +321,7 @@ UI 控件无障碍的一个关键方面是，默认情况下，浏览器允许 #### 重新建立键盘的无障碍 -重新添加这些优点需要一些工作（你可以在我们的 [fake-div-buttons.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) 示例中使用示例代码 - 另请参阅 [源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) ）。在这里，我们通过赋予每个 `
` 按钮属性`tabindex =“0”` 来使它能够被聚焦（包括通过选项卡）： +重新添加这些优点需要一些工作（你可以在我们的 [fake-div-buttons.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) 示例中使用示例代码 - 另请参阅 [源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) ）。在这里，我们通过赋予每个 `
` 按钮属性`tabindex =“0”` 来使它能够被聚焦（包括通过选项卡）： ```html
Click me!
@@ -409,7 +409,7 @@ Fill in your name: 作为额外的好处，在大多数将标签与表单输入相关联的浏览器中，你可以单击标签来 选择/激活 表单元素。这给输入一个更大的可选中区域，使其更容易选择。 > [!NOTE] -> 你可以在 [good-form.html](http://mdn.github.io/learning-area/accessibility/html/good-form.html) 和 [bad-form.html](http://mdn.github.io/learning-area/accessibility/html/bad-form.html) 中看到一些好的和不好的表单示例。 +> 你可以在 [good-form.html](https://mdn.github.io/learning-area/accessibility/html/good-form.html) 和 [bad-form.html](https://mdn.github.io/learning-area/accessibility/html/bad-form.html) 中看到一些好的和不好的表单示例。 ## 无障碍数据表格 @@ -440,7 +440,7 @@ Fill in your name:
``` -但是这有问题 - 屏幕阅读器用户无法将行或列作为数据分组关联在一起。要做到这一点，你需要知道标题行是什么，以及它们是否在行，列等标题上。这只能在上面的表中以可视化方式完成（参见 [bad-table.html](http://mdn.github.io/learning-area/accessibility/html/bad-table.html) ，并自己尝试这个例子）。 +但是这有问题 - 屏幕阅读器用户无法将行或列作为数据分组关联在一起。要做到这一点，你需要知道标题行是什么，以及它们是否在行，列等标题上。这只能在上面的表中以可视化方式完成（参见 [bad-table.html](https://mdn.github.io/learning-area/accessibility/html/bad-table.html) ，并自己尝试这个例子）。 现在看看我们的 [punk bands table example](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html) - 你可以在这里看到一些辅助工具（accessibility aids）： @@ -454,7 +454,7 @@ Fill in your name: 尽管文本内容本身是可访问的，但对于多媒体内容而言也不一定是这样 - 图像/视频内容不能被视觉障碍人士看到，并且听觉障碍人士不能听到音频内容。稍后我们将在可访问多媒体文章中详细介绍视频和音频内容，但对于本文，我们将探讨低微（humble）的 `{{htmlelement("img")}}` 元素的无障碍。 -我们编写了一个简单的例子， [accessible-image.html](http://mdn.github.io/learning-area/accessibility/html/accessible-image.html) ，它具有相同图像的四个副本： +我们编写了一个简单的例子， [accessible-image.html](https://mdn.github.io/learning-area/accessibility/html/accessible-image.html) ，它具有相同图像的四个副本： ```html diff --git a/files/zh-cn/learn/accessibility/multimedia/index.md b/files/zh-cn/learn/accessibility/multimedia/index.md index 2d6b04b9518565..b4afb507f22835 100644 --- a/files/zh-cn/learn/accessibility/multimedia/index.md +++ b/files/zh-cn/learn/accessibility/multimedia/index.md @@ -52,7 +52,7 @@ slug: Learn/Accessibility/Multimedia ### 本地 HTML5 控件的问题 -HTML5 视频和音频实例甚至附带一组内置控件，允许你直接在盒子控制媒体。例如 (请参阅[本地控件.html](om/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html) 源代码和[实时演示](http://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html)): +HTML5 视频和音频实例甚至附带一组内置控件，允许你直接在盒子控制媒体。例如 (请参阅[本地控件.html](om/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html) 源代码和[实时演示](https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html)): ```html