Я пытался начать создавать игру с помощью Javascript, но в настоящее время я в тупике от того, как создать анимацию для простого изображения. Изображение, которое я использую, представляет собой черный квадратный png, и когда я использую setInterval() , оно дублирует изображение и не удаляет изображение из предыдущего состояния. Он рисует другое изображение в каждом пикселе, но не избавляется от последнего кадра, поэтому он выглядит как черный прямоугольник, растущий вверх. Я хочу, чтобы блок переместился вверх и удалил последний нарисованный кадр. Что я делаю неправильно?

мой код JS:

 var cvs = document.getElementById("game"); var ctx = cvs.getContext("2d"); var block = new Image(); block.src = "images/Solid_black.png"; var imgCount = 1; var blockX = 10; var blockY = 462; var speed = 5; window.onload = function() { setInterval(draw, 1); } function draw() { if (--imgCount {amp}gt; 0) { return; } console.log(cvs.clientWidth); ctx.drawImage(block, blockX, blockY, 50, 50); blockY--; } draw(); 

На что это похоже

tahzabbani

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Вы должны очистить холст в начале каждого цикла:

 ctx.clearRect(0, 0, canvas.width, canvas.height); 

Это потому, что ваш объект технически не движется, он просто перерисовывается в разных местах. Мы стерли предыдущий рисунок, чтобы создать впечатление динамичного движения. Это фарс!

Я, честно говоря, не знаю, если это то, что вы ищете, но:

Функция ctx.clearRect (x, y, width, height) очищает прямоугольник на холсте. Например:

 ctx.clearRect(0, 0, canvas.width, canvas.height) 

очистит весь холст.

Поместите это, прежде чем рисовать каждый кадр в функции рисования. По сути, сначала он очищает холст, рисует картинку, а затем продолжает повторять, чтобы создать анимационный эффект.