Это часть курса Змейка на Rust, JavaScript и WebAssembly.
В этой части мы создадим экземпляр структуры Game из JavaScript. Изменения, которые мы внесем в этой части, отражены в this commit.
Состояние игры
Мы будем измерять расстояния игровыми клетками. В этом случае мы можем посмотреть на изображение выше и сказать, что размер игры составляет 17x15, и когда змея съедает пищу, она становится на одну клетку длиннее. Будем измерять время миллисекундами.
Теперь мы можем подумать о том, как мы хотим представить состояние игры. Состояние будет содержать размер игрового поля - ширину и высоту, скорость змеи (ячейки в миллисекундах), направление змеи, положение еды, положение краев змеи и счет. Давайте откроем src / lib.rs и запишем.
Чтобы представить положение объектов в игре, мы используем структуру Vector. Чтобы обе структуры были доступны в JavaScript, мы используем атрибут wasm_bindgen. Мы пометили все поля как общедоступные, кроме змеи, потому что нам нужно будет создать метод для экспорта вектора позиций в виде массива JavaScript. Когда мы используем общедоступные поля Game, такие как direction и food в JavaScript, мы получаем копию. Чтобы это работало, в Vector должны быть реализованы черты Copy и Clone.
Конструктор игр
Давайте реализуем конструктор для Game, чтобы мы могли создать экземпляр из JavaScript.
Помещаем голову змеи в середину игрового поля и, применяя векторные операции, вычисляем положение кончика хвоста. А пока мы оставляем еду в первой камере. Мы вернемся к этому позже и реализуем функцию, которая найдет случайное свободное от змейки место.
Вектор
Мы можем найти использование векторов почти во всех мыслимых типах игр, и полезно знать, как их можно применить и какие операции являются наиболее популярными. В нашей игре у нас не будет специальной структуры для точек, потому что вектора достаточно как для указания направлений, так и для координат. Если вас не устраивают векторы, то можете почитать мою статью, где описаны все операции, которые мы будем использовать в этом курсе.
На данный момент мы добавляем только те методы, которые использовались конструктором Game.
Сторона JavaScript
Цель этой части - увидеть на веб-странице Game instance. Во-первых, давайте скомпилируем часть Rust.
Затем мы создаем папку src внутри каталога www и помещаем туда два файла - config.js и game-manager.js. .
Давайте добавим параметры config.js, которые мы будем использовать для создания экземпляра игры. Позже мы могли бы поиграть с этими параметрами и посмотреть, как изменится игра.
Подробнее о GameManager мы поговорим позже. На данный момент мы экспортируем класс, который создает Game и console.log.
Наконец, перейдем к index.js и запустим GameManager.
Чтобы проверить, что все работает, мы переходим на веб-страницу и открываем консоль в инструментах разработчика.
В следующей части мы отрендерим все объекты нашей игры. Будьте на связи!
Достигните нового уровня сфокусированности и продуктивности с Increaser.org.
