Недавно я изучил JavaScript и за две недели изучения JS написал игру. Хотя это был парный проект, так что технически Тейлор Мур и я написали игру. Получилось очень круто, и я очень горжусь этим. Если вам так хочется, можете сыграть здесь. Вдохновением для этой игры послужила старая компьютерная игра Gorillaz, в которую я играл ребенком (на самом деле она называлась Gorillas, но я добавил букву z для драматического эффекта). Гориллы были действительно веселой игрой и очень простой. На вершине башни есть две гориллы, вы выбираете угол и скорость, затем стреляете взрывным бананом. Выигрывает тот, кто первым ударит другую гориллу. И вы можете сыграть это здесь. На первый взгляд это кажется очень простой игрой, но за кулисами происходит много сложной математики. Позвольте мне показать вам некоторые из них по математике.

Математика пушечного ствола

Итак, эта математика заняла у нас некоторое время, чтобы понять. По сути, мы рисуем воображаемый круг вокруг центральной точки основания пушки. И затем мы непрерывно проводим линию от центральной точки основания пушки до конца круга. Функции-прототипы moveUp и moveDown позволяют нам перемещать точку окружности, на которую мы направлены, нажимая вверх или вниз на клавиатуре. На самом деле это было довольно сложно для нас, поскольку требовалось много тригонометрии, которую никто из нас не использовал со старшей школы. Было много проб и ошибок, пока мы не получили то, что нужно. Затем мы много-много часов пытались наложить изображение пушечного ствола поверх нашей линии, но так и не смогли этого понять. Я уверен, что есть способ сделать это, но мы были в порядке, просто сделав толстую черную линию с закругленными краями в качестве ствола нашей пушки.

Математика пушечного ядра

Эту математику тоже было довольно сложно вычислить. Мы знали, что нам нужно каким-то образом смоделировать гравитацию, и она должна будет меняться в зависимости от скорости и угла пушечного ядра (мы называли его снарядом в нашем коде). Мы нашли несколько основных формул траектории в Интернете и смогли адаптировать их для нашего кода. Если вы играли в нашу замечательную игру, вы знаете, что в левой части экрана есть полоса питания, которая постоянно поднимается и опускается, и в зависимости от того, где находится полоса мощности, когда вы нажимаете пробел, это и есть ваша настройка мощности. Мы устанавливаем этот результат как нашу переменную g, которая как бы символизирует гравитацию. Чем ниже значение g, тем ниже будет «гравитация», которая позволяет мячу лететь намного быстрее. Возможно, это не самый правильный способ объяснить это, но для меня это был лучший способ понять это. Мы вызываем функции прототипа setPosition и непрерывно двигаемся до тех пор, пока мяч не покинет экран или не достигнет цели. Поэтому, когда мы постоянно вызываем их, мы увеличиваем координату y, что заставляет ее уменьшаться. Canvas, который мы используем, на самом деле инвертирован, поэтому чем выше координата y, тем ниже он находится на экране.

Projectile.prototype.movement = function() { this.x += this.xVel / 3; this.y += this.yVel / 3; this.yVel+=this.g; };

Этот фрагмент кода занял у нас некоторое время, чтобы понять. Некоторое время мы просто устанавливали this.x += this.xVel / this.y += this.yVel, и это вызывало скачки мяча. Траектория была бы такой же, но мяч не попал бы в цели и башни. Это произошло потому, что мы обновляли координаты x и y со слишком большим интервалом между каждым интервалом. Разделение на 3 в обеих этих строках стало для нас серьезным переломным моментом. Это заставило мяч лететь плавно! Единственное, о чем нам оставалось беспокоиться, это обнаружение столкновений.

Математика обнаружения столкновений

Математика обнаружения столкновений была не слишком сложной. На самом деле здесь не так много математики. Это простая геометрия, и мы просто используем координаты x и y шара, целей и башен. Нам важно сделать коробку с каждым объектом и проверить, не соприкасается ли какая-либо часть коробки с другой коробкой. Изначально мы написали это по-другому, и это срабатывало только иногда. Наша главная проблема в том, что мы не правильно пометили условные операторы и совершенно забыли покрыть одну сторону наших целей. Но когда мы сели и хорошенько все обдумали, понять это оказалось не так уж и сложно.

Окончательный вывод по математике

Как я всегда говорю, «математика заставляет мир вращаться». Если вы думаете или начинаете изучать JavaScript, я думаю, что отличный способ научиться — это создать игру. Это не обязательно должна быть оригинальная идея, но должен быть код. И если вы сделаете игру, в которой вообще будет задействована физика, то в ней будет много математики. Удачи там!