Если бы я хотел создать простую игру (змею, шашки, пакман или что-то еще), что было бы лучшим подходом - SVG или Canvas?
Что меня интересует:
Простота реализации (кривая обучения Canvas vs SVG). Например, если у SVG значительно меньше учебников и поддержки сообщества, которые имеют для меня решающее значение.
Производительность (не важна для меня, но все еще важна)
А также в игровом поле есть специальные игры, для которых SVG более подходит, чем Canvas (или наоборот?)
Игры, для которых требуется много взаимодействия с мышью и не много непрерывной анимации (например, шашки или шахматы или любая настольная игра, если на то пошло) лучше подходят для SVG, потому что вы работаете с элементами dom. Рассмотрим простой наведение курсора, в SVG вы можете добавить прослушиватели событий или даже просто поместить g.button:hover path {fill: blue;} в свой CSS, и он будет работать. Холст, с другой стороны, требует отслеживания области попадания и рисования всего в Javascript.
Snake и Pacman лучше подходят для холста, вы все контролируете своей клавиатурой, а живопись на холсте дешевле, чем перемещение элементов в SVG. Существуют отличные игровые библиотеки для холста, impact.js является одним из них.
Адресация ваших точек:
Простота использования:, если вы знакомы с чистым манипулятором DOM для JavaScript. SVG - легкий ветерок. Если вы пустой сланец, я бы сказал, что холст легче понять, поскольку вы просто нарисовываете его.
Поддержка сообщества: для игрового холста выигрывает руки. Существует сильное сообщество SVG, но не в игровой зоне.
Производительность: Смешанная. Как холст, так и SVG могут быть медленными, если вы не выполняете несколько трюков. Например, перемещение одного квадрата слева направо может быть резким в холсте, если вы перерисовываете весь экран на каждом кадре. Если вы просто перекрасили область, которая изменилась, тогда она будет гладкой. SVG будет обрабатывать этот случай без заминок. Но, с другой стороны, если вы хотите анимировать тысячи прямоугольников сразу, холст обрабатывает его плавно, а SVG боится, если вы не завершаете прямоугольники в группе и не перемещаете группу.
В целом, если вы хотите изучить игры в javascript, возможно, Canvas - лучший вариант. Я сделал три игры в SVG, последний из которых был http://color.method.ac, но я занимался холстом, и я думаю, что он лучше подходит для игровой.