Назад Вперед

Часть 9. Добавление счета.

Какая же игра может быть без соревновательного процесса? Даже простой проект мини-игры не может обойтись без этого. Бесконечно отбивать шар от платформы до платформы не вариант. Обязательно нужно вводить счет пропущенных шаров и при достижении определенной отметки объявлять игру законченной. И уже играть следующий раунд заново.

Созданием счета и займусь в этом материале. Я уже создавал текст для стартовой сцены, поэтому принцип именно расположения текста на игровой сцене будет уже знакомым.

В первую очередь нужно будет объявить две переменные, которые будут хранить в себе значения счета для одного и второго игрока. Сделаю это в функции create() после всего записанного до этого кода. Для объявления переменных использую ключевое слово this, чтобы к ним можно было обратиться в функции update(). И сразу задаю им значение равное 0.

Файл game.js:


    ...
    this.scorePlayerOne = 0;
    this.scorePlayerTwo = 0;
    ...
 

Следом создаю еще две переменные, которые уже будут хранить в себе само отображение текста на игровой сцене со всеми нужными параметрами и объявленными до этого переменными. Использую метод this.add.text(). Первые 2 параметра — координаты расположения текста. Дальше идет что именно за текст отображать (записываю переменные со счетом игроков). Следом небольшое форматирование текста в виде указания размера шрифта. В конце добавил еще метод setOrigin();, чтобы отцентрировать текст именно так, как мне нужно.

Файл game.js:


    ...
    this.scoreTextOne = this.add.text(this.gameWidth/2-10, 15, this.scorePlayerOne, {
            fontSize: 20
        }).setOrigin(1, 0.5);
    this.scoreTextTwo = this.add.text(this.gameWidth/2+10, 15, this.scorePlayerTwo, {
            fontSize: 20
        }).setOrigin(0, 0.5);
    ...
 

Создание счета

Сохраняю изменения и открываю локальный сервер для проверки. Текст расположен как и задумано. По центру вверху возле центральной линии. Пока он не изменяется после вылета шара, но это скоро исправлю.

Проверка в браузере

Изменение счета будет происходить в функции update() в той части кода, где была проверка вылетел шар за пределы экрана или нет. Важный момент, что код нужно записать до той части, где уже происходит обновление позиции шара. Иначе изменение счета не будет происходить.

Мне понадобится еще одна проверка позиции шара для каждой из сторон игрового пространства. Записываю их.

Файл game.js:


    ...
    if(this.ball.x < 0) {

    }
    
    if(this.ball.x > this.gameWidth) {
    
    }
    ...
 

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

Файл game.js:


    ...
    if(this.ball.x < 0) {
        this.scorePlayerTwo++;
        this.scoreTextTwo.setText(this.scorePlayerTwo); 
    }
    ...
 

Во второй конструкции — переменные для счета первого игрока.

Файл game.js:


    ...
    if(this.ball.x > this.gameWidth) {
        this.scorePlayerOne++;
        this.scoreTextOne.setText(this.scorePlayerOne);
    }
    ...
 

Обновление счета

Сейчас проверю все ли работает сохранив код и открыв браузер. Когда шар вылетает за пределы игры с левой стороны — победное очко достается правому игроку. Когда с правой стороны — очко для левого игрока.

Проверка в браузере

В данный момент играть можно очень и очень долго. Игра пока не остановиться при достижении определенного значения счета. Поэтому следующей задачей будет остановка игры, когда одна из переменных достигает значения равное 10.

В самом конце функции update() нужно будет записать еще одно условие, для проверки достижения одной из переменных счета числа 10. И если оно будет достигнуто, то пока просто остановлю движение шара и платформ.

Условие будет выглядеть следующим образом:

Файл game.js:


    ...
    if(this.scorePlayerOne >= 10 || this.scorePlayerTwo >= 10) {

    }
    ...
 

Внутри фигурных скобок записываю три метода: для остановки шара, остановки первой и второй платформы.

Файл game.js:


    ...
    if(this.scorePlayerOne >= 10 || this.scorePlayerTwo >= 10) {
        this.ball.setVelocity(0);
        this.playerOne.body.setVelocity(0);
        this.playerTwo.body.setVelocity(0);
    }
    ...
 

Остановка игры

Сохраню код и проверяю в браузере. Нужно дождаться когда счет достигнет отметки 10. При ее достижении — игра останавливается. Шар не двигается, а платформами невозможно управлять.

Проверка в браузере

На этом работу со счетам завершаю. В следующем материале поработаю с музыкальным оформлением проекта.

Спасибо за внимание!

Назад Вперед