- PVSM.RU - https://www.pvsm.ru -
Часть 1 [1] » Часть 2 [2] » Часть 3
Сегодня поговорим об архитектуре игры Snake, построенной на платформе Cocos2d-JS и приступим к её созданию. Пожалуйста, читайте этот материал, заглядывая в документацию [3] по Cocos2d-JS и загрузите набор игровых ресурсов [4]. Их мы будем использовать при разработке.
Если вы никогда не играли в Snake, вот готовый проект [5]. Скачайте его себе на компьютер, импортируйте в Intel XDK и испытайте в деле. Для того, чтобы это сделать, перейдите на вкладку Проект (Project) и щёлкните по кнопке Открыть проект Intel XDK (Open An Intel XDK Project), которая расположена в нижнем левом углу.
Кнопка импорта проекта в Intel XDK
Snake – простая игра. Сначала на экране лишь голова змеи. Управляя змейкой, надо нацеливать её на нечто съедобное, появляющееся случайным образом на экране. В нашем случае это – «печенье», представленное красной точкой. Змея, найдя угощение, съедает его и увеличивается в размере. При этом растёт и скорость её перемещения. Игра заканчивается, если подросшая змейка, в погоне за вкуснятиной, ненароком цапнет себя за хвост.
В нашей версии игры персонаж может выходить за границы экрана и появляться с другой его стороны. Для управления игрой на компьютере служат клавиши W, S, A, D. Они, соответственно, позволяют направлять змею вверх, вниз, влево и вправо. На устройствах с сенсорным дисплеем ту же функцию выполняет жест касания экрана с протягиванием в нужном направлении. На эмуляторе это можно воспроизвести, щёлкая по экрану мышью, и, не отпуская левую кнопку, перетаскивая указатель в том направлении, куда должна двигаться змейка.
Игра состоит из трёх сцен. Это меню (MenuScene), игровой экран (GameScene) и экран завершения игры (GameOver).
Сцены, из которых состоит игра
MenuScene включает в себя два спрайта, выводящих текст. Это – название игры и приглашение коснуться экрана (или щёлкнуть по нему) для запуска игры. Слоёв на этой сцене нет. Так же устроена и сцена GameOverScene. Единственное отличие в том, что она содержит три спрайта, данные для одного из которых, выводящего количество набранных очков, берутся из GameScene.
Сцена GameScene, представляющая собой главный игровой экран – это то место, где и происходит практически всё, что называется «игрой». Осваивая это руководство, вы будете создавать здесь игру по частям.
Стандартный шаблон проекта, который даёт нам Intel XDK, содержит компоненты, которыми мы пользоваться не будем. Уберём из него всё лишнее.
var asset = {
HelloWorld_png : "asset/HelloWorld.jpg",
CloseNormal_png : "asset/CloseNormal.png",
CloseSelected_png : "asset/CloseSelected.png"
};
var g_resources = [];
for (var i in asset) {
g_resources.push(asset[i]);
}
var asset = {
SnakeHead_png : "asset/snake_head.png",
SnakeBody_png : "asset/snake_body.png",
SnakeBiscuit_png : "asset/snake_biscuit.png"
};
"jsList" : [
"src/resource.js",
"src/app.js"
]
"jsList" : [
"src/resource.js",
"src/game.js"
]
В итоге структура файлов проекта должна выглядеть так, как показано ниже.
Структура файлов проекта после изменений
Если в менеджере файлов редактора Brackets всё ещё видны удалённые файлы, app.js, например, перезапустите XDK.
Каркас игры готов, правда, если открыть её сейчас в эмуляторе, ничего работать не будет. Для того, чтобы это исправить, займёмся реализацией GameScene.
var GameScene = cc.Scene.extend({
onEnter:function () {
this._super();
}
});
Здесь мы описываем переменную GameScene и вызываем метод onEnter объекта-родителя нового слоя.
var GameScene = cc.Scene.extend({
snake_layer: {},
onEnter: function() {
this._super();
// Место для нового кода
this.snake_layer = new SnakeLayer();
this.addChild(this.snake_layer, 0);
}
});
Здесь создаётся слой SnakeLayer, который мы реализуем позже. Этот слой добавляется в качестве потомка GameScene. GameScene лишь включает в себя слой SnakeLayer, а уже в слое будет содержаться логика игры.
Для того, чтобы игровой персонаж был похож на змею, мы создаём его из множества фрагментов, которые следуют за головой. Делается это из-за того, что змея должна уметь увеличиваться в размерах и делать повороты на 90 градусов. Классический вариант игры Snake устроен именно так. Мы, создавая свой вариант, следуем сложившейся традиции.
Приступим к реализации задуманного, добавив в game.js следующий класс.
var SnakePart = cc.Sprite.extend({
ctor: function(sprite) {
/* Вызов конструктора суперкласса с передачей ему спрайта, представляющего фрагмент тела змеи */
this._super(sprite);
},
move: function(posX, posY) {
/* Обновляем текущую позицию */
this.x = posX;
this.y = posY;
},
})
Этот класс служит для описания одного сегмента змейки. Он уже содержит метод move, который позволяет независимо перемещать каждый из сегментов.
Сама змея будет находиться в слое SnakeLayer. Это – движущая сила и
Опишем слой, добавив в game.js следующий код.
var SnakeLayer = cc.Layer.extend({
ctor: function () {
this._super();
}
});
С подобным описанием мы уже встречались, в GameScene, например. Только, вместо метода onEnter здесь – конструктор объекта. Дело тут в том, что мы не просто «переходим» на слой (под руководством управляющего объекта), а создаём его. Кроме того, в этом классе будет свойство, символизирующее фрагмент тела змеи (пока – лишь её голову). Эту переменную будем использовать для того, чтобы размещать соответствующие спрайты на слое.
В ходе работы над игрой конструктор слоя SnakeLayer будет расти – в него будут добавляться команды инициализации различных объектов.
Начнём с создания головы змеи. Это, фактически, один из сегментов тела с особыми свойствами и собственным графическим представлением.
Для того, чтобы инициализировать голову змеи (переменная snakeHead), надо добавить в SnakeLayer следующий код.
var SnakeLayer = cc.Layer.extend({
snakeHead: null,
ctor: function () {
/* Вызов конструктора суперкласса */
this._super();
/* Создание головы змеи */
this.snakeHead = new SnakePart(asset.SnakeHead_png);
/* Добавление головы в качестве объекта-потомка слоя */
this.addChild(this.snakeHead);
},
});
Здесь мы добавляем объект класса SnakePart в качестве объекта-потомка слоя SnakeLayer. Мы почти готовы к тому, чтобы запустить проект в эмуляторе и увидеть там кое-что интересное, но сначала нужно подправить код управляющего объекта.
cc.director.runScene(new HelloWorldScene());
cc.director.runScene(new GameScene());
Сохраните изменения и запустите проект в эмуляторе.
Игра, запущенная в эмуляторе
Результат наших трудов вполне заметен, но голова змеи закатилась в угол, да ещё и перекрыта счётчиком частоты кадров. Уберём счётчик. Для этого надо сделать следующее.
Подведём итоги сегодняшнего занятия.
Вот, что вы теперь умеете.
На данном этапе работы над проектом у нас имеется игровой экран и голова змеи в углу. В следующий раз займёмся системой координат и позволим змее перебраться в более интересное место.
Часть 1 [1] » Часть 2 [2] » Часть 3
Автор: Intel
Источник [7]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/117866
Ссылки в тексте:
[1] Часть 1: https://habrahabr.ru/company/intel/blog/281380/
[2] Часть 2: https://habrahabr.ru/company/intel/blog/281453/
[3] документацию: http://www.cocos2d-x.org/reference/html5-js/V3.7/index.html
[4] набор игровых ресурсов: https://software.intel.com/sites/default/files/managed/0e/b6/snake_assets.zip
[5] готовый проект: https://github.com/alling9495/sample-snake
[6] мозг: http://www.braintools.ru
[7] Источник: https://habrahabr.ru/post/281523/
Нажмите здесь для печати.