Sports - Question #7
const canvas = document.getElementById("spriteCanvas");
const ctx = canvas.getContext("2d");
// Load your sprite sheet
const spriteSheet = new Image();
spriteSheet.src = "../fbhimages/SpriteSheet03.avif"; // Replace with your image path
// Sprite settings
const frameWidth = 64; // width of a single frame
const frameHeight = 64; // height of a single frame
const totalFrames = 6; // number of frames in your strip
let currentFrame = 0;
// Control animation speed
const fps = 10;
const interval = 1000 / fps;
let lastTime = 0;
function animate(timestamp) {
if (timestamp - lastTime >= interval) {
lastTime = timestamp;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(
spriteSheet,
currentFrame * frameWidth, 0, // source x, y
frameWidth, frameHeight, // source width, height
0, 0, // canvas x, y
frameWidth, frameHeight // canvas width, height
);
currentFrame = (currentFrame + 1) % totalFrames;
}
requestAnimationFrame(animate);
}
spriteSheet.onload = () => {
requestAnimationFrame(animate);
};