Ruby Wasm и Phaser JS: Наводим порядок и запускаем первый скрипт (Часть 2)

Ruby Wasm и Phaser JS: Наводим порядок и запускаем первый скрипт (Часть 2)

В прошлой статье мы заставили браузер поздороваться с нами на Ruby. Но писать весь код игры внутри HTML-тега — это путь к хаосу. Сегодня мы сделаем всё по-взрослому: вынесем логику в отдельный файл и подготовим почву для Phaser.

Почему нельзя оставлять код в HTML?

• Подсветка синтаксиса: Внутри тега <script> ваш любимый VS Code будет считать Ruby обычным текстом. Прощайте, подсказки и авто дополнение!
• Масштабируемость: Когда в игре появится физика, враги и уровни, ваш HTML-файл раздуется до тысяч строк.
• Чистота: HTML должен отвечать за структуру, а Ruby — за магию 🧙.

Шаг 1: Создаем файл main.rb

В корне вашего проекта, рядом с index.html, создайте новый файл main.rb. Поместим туда следующий код:

Код файла main.rb

Секретный ингредиент: что такое require 'js'?

Если вы внимательно посмотрели на код в main.rb, то заметили в первой строчке require 'js'. В обычном Ruby мы так подключаем библиотеки, но в Ruby Wasm — это «мостик» в другое измерение.

Без этой строки ваш Ruby-код будет заперт внутри виртуальной машины WebAssembly. Он будет уметь считать числа и обрабатывать строки, но не сможет даже вывести сообщение в консоль браузера или изменить заголовок страницы.

Что дает нам библиотека 'js':

• Доступ к JS.global: Это прямой вход в объект window браузера. Хотите вызвать console.log? В Ruby это будет JS.global[:console].log("...").
• Взаимодействие с DOM: Вы можете находить элементы на странице, менять их текст или цвета прямо из Ruby-кода.
• Обмен данными: Она позволяет конвертировать типы данных. Ruby-хэш {} превращается в JavaScript-объект, а массивы Ruby становятся понятными для движка Phaser.

Шаг 2: Подключаем файл к странице

Теперь вернемся в index.html. Нам нужно изменить способ подключения скрипта. Вместо того чтобы писать код внутри, мы укажем атрибут src.

Важный нюанс: Мы по-прежнему используем type="text/ruby".

index.html подключаем файл main.rb к нашей странице

Шаг 3: Проверка через Live Server

Помните, почему мы используем Live Server? Если вы просто откроете файл, браузер заблокирует загрузку main.rb из-за политики безопасности.

1. Нажимаем кнопку Go Live в VS Code.
2. Открываем консоль в браузере (F12).
3. Видим наше сообщение!

Сообщение в консоле браузера

Что мы получили?

Теперь у нас есть полноценная рабочая среда. В main.rb нам доступны все прелести Ruby: классы, модули и лаконичный синтаксис, а браузер послушно исполняет это через WebAssembly.

В следующей статье мы наконец-то добавим Phaser.js. Я покажу, как инициализировать игровое окно.

Не забудьте подписаться, чтобы не пропустить момент, когда на экране появится первый спрайт! 👇