JSFiddle - React, Tailwind, and code Playground

by Mladen Mihajlovic

HTML

<canvas id="canvas" height="1000" width="1000"></canvas>

JavaScript

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

let spritesheet = new Image();
spritesheet.src = "path/to/spritesheet.png";

let spriteSize = 50;
let number = 200;
let targetNumber = 6793;
let scrollSpeed = 0.1;
let digits = [];
let prevDigits = [];
for (let i = 1; i <= 4; i++) {
  digits.push(Math.floor(number / 10 ** (4 - i)) % 10);
  prevDigits.push(digits[i - 1] - 1);
  if (prevDigits[i - 1] === -1) {
    prevDigits[i - 1] = 9;
  }
}
let scrollOffsets = [0, 0, 0, 0];
let scrollDelay = 3;

let lastTime = null;

function animate(timeStamp) {
  if (!lastTime) {
    lastTime = timeStamp;
  }
  let deltaTime = timeStamp - lastTime;
  lastTime = timeStamp;

  if (number < targetNumber) {
    number += scrollSpeed * deltaTime;
    if (number > targetNumber) {
      number = targetNumber;
    }
    for (let i = 1; i <= 4; i++) {
      let digit = Math.floor(number / 10 ** (4 - i)) % 10;
      if (digit !== digits[i - 1]) {
        prevDigits[i - 1] = digits[i - 1];
        digits[i - 1] = digit;
        scrollOffsets[i - 1] = -spriteSize;
        scrollDelay = 3 - i;
      }
    }
  }

  if (scrollOffsets[3] < 0) {
    for (let i = 1; i <= 4; i++) {
      if (scrollOffsets[i - 1] < 0) {
        scrollOffsets[i - 1] += spriteSize / 10;
      } else if (i > scrollDelay) {
        scrollOffsets[i - 1] = 0;
      }
    }
  }

  draw();
  requestAnimationFrame(animate);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  let digitIndex = 0;
  for (let i = 1; i <= 4; i++) {
    let y = 32 + scrollOffsets[i - 1];
    if (i <= scrollDelay) {
      ctx.drawImage(spritesheet, 0, spriteSize * prevDigits[i - 1], spriteSize, spriteSize, (i - 1) * spriteSize, y, spriteSize, spriteSize);
      if (scrollOffsets[i - 1] < 0) {
        ctx.drawImage(spritesheet, 0, spriteSize * (prevDigits[i - 1] + 1), spriteSize, spriteSize, (i - 1) * spriteSize, y + spriteSize, spriteSize, spriteSize);
      }
    } else {
     ...