Анимация спрайта на <canvas> БЕЗ библиотеки JS

Question

Добрый день. Как говорится в заголовке, я пытаюсь оживить 2d spritesheet на элементе canvas для простой 2d-игры, которую я делаю. Я просмотрел почти десяток статей и не нашел того, что искал, и это инструкции о том, как это сделать без помощи какой-либо библиотеки. Вы можете сказать мне, хорошо, сэр, вы сумасшедшие, если не собираетесь воспользоваться этой свободно доступной технологией, которая могла бы облегчить вашу жизнь. Мой ответ на это заключается в том, что я делаю это ради обучения, потому что я хочу стать лучшим разработчиком javascript и расти, чтобы писать большие и лучшие игры. При этом, я думаю, мой вопрос: как мне одушевить спрайт? (Я хочу, чтобы игрок мог вводить направления с помощью клавиш со стрелками) Не ошибитесь: я не прошу кого-либо написать код для меня, скорее я спрашиваю, где я могу найти ресурсы, чтобы научить себя, как это сделать мой собственный. Спасибо всем, очень ценим.

Answer 1

Ответ: canvas + RequestAnimationFrame. Вот отличный учебник: http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/

Я искал проект игры html5 + javascript 2d, чтобы присоединиться несколько месяцев назад. Если вам интересно, я хотел бы сотрудничать с вами в этом проекте. Просто дайте мне знать, и наслаждаться обучающей

Вы можете создать простой цикл анимации, создавая полотно в вашем HTML документе:

<canvas id="cvs"></canvas> 

Это будет ваша «настольная игра»

Тогда вы можете создать файл javascript, в котором определяется игровой движок. Вы можете загрузить внешнее изображение внутри элемента изображения, как это:

var myImage = new Image(); 
myImage.src = "my-sprite-animation.png"; 

и определение спрайт:

var mySprite = sprite({ 
    context: canvas.getContext("2d"), 
    width: 100, 
    height: 100, 
    image: coinImage 
}); 

Затем с помощью метода requestAnimationFrame для создания цикла анимации:

function gameLoop() { 
    window.requestAnimationFrame(gameLoop); 
    mySprite.update(); 
    mySprite.render(); 
}