Подходящая модель для настольной игры «Шашки», реализованная в Canvas с учетом анимации.

Сейчас у меня есть объект Board, который содержит двумерный массив 8x8 (сетка, как я его называю), а фигуры представлены целыми числами 1/2, и я использую побитовую операцию, чтобы пометить фигуру как короля.

У меня также есть объект Checkers, который обрабатывает рендеринг доски и щелчки пользователя на холсте и т. д. Объект Checkers имеет метод Draw, который просто перебирает сетку на объекте Board для создания графического представления доски. Таким образом, при каждом вызове Draw() доска перерисовывается и позиции фигур пересчитываются.

Теперь я хочу добавить анимацию. Один из способов, которым я смог добиться этого, состоит в том, чтобы отслеживать самое последнее перемещение (координаты источника и пункта назначения XY), а затем запускать процедуру Draw() с заданным интервалом, а процедуру Draw() проверять, часть, которую он собирается нарисовать, совпадают с координатами, записанными в переменной назначения предыдущего хода, и соответствующим образом корректирует положение фигуры.

Хотя это работает, я считаю, что это немного грязно.

Альтернативная модель, с которой я экспериментировал, заключалась в том, чтобы использовать объекты для частей вместо целых чисел, а затем я мог записывать координаты пикселя X Y на части и обновлять их после каждого движения (или в цикле анимации). Это я также нашел беспорядочным, и мне не понравилось, как мой объект платы теперь был привязан к логике рендеринга.

Может ли кто-нибудь с опытом в этой области предложить лучший способ сделать что-то?

Стоит отметить, что я использую один и тот же класс Board на стороне сервера (NodeJS), поэтому в идеале я хотел бы, чтобы класс Board был идентичен как на клиенте, так и на сервере, чтобы гарантировать, что ходы, сделанные и проверенные клиентом, никогда не будут отклонены. сервером.


javascript canvas html5-canvas
person NoPyGod    schedule 20.09.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я бы посоветовал для каждого из вас сначала нарисовать все фигуры, которые не двигаются, а затем нарисовать движущуюся часть по некоторой интерполированной линии от ее начального до конечного положения (заданного временем).

Честно говоря, для чего-то с таким уровнем графической сложности я бы придерживался HTML/CSS/jQuery, используя position: absolute изображения для представления частей. Затем вы можете использовать функцию анимации jQuery, чтобы показать, как последняя часть очень легко перемещается из начальной в конечную позицию (и с такими параметрами, как swing или linear, чтобы получить желаемое поведение). например.:

// Assumes pieces are objects with id and position properties
// and for each piece there is an image with id: piece.id

$('#'+piece.id).animate({
    left:  piece.position.x * board_scale,
    top:   piece.position.y * board_scale
});
person andrewmu    schedule 23.09.2011

arrow_upward
0
arrow_downward

Вы не упомянули поддержку браузера, но если вы используете только IE9+, я бы придерживался CSS3-переходы, которые обеспечивают чрезвычайно плавную анимацию с минимальными усилиями с вашей стороны. Анимации могут быть аппаратно ускорены даже на мобильных устройствах, что означает, что они часто великолепны.

Apple уже сделала демонстрацию шашек с использованием этой технологии :)

https://developer.apple.com/safaridemos/checkers.php

// css
.piece {
   -webkit-transition: all ease-in .75s;
   -moz-transition: all ease-in .75s;
   transition:  all ease-in .75s;
}

// js
var aPiece = document.getElementById('aPiece');
var newLocation = "translate(20px, 30px)";
aPiece.style.webkitTransform = newLocation;
aPiece.style.mozTransform = newLocation;
aPiece.style.transform = newLocation;

Это будет анимироваться для вас автоматически :)

person Jamund Ferguson    schedule 30.04.2012

arrow_upward
0
arrow_downward

Если вы хотите использовать холст:
используйте два, расположив их точно друг над другом.

Затем берем нижний, чтобы рисовать все статичные элементы.
А верхний, чтобы рисовать только анимацию, т.е. движущийся элемент.

Это даст вам оптимальную производительность, так как нужно будет перерисовывать только изменяющиеся элементы.

person Chris    schedule 01.05.2013