С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.55/11: Рейтинг темы: голосов - 11, средняя оценка - 4.55
8Observer8
2329 / 1488 / 248
Регистрация: 05.10.2013
Сообщений: 4,656
Записей в блоге: 59
1

Ваша первая игра на JavaScript и Phaser (тема-обсуждение)

26.09.2016, 22:27. Просмотров 1895. Ответов 13
Метки нет (Все метки)

 Комментарий модератора 
Тема для обсуждения темы Ваша первая игра на JavaScript и Phaser (перевод)


Ну смотрите, мы можете использовать любые библиотеки или же рисовать с помощью символов в теле документа и на элементе canvas в контексте рисования "2d" или "webgl". Но если вы хотите, чтобы я переводил и объяснял каждую строчку этого туториала, то мне нужно сначала получить две таких ссылки от вас, перейдите по ним:
Код
https://8observer8.github.io/Phaser/Snake/
https://github.com/8Observer8/8observer8.github.io/tree/master/Phaser/Snake
Добавлено через 11 часов 24 минуты
Я продолжу переводить эту пошаговую инструкцию Making Your First HTML5 Game With Phaser

Может автору темы потом это пригодится или хотя бы кому-нибудь. Мне точно это полезно. Я давно хотел научиться писать змейку на JavaScript.

Создание вашей первой игры на HTML5

Все любят классические игры. Многие же из вас помнят ретро игру "змейка" на старых Nokia? Мы уверены, что многие. Поэтому мы решили сделать "змейку", используя HTML5. Есть такой великолепный фреймворк с открытым исходным кодом для разработки игры под названием Phaser. Его мы и будем использовать.

Мы будем изучать спрайты, состояния игры, что такое и как использовать методы: preload(), create(), update(). Так будет выглядеть наша игра: играть

Установка

Скачайте .zip архив с рисунками и с пустыми файлами кода здесь. Код мы напишем позже. Папки и файлы отражают структуру нашего проекта.

Откройте index.html, напишите название игры в теле тега <title> и подключите скрипты из папки "assets/js/". Позже, чтобы играть вам нужно будет всего лишь открыть index.html в браузере.

Сейчас ваша рабочая директория должна выглядеть так:



Как организована игра

Игры, которые используют Phaser организованы вокруг состояний. Представляйте состояния, как разные части вашей игры.

Это состояния нашей игры:
  • Состояние "Меню". Управляется скриптом menu.js. Это состояние отображает рисунок стартового меню. Когда пользователь кликнет по стартовому рисунку, то состояние "Меню" перейдёт в состояние "Игра"
  • Состояние "Игра". Управляется скриптом game.js. Здесь непосредственно происходит игра. Вы управляете змейкой, едите яблоки и просто получаете радость от процесса. Когда змейка умирает, то состояние "Игра" переходит в состояние "Game_Over"
  • Состояние "Game_Over". Это состояние показывает рисунок "gameover.png" и показывает сколько вы набрали очков. Когда вы кликните, то произойдёт переход в состояние "Игра"

main.js - это наш самый главный скрипт. В этом скрипте мы сейчас создадим объект game и добавим наше первое состояние "Меню"

1. Загрузка изображения
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
26.09.2016, 22:27
Ответы с готовыми решениями:

Ваша первая игра на JavaScript и Phaser (перевод)
Ваша первая игра на JavaScript и Phaser (перевод) Источник Запустить...

Первая ли книга как первая для JavaScript?
]Здравствуйте, хотел бы изучить JavaScript. Мои знания на данный момент:...

Игра Арканоид на JavaScript
Добрый день, проблема с созданием игры арканоид. Все было-бы хорошо если бы не...

Игра на JavaScript (ваш совет)
Здравствуйте. Хочется создать простенькую игру на джава скрипт. В ней будет...

Starcraft: тема-обсуждение
Я вот тоже этого боюсь... Хотя старкрафт 2 beta вроде не разочаровал....

13
8Observer8
2329 / 1488 / 248
Регистрация: 05.10.2013
Сообщений: 4,656
Записей в блоге: 59
26.09.2016, 22:57  [ТС] 2
Цитата Сообщение от 8Observer8 Посмотреть сообщение
Откройте index.html, напишите название игры в теле тега <title> и подключите скрипты из папки "assets/js/".
После этих слов нужно было привести содержимое index.html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Snake</title>
    <script src="assets/js/phaser.min.js"></script>
    <script src="assets/js/menu.js"></script>
    <script src="assets/js/game.js"></script>
    <script src="assets/js/game_over.js"></script>
    <script src="assets/js/main.js"></script>
</head>
<body>
    
</body>
</html>
0
Padimanskas
Superposition
935 / 602 / 256
Регистрация: 27.10.2013
Сообщений: 2,071
27.09.2016, 00:19 3
8Observer8, нафига весь двиг фазера для одной змейки? игра состоит всего из трех объектов и игрового цикла. Лучше возьми pixi для рендера из этого фазера и пиши логику сам, а иначе какой это программист если такую ерунду на между делом ваяют студенты первого курса или школьники за пару часов? разве что переводчик какой-то лажи, не более.
0
8Observer8
2329 / 1488 / 248
Регистрация: 05.10.2013
Сообщений: 4,656
Записей в блоге: 59
27.09.2016, 00:36  [ТС] 4
Цитата Сообщение от Padimanskas Посмотреть сообщение
нафига весь двиг фазера для одной змейки?
Потому что я его начал изучать. Я бы мог, конечно, предложить писать на WebGL с применением шейдеров на GLSL, но подумал, что будет сложновато объяснять автору темы. Сам я писал змейку на OpenGL + GLSL и С++. Ещё проще было бы делать на Unity 2D, вот такая есть пошаговая инструкция: Unity 2D Snake Tutorial, всего пару десятков строк кода и Unity используется только для рендера, но там C#. Сам я прошёл все туторы оттуда, их там 21 штука. Либо так же перспективно можно было бы использовать 3D библиотеку babylon.js. 3D змейка смотрится гораздо круче, чем 2D. Phaser - это не такой же большой размер библиотеки. Всего 700 КБайт. По сравнению со сборкой Unity WebGL, которая почти на 6 МБайт. Phaser самый популярный фреймворк для браузерных. На нём можно развивать змейку, и другие жанры. Создавать приложения для vk. Много предложений работы по нему. Так что я думаю это отличный выбор.
Цитата Сообщение от Padimanskas Посмотреть сообщение
ваяют студенты первого курса или школьники за пару часов?
Я думаю, что автор темы не настолько крут. Хотя попробуйте ему объяснить, как это сделать.
0
8Observer8
2329 / 1488 / 248
Регистрация: 05.10.2013
Сообщений: 4,656
Записей в блоге: 59
27.09.2016, 00:46  [ТС] 5
1. Загрузка изображения
К настоящему моменту наша игра не делает ничего. Давайте добавим состояние "Меню" и сделаем чтобы оно отображало изображение с заголовком игры.

В разделе "Установка" мы подключили скрипт phaser.js в нашем файле index.html, поэтому нам доступен глобальный объект Phaser, с помощью которого мы можем получать доступ к функциям и методам библиотеки phaser.js

Сейчас мы, используя глобальный объект Phaser, создадим объект game. Этот объект представляет всю нашу игру. Мы будем добавлять состояния к этому объекту.

main.js

Javascript
1
2
3
4
5
6
7
8
9
10
var game;
 
// Создание объекта game (600 пикселей в ширину и 450 пикселей в высоту)
game = new Phaser.Game(600, 500, Phaser.AUTO, '');
 
// Первый параметр - название нашего состояния
// Второй параметр - объект, который будет хранить методы нашего состояния
game.state.add('Menu', Menu);
 
game.state.start('Menu');
Теперь нам нужно создать и инициализировать объект Menu (который мы задействовали в скрипте выше). Откройте скрипт menu.js и добавьте объект Menu и методы для него (смотрите листинг ниже).

menu.js

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var Menu =
    {
        preload: function ()
        {
            // Загрузка изображения, которое нам
            // будет необходимо позже для создания спрайта
            // Первый аргумент - название, по которому мы будем обращаться к
            // изображению
            // Второй аргумент - путь к файлу изображения
            game.load.image('menu', './assets/images/menu.png');
        },
 
        create: function ()
        {
            // Создаём и добавляем спрайт в нашу игру. Спрайтом будет
            // игровой лого для меню
            // Аргументы: X, Y, имя изображения (см. выше)
            this.add.sprite(0, 0, 'menu');
        }
    };
Когда состояние Меню запустится (команда game.state.start('Menu')), то первым делом выполнится тело функции preload, которая загрузит все необходимые ассеты (ассеты - это изображения, звуки, музыка и т.д.). Как только функция preload закончит свою работу, то начнёт выполнятся функция create. В теле функции create должен располагаться код, который инициализирует игру (например, расставляет картинки по требуемым местам). В данном случае, create располагает стартовое изображение меню в координате (0, 0)

От переводчика:
Отступление. Начало координат игры располагается в левом верхнем углу области рисования. Ось X направлена вправо, а ось Y направлена вниз. По умолчанию якорная точка изображения располагается в левом верхнем углу изображения. Эту точку можно менять с помощью метода anchor.setTo, например, установить на якорную точку на середину изображения: this.obj.anchor.setTo(0.5, 0.5); Изображения, которые располагаются в игровом мире называют спрайтами.

Из-за ограничения безопасности браузера мы не можем загружать изображения с локального диска. Простыми словами, мы не можем просто кликнуть два раза по index.html и запустить игру. Поэтому запускать игру нужно с локального сервера, например, из среды Visual Studio, которая автоматически запустит локальный сервер IIS.

Если всё было сделано правильно, то стартовое изображение должно появится в вашем браузере:
0
Миниатюры
Ваша первая игра на JavaScript и Phaser (тема-обсуждение)  
8Observer8
2329 / 1488 / 248
Регистрация: 05.10.2013
Сообщений: 4,656
Записей в блоге: 59
27.09.2016, 12:03  [ТС] 6
Цитата Сообщение от Padimanskas Посмотреть сообщение
школьники за пару часов
Да, сейчас школьники очень продвинутые пошли. Я недавно узнал, что школьник написал многопользовательскую игру World of Sea Battle за 3 года. Начал он писать её в 8 классе, а в 11 игра уже была готова. Он даже все модели создавал сам в Maya. Ну и конечно, он принципиально писал с нуля на C++, C#, HLSL (это язык шейдеров для DirectX). Вот его интервью: World of Sea Battle Интервью с разработчиком

Кликните здесь для просмотра всего текста


Сейчас любой школьник при желании может написать такую приличную игру, что очень радует. Будут они зарабатывать более $3000. У меня есть знакомый фрилансер, который зарабатывает более $3500 удалённо, работая в нескольких иностранных компаниях (а сам живёт в тёплых странах), а кто-то вроде меня зарабатывает меньше $1000. Всё справедливо. Мозги у всех разные.

Цитата Сообщение от Padimanskas Посмотреть сообщение
нафига весь двиг фазера для одной змейки? игра состоит всего из трех объектов и игрового цикла. Лучше возьми pixi для рендера из этого фазера и пиши логику сам
А нафига тогда весь рендер на pixi для одной змейки? Нужно всего лишь отображать квадраты с картинками. Намного лучше для рендера взять WebGL. Напишу, когда закончу перевод статьи.

В подтверждение, что я не пустозвон, мой пример квадрата с текстурой на canvas, запустить: https://8observer8.github.io/TexturedQuad
Исходники примера: скачать

Здесь очень простые шейдеры.

Вертексный шейдер:
Код
    attribute vec4 a_Position;
    attribute vec2 a_TexCoord;
    varying vec2 v_TexCoord;
    void main()
    {
        gl_Position = a_Position;
        v_TexCoord = a_TexCoord;
    }
Фрагментный шейдер:
Код
    precision mediump float;
    uniform sampler2D u_Sampler;
    varying vec2 v_TexCoord;
    void main()
    {
        gl_FragColor = texture2D(u_Sampler, v_TexCoord);
    }
0
Миниатюры
Ваша первая игра на JavaScript и Phaser (тема-обсуждение)  
Вложения
Тип файла: zip TexturedQuad.zip (15.2 Кб, 3 просмотров)
8Observer8
2329 / 1488 / 248
Регистрация: 05.10.2013
Сообщений: 4,656
Записей в блоге: 59
27.09.2016, 17:42  [ТС] 7
2. Вывод змейки на экран

Как было упомянуто ранее, сам процесс игры происходит в состоянии "Игра". В этом же состоянии мы выводим змейку на экран. Так же как мы поступали с состоянием "Меню" ранее, мы должны зарегистрировать состояние "Игра":

main.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
var game;
 
// Создание объекта game (600 пикселей в ширину и 450 пикселей в высоту)
game = new Phaser.Game(600, 450, Phaser.AUTO, '');
 
// Первый параметр - название нашего состояния
// Второй параметр - объект, который будет хранить методы нашего состояния
game.state.add('Menu', Menu);
 
// Добавляем состояние "Игра"
game.state.add('Game', Game);
 
game.state.start('Menu');
Нужно добавить код в menu.js, который бы позволил перейти из состояния "Меню" в состояние "Игра" по клику мыши. Для этого мы заменим спрайт на главном меню кнопкой. Добавление кнопки очень похоже на добавление спрайта. Вам нужно лишь добавить функцию, которая будет вызываться, когда происходит клик мышью.

Это окончательный код скрипта menu.js:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var Menu =
    {
        preload: function ()
        {
            // Загрузка изображения, которое нам
            // будет необходимо позже для создания спрайта
            // Первый аргумент - название, по которому мы будем обращаться к
            // изображению
            // Второй аргумент - путь к файлу изображения
            game.load.image('menu', './assets/images/menu.png');
        },
 
        create: function ()
        {
            // Создаём и добавляем кнопку в нашу игру. Спрайтом будет
            // игровой лого для меню
            // Аргументы: X, Y, имя изображения (см. выше), функция обработки клика
            this.add.button(0, 0, 'menu', this.startGame, this);
        },
 
        startGame: function ()
        {
            // Меняем состояние "Меню" на состояние "Игра"
            this.state.start('Game');
        }
    };
Подключения скрипта game.js должно быть раньше, чем подключение скрипта menu.js, так как в скрипте game.js создаётся объект Game, который используется в скрипте menu.js для перехода из состояния "Меню" в состояние "Игра".

index.html
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Snake</title>
    <script src="assets/js/phaser.min.js"></script>
    <script src="assets/js/game.js"></script>
    <script src="assets/js/menu.js"></script>
    <script src="assets/js/game_over.js"></script>
    <script src="assets/js/main.js"></script>
</head>
<body>
 
</body>
</html>
Теперь мы продолжим писать код для состояния "Игра". Структура кода очень похожа на структуру из скрипта menu.js для состояния "Меню".

game.js

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
var snake, apple, squareSize, score, speed,
    updateDelay, direction, new_direction,
    addNew, cursors, scoreTextValue, speedTextValue,
    textStyle_Key, textStyle_Value;
 
var Game = {
 
    preload: function ()
    {
        // Здесь мы загружаем все необходимые ресурсы для уровня
        // В нашем случае, это просто два квадрата: один для тела змейки и другой для яблока
        game.load.image('snake', './assets/images/snake.png');
        game.load.image('apple', './assets/images/apple.png');
    },
 
    create: function ()
    {
        // Перед стартом игры, мы здесь инициализируем глобальные переменные, объявленные в начале файла
        // Мы сделали эти переменные глобальными, чтобы они были доступны в функции update
        snake = [];                     // Это работает как стек, хранящий части нашей змейки
        apple = {};                     // Объект для яблока
        squareSize = 15;                // Длина сторон всех наших квадратов (яблока и части для змейки). Наши изображения имеют размер 15x15 пикселей
        score = 0;                      // Игровые очки
        speed = 0;                      // Скорость движения змейки
        updateDelay = 0;                // Переменная для контроля за частотой обновления
        direction = 'right';            // Направление нашей змейки
        new_direction = null;           // Буфер для хранения нового направления
        addNew = false;                 // Переменная, которая показывает, что еда была съедена
 
        // Сообщить Phaser'у, что мы хотим использовать для управления клавиатуру (клавиши со стрелками)
        cursors = game.input.keyboard.createCursorKeys();
 
        game.stage.backgroundColor = '#061f27';
 
        // Генерируем начальный стек элементов змейки. Наша змейка будет иметь длину 10 элементов
        // Начинаем с позиции X=150 Y=150 и увеличиваем X на каждой итерации
        for (var i = 0; i < 10; i++)
        {
            // Параметры: координата X, координата Y, изображение
            snake[i] = game.add.sprite(150 + i * squareSize, 150, 'snake');
        }
 
        // Создаём первое яблоко
        this.generateApple();
 
        // Добавляем текст в верхнюю часть игры
        textStyle_Key = { font: "bold 14px sans-serif", fill: "#46c0f9", align: "center" };
        textStyle_Value = { font: "bold 18px sans-serif", fill: "#fff", align: "center" };
        // Игровые очки
        game.add.text(30, 20, "SCORE", textStyle_Key);
        scoreTextValue = game.add.text(90, 18, score.toString(), textStyle_Value);
        // Скорость змейки
        game.add.text(500, 20, "SPEED", textStyle_Key);
        speedTextValue = game.add.text(558, 18, speed.toString(), textStyle_Value);
    },
 
    update: function ()
    {
        // Функция update вызывается постоянно с высокой частотой (где-то около 60 кадров в секунду)
        // обновляя игровое поле
        // Мы пока оставим тело этой функции пустым
    },
 
    generateApple: function ()
    {
        // Выбираем случайное место на игровом поле
        // X между 0 и 585 (39*15)
        // Y между 0 и 435 (29*15)
        var randomX = Math.floor(Math.random() * 40) * squareSize,
            randomY = Math.floor(Math.random() * 30) * squareSize;
 
        // Добавляем новое яблоко
        apple = game.add.sprite(randomX, randomY, 'apple');
    }
};
Так должны сейчас выглядеть змейка, яблоко и вывод текста:
0
Миниатюры
Ваша первая игра на JavaScript и Phaser (тема-обсуждение)  
8Observer8
2329 / 1488 / 248
Регистрация: 05.10.2013
Сообщений: 4,656
Записей в блоге: 59
27.09.2016, 21:29  [ТС] 8
3. Движение и контроль

Для того, чтобы змейка двигалась нам нужно написать код в функции update скрипта game.js Мы создадим функции-обработчики нажатий клавиш стрелок.

Реализация движения немного сложновато для понимания на первый взгляд. Функция update срабатывает с очень высокой частотой (60 fps) и если мы будем перемещать змейку в каждом вызове функции update, то скорость змейки будет огромная. Для того, чтобы решить эту проблему мы напишем условие, которое будет определять, какой это вызов update по счёту. Например, мы может вызывать код передвижения только каждый 10-й вызов функции update. Для того чтобы узнать, какой это вызов по счёту, мы будем использовать переменную-счётчик updateDelay.

Если это 10-й вызов функции update, то мы удаляем последний квадрат нашей змейки (первый элемент в стеке), даём ему новые координаты, согласно текущему направлению и помещаем его перед головой змейки (на верх стека).

Так выглядит код:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
    update: function ()
    {
        // Обработчики нажания клавиш стрелок. Пока мы не проверяем изменения направлений, которые губительны для игрока
 
        if (cursors.right.isDown && direction != 'left')
        {
            new_direction = 'right';
        }
        else if (cursors.left.isDown && direction != 'right')
        {
            new_direction = 'left';
        }
        else if (cursors.up.isDown && direction != 'down')
        {
            new_direction = 'up';
        }
        else if (cursors.down.isDown && direction != 'up')
        {
            new_direction = 'down';
        }
 
        // Формула, которая вычисляет скорость, которая в свою очередь, базируется на очках
        // Наибольшая скорость может быть равна максимум 10-и
        speed = Math.min(10, Math.floor(score / 5));
        // Обновляем значение скорости на экране
        speedTextValue.text = '' + speed;
 
        // Так как функция update имеет частому вызова около 60 раз в секунд, то
        // нам нужно уменьшить скорость вызова кода перемещения змейки
 
        // Увеличиваем счётчик на единицу каждый вызов функции update
        updateDelay++;
 
        // Выполняем эту часть кода только если счётчик кратен значению (10 - скорость игры)
        // Do game stuff only if the counter is aliquot to (10 - the game speed).
        // Чем больше значение переменной speed, тем чаще вызывается этот код и тем быстрее движется змейка
        if (updateDelay % (10 - speed) == 0)
        {
            // Передвижение змейки
 
            var firstCell = snake[snake.length - 1],
                lastCell = snake.shift(),
                oldLastCellx = lastCell.x,
                oldLastCelly = lastCell.y;
 
            // Если новое направление было выбрано в обработчике нажатия клавиши, то меняем текущее направление змейки
            if (new_direction)
            {
                direction = new_direction;
                new_direction = null;
            }
 
            // Меняем координаты последней ячейки относительно головы змейки согласно направлению
            // То есть меняем координаты последней ячейки, чтобы эта ячейка оказалась перед головой змейки
 
            if (direction == 'right')
            {
                lastCell.x = firstCell.x + 15;
                lastCell.y = firstCell.y;
            }
            else if (direction == 'left')
            {
                lastCell.x = firstCell.x - 15;
                lastCell.y = firstCell.y;
            }
            else if (direction == 'up')
            {
                lastCell.x = firstCell.x;
                lastCell.y = firstCell.y - 15;
            }
            else if (direction == 'down')
            {
                lastCell.x = firstCell.x;
                lastCell.y = firstCell.y + 15;
            }
 
            // Помещаем последнюю ячейку наверх стека
            // Помечаем её, как первую ячейку
 
            snake.push(lastCell);
            firstCell = lastCell;
        }
Попробуйте управлять змейкой с помощью клавиш стрелок: запустить демо
0
Миниатюры
Ваша первая игра на JavaScript и Phaser (тема-обсуждение)  
8Observer8
2329 / 1488 / 248
Регистрация: 05.10.2013
Сообщений: 4,656
Записей в блоге: 59
28.09.2016, 17:40  [ТС] 9
tezaurismosis, я закончил! Выложу через несколько минут.
0
Вложения
Тип файла: zip Setup.zip (166.2 Кб, 4 просмотров)
Тип файла: zip FinalGame.zip (175.6 Кб, 16 просмотров)
Padimanskas
Superposition
935 / 602 / 256
Регистрация: 27.10.2013
Сообщений: 2,071
28.09.2016, 21:37 10
Цитата Сообщение от 8Observer8 Посмотреть сообщение
А нафига тогда весь рендер на pixi для одной змейки?
на минуту забудем про все шейдеры и трехмерку. предположим нужно рендерить исключительно спрайты и анимацию и не придумывать для этого какие-то велосипеды на квадратных колесах, вот по этой причине обычно используют только рендер. Логика snake очень простая, как я уже говорил ее можно описать в 60-70 строк. У фазера слишком большой калибр для такого рода вещей, тем более для учебного материала где могут появиться лишние вопросы.
0
8Observer8
2329 / 1488 / 248
Регистрация: 05.10.2013
Сообщений: 4,656
Записей в блоге: 59
29.09.2016, 07:07  [ТС] 11
Тем кто изучит этот тутор предлагаю не останавливаться на достигнутом и дальше развивать не только змейку, но и игры других жанров. Под тутором есть ссылки, что можно изучать дальше.

Добавлено через 6 часов 34 минуты
Padimanskas, скорее всего, вы толлить начали, но я всё-таки отвечу

Цитата Сообщение от Padimanskas Посмотреть сообщение
на минуту забудем про все шейдеры и трехмерку
Когда я написал про рендер квадратов на WebGL, я, конечно же, НЕ имел ввиду 3D. Тот же Phaser использует рендер на WebGL. Большинство 2D игр для ПК используют рендеры на OpenGL или DirectX. Для Android, например, используется OpenGL ES для рендера.

Цитата Сообщение от Padimanskas Посмотреть сообщение
предположим нужно рендерить исключительно спрайты и анимацию и не придумывать для этого какие-то велосипеды на квадратных колесах, вот по этой причине обычно используют только рендер.
Если мы говорим просто про рендер (canvas, псевдографику и т.д.) В змейке нет никакой спрайтовой анимации. Нужно просто уметь рисовать квадраты и стирать их - вот весь рендер. С этим прекрасно справился бы элемент canvas, который можно использовать в стандартном контексте рисования или в контексте рисования webgl. С pixi могло бы быть много вопросов. Он слишком избыточный. Phaser помог в переключении между состояниями, загрузке изображений и выводе текста на экран.

Цитата Сообщение от Padimanskas Посмотреть сообщение
У фазера слишком большой калибр для такого рода вещей, тем более для учебного материала где могут появиться лишние вопросы.
Цитата Сообщение от Padimanskas Посмотреть сообщение
Логика snake очень простая, как я уже говорил ее можно описать в 60-70 строк.
Я считаю, что Phaser подходит даже для учебных заданий очень хорошо. Потому что он берёт на себя: загрузку изображений, вывод текста, переключение между состояниями: меню -> игра -> game_over -> игра. Всю логику движения змейки и проверку на коллизии мы пишем сами.
0
8Observer8
2329 / 1488 / 248
Регистрация: 05.10.2013
Сообщений: 4,656
Записей в блоге: 59
30.09.2016, 11:12  [ТС] 12
Несколько слов по поводу логики змейки вообще и та что использовалась в этот туторе с применением Phaser. В этом туторе использовалась общая логика змейки. Здесь Phaser вы ступает в роли помощника для облегчения технических задач в плане переключения между меню -> игрой -> game_over

Логика змейки:
- координаты ячеек хранятся в массиве (или ссылки на сами ячейки)
- у змейки есть переменная, которая хранит направление: direction
- по таймеру последний элемент змейки ставится перед её головой (изменяет координаты последнего элемента с учётом направления, которое мы храним в переменной direction
- запускаем функции проверки на столкновения:
-- если координаты первой ячейки (головы) не в игровом поле, то значит змейка столкнулась со стеной -> показываем game_over
-- если координаты головы совпали с координатами одной из ячеек тела -> показываем game_over
-- если координаты головы совпали с координатами яблока -> добавляем в конец змейки новую ячейку, увеличиваем счётчик очков
- если счётчик очков достиг определённого значения, то увеличиваем скорость игры

В туторе немного задействован Phaser для облегчения технических деталей. Это и неудивительно, потому что это введение в Phaser.

Если вам хочется узнать, как рисовать без Phaser, то один из самых простых и логичных способов показать, где находятся игровые объекты (мы же знаем их координаты), это перерисовывать их на canvas в режиме (контексте) отображения '2d'

Для этого создаём canvas:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
 
    <style>
        #renderCanvas {
            background-color: #061f27;
        }
    </style>
 
</head>
<body onload="main()">
    <canvas id="renderCanvas" width="500" height="500"></canvas>
    <script src="js/game.js"></script>
</body>
</html>
Так можно нарисовать яблоко. Я в очень упрощённой форме показал, для примера - тут координаты яблока задаются в функции update. Главное, что я показал - зная координаты объектов, мы можем перерисовать их: сначала очистив области рисования и нарисовал с помощью fillRect.

Вот и весь рендер на canvas:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function main()
{
    // Получаем ссылку на элемент canvas
    var canvas = document.getElementById('renderCanvas');
 
    // Получаем контекст рисования
    var ctx = canvas.getContext('2d');
 
    // Перерисовываем все объекты
    update(ctx);
}
 
function update(ctx)
{
    // Очищаем область рисования
    ctx.clearRect(0, 0, 500, 500);
 
    // Рисуем яблоко
    drawApple(ctx, 100, 100);
}
 
var size = 20;
 
function drawApple(ctx, x, y)
{
    ctx.fillStyle = "red";
    ctx.fillRect(x, y, size, size);
}
0
Миниатюры
Ваша первая игра на JavaScript и Phaser (тема-обсуждение)  
Padimanskas
Superposition
935 / 602 / 256
Регистрация: 27.10.2013
Сообщений: 2,071
01.10.2016, 01:51 13
Цитата Сообщение от 8Observer8 Посмотреть сообщение
В змейке нет никакой спрайтовой анимации. Нужно просто уметь рисовать квадраты и стирать их - вот весь рендер.
Вот видишь, даже pixi не нужен, уж тем более 3д. Мне очень интересны подобные вещи, часто их просматриваю, но почему я вижу это именно на сайберфоруме, а не на каком-нибудь геймдев.ру? Там ведь есть не мало людей которые знают эту кухню и могут вместе обсудить материал или обменяются здоровыми идеями и опытом, кроме того там есть новички которым будут полезны эти записи
0
8Observer8
2329 / 1488 / 248
Регистрация: 05.10.2013
Сообщений: 4,656
Записей в блоге: 59
01.10.2016, 14:28  [ТС] 14
Цитата Сообщение от Padimanskas Посмотреть сообщение
Вот видишь, даже pixi не нужен, уж тем более 3д.
Причём здесь 3D? О нём вообще никакой речи не шло. У элемента canvas есть два режима рисования: "2d" и "webgl". В режиме "2d" можно рисовать только 2d объекты, а в режиме "webgl" можно рисовать как 2D объекты (если использовать только оси X и Y, а Z = 0), так и 3D объекты (есть перспектива). Но я упомянул про "webgl" именно для рисования 2D объектов. Конечно же, рисовать в контексте "2d" намного проще, как я показал выше. Просто я раньше не был знаком с canvas в контексте "2d", но хорошо знаю WebGL. Теперь понимаю, что даже можно накладывать друг на друга canvas в этих двух режимах режимах, чтобы легче было выводить текст. Вы меня спровоцировали изучать canvas в 2d режиме, за что вам спасибо! Он может быть очень полезен для определённых задач.

Но всё таки я остался при своём мнении, что для змейки Phaser самое то, потому что на него можно повесить переключение между меню, игрой, game_over, загрузку звуков, игровых объектов, а логику змейки писать самому. Логика змейки будет точно такая же. Самое главное, что открывается перспектива создания более сложных 2D игр и студент сможет заинтересоваться дальнейшим развитием в программирование, будет выкладывать свои игры в соц. сетях, делиться с друзьями, обязательно захочет добавлять в свои игры мультиплеер на node.js, регистрацию и т.д.

Цитата Сообщение от Padimanskas Посмотреть сообщение
но почему я вижу это именно на сайберфоруме, а не на каком-нибудь геймдев.ру?
Это мой первый перевод. Он случайно получился. И он получился из-за того, что я сильно разозлился, на тех кто здесь оффтопил. Решил, что назло вам я его закончу и закончил. Я думаю, что дальше продолжу переводить туторы по геймдеву и у меня есть мечта начать переводить какую-нибудь из своих любимых книг. Для меня это ещё один способ изучать английский. Буду, наверное, выкладывать переводы туторов в блог на киберфоруме. Геймдев.ру мне не нравится, потому что там большинство людей очень злые. Причём злые только бездельники (и как следствие неудачники, поэтому они злые), а те кто там реально занимается делом - это адекватные люди, но неадекватных там намного больше. А на киберфоруме практически все адекватные и добрые, особенно, модераторы.

Я может быть вот эти книгу начну переводить, в ней всего 180 страниц, используется node.js и canvas в контексте 2d: 2015 - 05 - Multiplayer Game Development with HTML5 - Rodrigo Silveira Кстати, в ней разбирается змейка с мультиплеером.

Хочу сделать в ближайшее время змейку с мультиплеером на Node.js Если кому интересно, вот хороший тутор: 1- Making Multiplayer HTML5 Game: Setup & Sending Files. NodeJs Tutorial Guide

Кликните здесь для просмотра всего текста
0
01.10.2016, 14:28
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
01.10.2016, 14:28

Neverwinter Nights: тема-обсуждение
Наверника многие играют в Neverwinter Nights! Вам сюда! :)

Тема-обсуждение игры F.E.A.R. 2: Reborn
nKjw53LVHVE F.E.A.R. 2 Reborn - загружаемом дополнении к игре F.E.A.R. 2:...

Тема-обсуждение игры Travian
Попробуйте Travian, я играю в него когда делать нечего, прикольная игруха,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru