Replace the whole file with this. Set CELL to your SpriteFix Frame size. Set FRAME_COUNT to how many poses are in the strip (Ready shows Frame 1 / N).
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My first sprite game</title>
<style>
body { margin: 0; background: #0f172a; color: #e2e8f0;
font-family: system-ui, sans-serif; display: grid; place-items: center;
min-height: 100vh; }
canvas { background: #1e293b; image-rendering: pixelated;
border: 2px solid #334155; border-radius: 8px; }
p { max-width: 40rem; text-align: center; font-size: 0.9rem; opacity: 0.85; }
</style>
</head>
<body>
<canvas id="c" width="640" height="360"></canvas>
<p>A / D or arrows to walk · Sprite from SpriteFix (player.png)</p>
<script>
// --- Match SpriteFix export ---
const CELL = 128; // Frame size chip (32 / 64 / 128 / 256)
const FRAME_COUNT = 8; // N from Ready: "Frame 1 / N"
const FPS = 10; // animation speed while moving
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;
const sheet = new Image();
sheet.src = "player.png";
const keys = {};
addEventListener("keydown", (e) => { keys[e.key] = true; });
addEventListener("keyup", (e) => { keys[e.key] = false; });
const player = {
x: 280, y: 220, speed: 2.2,
facing: 1, // 1 right, -1 left
frame: 0, frameTimer: 0,
};
function update(dt) {
let moving = false;
if (keys["ArrowLeft"] || keys["a"] || keys["A"]) {
player.x -= player.speed; player.facing = -1; moving = true;
}
if (keys["ArrowRight"] || keys["d"] || keys["D"]) {
player.x += player.speed; player.facing = 1; moving = true;
}
player.x = Math.max(0, Math.min(canvas.width - CELL * 0.5, player.x));
if (moving) {
player.frameTimer += dt;
if (player.frameTimer > 1 / FPS) {
player.frameTimer = 0;
player.frame = (player.frame + 1) % FRAME_COUNT;
}
} else {
player.frame = 0;
player.frameTimer = 0;
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// ground
ctx.fillStyle = "#334155";
ctx.fillRect(0, player.y + CELL * 0.5, canvas.width, 4);
if (!sheet.complete || !sheet.naturalWidth) return;
const sx = player.frame * CELL;
const drawW = CELL * 0.5; // scale down for canvas
const drawH = CELL * 0.5;
ctx.save();
ctx.translate(player.x + drawW / 2, player.y);
ctx.scale(player.facing, 1);
ctx.drawImage(
sheet, sx, 0, CELL, CELL,
-drawW / 2, -drawH / 2, drawW, drawH
);
ctx.restore();
}
let last = performance.now();
function loop(now) {
const dt = Math.min(0.05, (now - last) / 1000);
last = now;
update(dt);
draw();
requestAnimationFrame(loop);
}
sheet.onload = () => requestAnimationFrame(loop);
// if cached
if (sheet.complete) requestAnimationFrame(loop);
</script>
</body>
</html>
