diff options
Diffstat (limited to 'files/ru/games')
3 files changed, 33 insertions, 33 deletions
diff --git a/files/ru/games/anatomy/index.html b/files/ru/games/anatomy/index.html index b3022fa527..019b6276ab 100644 --- a/files/ru/games/anatomy/index.html +++ b/files/ru/games/anatomy/index.html @@ -32,7 +32,7 @@ original_slug: Games/Анатомия <p>Некоторый код должен выполняться кадр за кадром, так зачем же прикреплять эту функцию к чему-то другому, кроме графика перерисовки браузера? В Web, <code>{{ domxref("window.requestAnimationFrame()") }}</code> будет основой большинства хорошо запрограммированных покадровых основных циклов. Callback функция должна быть передана ему при вызове. Callback функция будет выполнена в подходящее время перед следующей перерисовкой. Вот пример простого основного цикла:</p> -<pre class="brush: js notranslate">window.main = function () { +<pre class="brush: js">window.main = function () { window.requestAnimationFrame( main ); // Код, который цикл должен выполнить @@ -56,7 +56,7 @@ main(); // Start the cycle</pre> <p>У нашего цикла есть две очевидные проблемы: <code>main()</code> загрязняет <code>{{ domxref("window") }}</code> объект (в нем хранятся все глобальные переменные) и код не оставляет нам возможность остановить цикл, если только вся вкладка не будет закрыта или обновлена. Для решения первой проблемы, если нужно, чтобы основной цикл просто выполнялся и вам не нужен лёгкий (прямой) доступ к нему, вы можете поместить его внутрь самовызывающейся Function Expression (IIFE).</p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить, * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало @@ -81,7 +81,7 @@ main(); // Start the cycle</pre> <p>Чтобы остановить основной цикл, вам понадобиться отменить вызов <code>main()</code> с помощью <code>{{ domxref("window.cancelAnimationFrame()") }}</code>. Необходимо передать в <code>cancelAnimationFrame()</code> идентификатор последнего вызова <code>requestAnimationFrame()</code>. Давайте предположим, что функции и переменные вашей игры были определены в пространстве имён, которое вы назвали <code>MyGame</code>. В таком случае, основной цикл будет выглядеть следующим образом:</p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить, * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало @@ -102,7 +102,7 @@ main(); // Start the cycle</pre> <p>Теперь у нас есть переменная <code>stopMain</code>, объявленная в нашем пространстве имён <code>MyGame</code>, которая содержит идентификатор последнего вызова <code>requestAnimationFrame()</code> нашего основного цикла. В любой момент мы может остановить основной цикл, сказав браузеру, чтобы тот отменил запрос, соответствующий последнему маркеру.</p> -<pre class="brush: js notranslate">window.cancelAnimationFrame( MyGame.stopMain );</pre> +<pre class="brush: js">window.cancelAnimationFrame( MyGame.stopMain );</pre> <p>Ключ к программированию основного цикла в JavaScript заключается в том, чтобы прикрепить его к любому событию, которое должно управлять вашими действиями, и обращать внимание на то, как различные системы участвуют во взаимодействии. У вас может быть несколько компонентов, управляемых несколькими различными типами событий. Это может показаться излишним усложнением, но также может быть просто хорошей оптимизацией (не обязательно, конечно). Проблема в том, что вы не выстраиваете типичный основной цикл. В JavaScript вы используйте основной цикл браузера и стараетесь сделать это эффективно. </p> @@ -131,12 +131,12 @@ main(); // Start the cycle</pre> <p>Это значение нельзя использовать само по себе, потому что оно относиться к неинтересному событию, но его можно вычесть из другой временной ветки, чтобы чётко и точно определить, сколько времени прошло между этими двумя точками. Чтобы получить одну из этих временных меток, вы можете вызвать <code>window.performance.now()</code> и сохранить результат в переменную. </p> -<pre class="brush: js notranslate">var tNow = window.performance.now(); +<pre class="brush: js">var tNow = window.performance.now(); </pre> <p>Возвращаемся к основному циклу. Часто вам понадобиться узнать, когда ваша основная функция была вызвана. Это обычное дело, <code>window.requestAnimationFrame()</code> при выполнении всегда предоставляет метку <code>DOMHighResTimeStamp</code> в качестве аргумента для колбэк-функций. Это приводит к очередному улучшению нашего основного цикла. </p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить, * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало @@ -172,7 +172,7 @@ main(); // Start the cycle</pre> <p>If your game can hit the maximum refresh rate of any hardware you support then your job is fairly easy. You can simply update, render, and then do nothing until VSync.</p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* * Starting with the semicolon is in case whatever line of code above this example * relied on automatic semicolon insertion (ASI). The browser could accidentally * think this whole example continues from the previous line. The leading semicolon @@ -244,7 +244,7 @@ main(); // Start the cycle</pre> <p><strong>Note:</strong> This example, specifically, is in need of technical review.</p> </div> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* * Starting with the semicolon is in case whatever line of code above this example * relied on automatic semicolon insertion (ASI). The browser could accidentally * think this whole example continues from the previous line. The leading semicolon diff --git a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html index 8c89ecc871..da8c8b434c 100644 --- a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html +++ b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html @@ -31,7 +31,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr <p>Здесь находится HTML структура, которую мы будем использовать:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -60,7 +60,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr <p>Renderer это инструмент для отрисовки сцены в браузере. Есть 2 вида таких инструментов: WebGL по умолчанию, другие - Canvas, SVG, CSS, и DOM. Они различаются по тому как все рендерится. Несмотря на различия в них, для пользователя все будет выглядеть одинаково. Поэтому, вы можете выбрать запасной вариант на случай, если браузер пользователя не поддерживает выбранную вами технологию.</p> -<pre class="brush: js notranslate">var renderer = new THREE.WebGLRenderer({antialias:true}); +<pre class="brush: js">var renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(WIDTH, HEIGHT); renderer.setClearColor(0xDDDDDD, 1); document.body.appendChild(renderer.domElement); @@ -74,7 +74,7 @@ document.body.appendChild(renderer.domElement); <p>Сцена (scene) это место, где все происходит. Когда создаются новые объекты, они добавляются в сцену, чтобы их можно было увидеть. В three.js роль сцены выполняет объект <code>Scene</code>. Давайте создадим его, добавив следующих код:</p> -<pre class="brush: js notranslate">var scene = new THREE.Scene(); +<pre class="brush: js">var scene = new THREE.Scene(); </pre> <p>Позже, мы будем использовать метод <code>.add()</code> для добавления объектов в сцену.</p> @@ -83,7 +83,7 @@ document.body.appendChild(renderer.domElement); <p>У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим её позицию в координатной системе и направим её на нужную нам точку, где расположено то, что мы хотим видеть:</p> -<pre class="brush: js notranslate">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT); +<pre class="brush: js">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT); camera.position.z = 50; scene.add(camera); </pre> @@ -108,7 +108,7 @@ scene.add(camera); <p>Всё уже готово, но мы пока что ничего не видим. Хотя мы настроили рендерер, нам всё равно нужно запустить рендеринг. Функция <code>render()</code> выполнит эту работу с небольшой помощью <code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>, которая заставляет сцену постоянно перерисовываться в каждом кадре:</p> -<pre class="brush: js notranslate">function render() { +<pre class="brush: js">function render() { requestAnimationFrame(render); renderer.render(scene, camera); } @@ -123,7 +123,7 @@ render(); <p>Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the <code>render()</code> function:</p> -<pre class="brush: js notranslate">var boxGeometry = new THREE.BoxGeometry(10, 10, 10); +<pre class="brush: js">var boxGeometry = new THREE.BoxGeometry(10, 10, 10); </pre> <p>In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.</p> @@ -132,7 +132,7 @@ render(); <p>A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough:</p> -<pre class="brush: js notranslate">var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); +<pre class="brush: js">var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); </pre> <p>Add this line below the previously added.</p> @@ -143,7 +143,7 @@ render(); <p>To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face:</p> -<pre class="brush: js notranslate">var cube = new THREE.Mesh(boxGeometry, basicMaterial); +<pre class="brush: js">var cube = new THREE.Mesh(boxGeometry, basicMaterial); </pre> <p>Again, add this line below the one you previously added.</p> @@ -152,12 +152,12 @@ render(); <p>Сейчас мы создали куб, используя 'geometry' и 'material'. Последнее, что мы должны сделать - добавить куб на сцену. Добавьте в код эту строку:</p> -<pre class="brush: js notranslate">scene.add(cube); +<pre class="brush: js">scene.add(cube); </pre> <p>Если вы сохраните код и обновите вкладку браузера, вы увидите квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У объектов есть полезное свойство - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Что давайте немного повернём его, чтобы видеть больше сторон. Добавить в конец кода эту строку:</p> -<pre class="brush: js notranslate">cube.rotation.set(0.4, 0.2, 0); +<pre class="brush: js">cube.rotation.set(0.4, 0.2, 0); </pre> <p>Поздравляю, вы создали объект в 3D-среде! This might have proven easier than you first thought? Here's how it should look:</p> @@ -174,12 +174,12 @@ render(); <p>Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one:</p> -<pre class="brush: js notranslate">cube.position.x = -25; +<pre class="brush: js">cube.position.x = -25; </pre> <p>Now onto more shapes and materials. What might you input to add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube.</p> -<pre class="brush: js notranslate">var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12); +<pre class="brush: js">var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12); var phongMaterial = new THREE.MeshPhongMaterial({color: 0xFF9500}); var torus = new THREE.Mesh(torusGeometry, phongMaterial); scene.add(torus); @@ -189,7 +189,7 @@ scene.add(torus); <p>We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus:</p> -<pre class="brush: js notranslate">var dodecahedronGeometry = new THREE.DodecahedronGeometry(7); +<pre class="brush: js">var dodecahedronGeometry = new THREE.DodecahedronGeometry(7); var lambertMaterial = new THREE.MeshLambertMaterial({color: 0xEAEFF2}); var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial); dodecahedron.position.x = 25; @@ -204,7 +204,7 @@ scene.add(dodecahedron); <p>There are various types of light sources available in Three.js. The most basic is <code>PointLight</code>, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:</p> -<pre class="brush: js notranslate">var light = new THREE.PointLight(0xFFFFFF); +<pre class="brush: js">var light = new THREE.PointLight(0xFFFFFF); light.position.set(-10, 15, 50); scene.add(light); </pre> @@ -223,7 +223,7 @@ scene.add(light); <p>Вращать фигуры просто. Вы просто добавляете или отнимаете значение по оси вращения. Добавьте эту строку кода сразу после: <code>requestAnimationFrame()</code> invocation inside the <code>render</code> function:</p> -<pre class="brush: js notranslate">cube.rotation.y += 0.01; +<pre class="brush: js">cube.rotation.y += 0.01; </pre> <p>This rotates the cube on every frame, by a tiny bit, so the animation looks smooth.</p> @@ -232,12 +232,12 @@ scene.add(light); <p>We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called <code>t,</code> for counting elapsed time. Add it right before the <code>render()</code> function:</p> -<pre class="brush: js notranslate">var t = 0; +<pre class="brush: js">var t = 0; </pre> <p>Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the <code>requestAnimationFrame()</code> invocation:</p> -<pre class="brush: js notranslate">t += 0.01; +<pre class="brush: js">t += 0.01; torus.scale.y = Math.abs(Math.sin(t)); </pre> @@ -249,7 +249,7 @@ torus.scale.y = Math.abs(Math.sin(t)); <p>Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our <code>requestAnimationFrame()</code> invocation:</p> -<pre class="brush: js notranslate">dodecahedron.position.y = -7*Math.sin(t*2); +<pre class="brush: js">dodecahedron.position.y = -7*Math.sin(t*2); </pre> <p>This will move the dodecahedron up and down, by applying the <code>sin()</code> value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations.</p> diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html index b01d6bf0ac..e4602cb279 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html @@ -20,7 +20,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser <p>Добавьте следующие переменные сразу после всех наших текущих определений переменных:</p> -<pre class="brush: js notranslate">var lives = 3; +<pre class="brush: js">var lives = 3; var livesText; var lifeLostText; </pre> @@ -31,7 +31,7 @@ var lifeLostText; <p>Надписи мы уже определяли, когда реализовывали систему <a href="https://developer.mozilla.org/ru/docs/Games/Tutorials/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_2D_Breakout_%D0%B8%D0%B3%D1%80%D1%8B_%D0%BD%D0%B0_Phaser/%D0%9E%D1%87%D0%BA%D0%B8">очков</a>. Добавьте следующие строки кода в после определения надписи <code>scoreText</code> в функции <code>create()</code>:</p> -<pre class="brush: js notranslate">livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, { font: '18px Arial', fill: '#0095DD' }); +<pre class="brush: js">livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, { font: '18px Arial', fill: '#0095DD' }); livesText.anchor.set(1,0); lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', { font: '18px Arial', fill: '#0095DD' }); lifeLostText.anchor.set(0.5); @@ -46,12 +46,12 @@ lifeLostText.visible = false; <p>Как вы могли заметить, мы используем одинаковые стили для всех надписей: <code>scoreText</code>, <code>livesText</code> и <code>lifeLostText</code>. Однако, налицо копирование кода и если мы, когда-либо, захотим изменить размер шрифта или цвет, то нам придётся делать это в нескольких местах. Чтобы избежать этого, мы вынесем стиль в отдельную переменную. Напишите следующую строку сразу после всех наших текущих определений переменных:</p> -<pre class="brush: js notranslate">var textStyle = { font: '18px Arial', fill: '#0095DD' }; +<pre class="brush: js">var textStyle = { font: '18px Arial', fill: '#0095DD' }; </pre> <p>Теперь мы можем использовать эту переменную для нашего текста — обновите ваш код и замените повторяющиеся участки со стилем текста на переменную.</p> -<pre class="brush: js notranslate">scoreText = game.add.text(5, 5, 'Points: 0', textStyle); +<pre class="brush: js">scoreText = game.add.text(5, 5, 'Points: 0', textStyle); livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, textStyle); livesText.anchor.set(1,0); lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', textStyle); @@ -65,7 +65,7 @@ lifeLostText.visible = false; <p>Чтобы реализовать жизнь в нашей игре, давайте сначала изменим функцию шара, связанную с событием <code>onOutOfBounds</code>. Вместо того, чтобы выполнять анонимную функцию и сразу показывать сообщение:</p> -<pre class="brush: js notranslate"><s>ball.events.onOutOfBounds.add(function(){ +<pre class="brush: js"><s>ball.events.onOutOfBounds.add(function(){ alert('Game over!'); location.reload(); }, this);</s> @@ -73,12 +73,12 @@ lifeLostText.visible = false; <p>Мы объявим новую функцию <code>ballLeaveScreen</code>; Удалим предыдущий обработчик (зачёркнутый код сверху) и заменим его следующей линией:</p> -<pre class="brush: js notranslate">ball.events.onOutOfBounds.add(ballLeaveScreen, this); +<pre class="brush: js">ball.events.onOutOfBounds.add(ballLeaveScreen, this); </pre> <p>Мы будем уменьшать количество жизней каждый раз, когда шар выйдет за пределы окна Canvas. Добавьте функцию <code>ballLeaveScreen()</code> в конец кода:</p> -<pre class="brush: js notranslate">function ballLeaveScreen() { +<pre class="brush: js">function ballLeaveScreen() { lives--; if(lives) { livesText.setText('Lives: '+lives); |