function createGame() {
const state = {
canvas: document.getElementById('gameCanvas'),
ctx: null,
gridSize: 10,
tileWidth: 50,
tileHeight: 25,
offsetX: 0,
offsetY: 0,
particles: [],
lastFrameTime: 0,
player: {
x: 0,
y: 0,
targetX: 0,
targetY: 0,
size: 20,
path: [],
currentWaypoint: null,
jumpHeight: 0,
jumpProgress: 0,
isJumping: false,
startX: 0,
startY: 0
},
isHopping: false,
hopProgress: 0
};
state.ctx = state.canvas.getContext('2d');
function toIsometric(x, y) {
return {
x: (x - y) * state.tileWidth / 2,
y: (x + y) * state.tileHeight / 2
};
}
function fromIsometric(screenX, screenY) {
const adjustedX = screenX - state.offsetX;
const adjustedY = screenY - state.offsetY;
const x = (adjustedX / state.tileWidth + adjustedY / state.tileHeight) / 1;
const y = (adjustedY / state.tileHeight - adjustedX / state.tileWidth) / 1;
return { x: Math.round(x), y: Math.round(y) };
}
function resizeCanvas() {
state.canvas.width = window.innerWidth;
state.canvas.height = window.innerHeight;
state.offsetX = state.canvas.width / 2;
state.offsetY = state.canvas.height / 3;
const minDimension = Math.min(state.canvas.width, state.canvas.height);
const scaleFactor = minDimension / 800;
state.tileWidth = 50 * scaleFactor;
state.tileHeight = 25 * scaleFactor;
state.player.size = 20 * scaleFactor;
}
function dustyParticles(x, y) {
const particleCount = 12;
for (let i = 0; i < particleCount; i++) {
const baseAngle = (Math.PI * 2 * i) / particleCount;
const randomAngle = baseAngle + (Math.random() - 0.5) * 0.5;
const speed = 0.3 + Math.random() * 0.4;
const initialSize = (state.player.size * 0.15) + (Math.random() * state.player.size * 0.15);
const greyValue = 220 + Math.floor(Math.random() * 35);
state.particles.push({
x, y,
dx: Math.cos(randomAngle) * speed,
dy: Math.sin(randomAngle) * speed,
life: 0.8 + Math.random() * 0.4,
size: initialSize,
color: `rgb(${greyValue}, ${greyValue}, ${greyValue})`,
initialSize,
rotationSpeed: (Math.random() - 0.5) * 0.2,
rotation: Math.random() * Math.PI * 2
});
}
}
function updateParticles() {
for (let i = state.particles.length - 1; i >= 0; i--) {
const particle = state.particles[i];
particle.x += particle.dx;
particle.y += particle.dy;
particle.dy += 0.01;
particle.rotation += particle.rotationSpeed;
particle.life -= 0.03;
particle.size = particle.initialSize * (particle.life * 1.5);
if (particle.life <= 0) {
state.particles.splice(i, 1);
}
}
}
function findPath(startX, startY, endX, endY) {
const path = [];
if (startX !== endX) {
const stepX = startX < endX ? 1 : -1;
for (let x = startX + stepX; stepX > 0 ? x <= endX : x >= endX; x += stepX) {
path.push({ x, y: startY });
}
}
if (startY !== endY) {
const stepY = startY < endY ? 1 : -1;
for (let y = startY + stepY; stepY > 0 ? y <= endY : y >= endY; y += stepY) {
path.push({ x: endX, y });
}
}
return path;
}
function updatePlayer() {
const jumpDuration = 0.1;
const maxJumpHeight = state.tileHeight;
if (state.isHopping) {
state.hopProgress += jumpDuration;
state.hopProgress = Math.min(state.hopProgress, 1);
state.player.jumpHeight = Math.sin(state.hopProgress * Math.PI) * maxJumpHeight;
if (state.hopProgress >= 1) {
state.isHopping = false;
state.player.jumpHeight = 0;
}
} else {
if (!state.player.currentWaypoint && state.player.path.length > 0) {
state.player.currentWaypoint = state.player.path.shift();
state.player.isJumping = true;
state.player.jumpProgress = 0;
state.player.startX = state.player.x;
state.player.startY = state.player.y;
}
if (state.player.currentWaypoint && state.player.isJumping) {
state.player.jumpProgress += jumpDuration;
state.player.jumpProgress = Math.min(state.player.jumpProgress, 1);
state.player.jumpHeight = Math.sin(state.player.jumpProgress * Math.PI) * maxJumpHeight;
state.player.x = state.player.startX + (state.player.currentWaypoint.x - state.player.startX) * state.player.jumpProgress;
state.player.y = state.player.startY + (state.player.currentWaypoint.y - state.player.startY) * state.player.jumpProgress;
if (state.player.jumpProgress >= 1) {
state.player.isJumping = false;
state.player.jumpHeight = 0;
state.player.x = state.player.currentWaypoint.x;
state.player.y = state.player.currentWaypoint.y;
dustyParticles(state.player.x, state.player.y);
state.player.currentWaypoint = null;
}
}
}
}
function drawGrid() {
for (let x = 0; x < state.gridSize; x++) {
for (let y = 0; y < state.gridSize; y++) {
const iso = toIsometric(x, y);
// Diamonds!
state.ctx.beginPath(); // Start a new path
state.ctx.moveTo(iso.x + state.offsetX, iso.y + state.offsetY - state.tileHeight/2); // Move to the top point of the diamond
state.ctx.lineTo(iso.x + state.offsetX + state.tileWidth/2, iso.y + state.offsetY); // Draw line to the right point of the diamond
state.ctx.lineTo(iso.x + state.offsetX, iso.y + state.offsetY + state.tileHeight/2); // Draw line to the bottom point of the diamond
state.ctx.lineTo(iso.x + state.offsetX - state.tileWidth/2, iso.y + state.offsetY); // Draw line to the left point of the diamond
state.ctx.closePath(); // Close the path to complete the diamond
state.ctx.strokeStyle = '#666';
state.ctx.stroke();
state.ctx.fillStyle = '#fff';
state.ctx.fill();
}
}
}
function drawParticles() {
state.particles.forEach(particle => {
const iso = toIsometric(particle.x, particle.y);
state.ctx.save();
state.ctx.translate(iso.x + state.offsetX, iso.y + state.offsetY);
state.ctx.rotate(particle.rotation);
state.ctx.beginPath();
const points = 5;
for (let i = 0; i < points * 2; i++) {
const angle = (i * Math.PI) / points;
const radius = particle.size * (i % 2 ? 0.7 : 1);
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
i === 0 ? state.ctx.moveTo(x, y) : state.ctx.lineTo(x, y);
}
state.ctx.closePath();
state.ctx.fillStyle = `rgba(${particle.color.slice(4, -1)}, ${particle.life * 0.5})`;
state.ctx.fill();
state.ctx.restore();
});
}
function drawPlayer() {
const iso = toIsometric(state.player.x, state.player.y);
const jumpOffset = state.player.jumpHeight || state.player.jumpHeight;
let squashStretch = 1;
if (state.player.isJumping) {
const jumpPhase = Math.sin(state.player.jumpProgress * Math.PI);
if (state.player.jumpProgress < 0.2) {
squashStretch = 1 + (0.3 * (1 - state.player.jumpProgress / 0.2));
} else if (state.player.jumpProgress > 0.8) {
squashStretch = 1 - (0.3 * ((state.player.jumpProgress - 0.8) / 0.2));
} else {
squashStretch = 1 + (0.1 * jumpPhase);
}
}
const shadowScale = Math.max(0.2, 1 - (jumpOffset / state.tileHeight));
state.ctx.beginPath();
state.ctx.ellipse(
iso.x + state.offsetX,
iso.y + state.offsetY + 2,
state.player.size * 0.8 * shadowScale,
state.player.size * 0.3 * shadowScale,
0, 0, Math.PI * 2
);
state.ctx.fillStyle = `rgba(0,0,0,${0.2 * shadowScale})`;
state.ctx.fill();
const bodyHeight = state.player.size * 2 * squashStretch;
const bodyWidth = state.player.size * 0.8 * (1 / squashStretch);
state.ctx.save();
state.ctx.translate(iso.x + state.offsetX, iso.y + state.offsetY - jumpOffset);
state.ctx.scale(1, 0.5);
state.ctx.fillStyle = '#ff4444';
state.ctx.strokeStyle = '#aa0000';
state.ctx.fillRect(-bodyWidth/2, -bodyHeight, bodyWidth, bodyHeight);
state.ctx.strokeRect(-bodyWidth/2, -bodyHeight, bodyWidth, bodyHeight);
state.ctx.restore();
state.ctx.beginPath();
state.ctx.ellipse(
iso.x + state.offsetX,
iso.y + state.offsetY - state.player.size * squashStretch - jumpOffset,
state.player.size * (1 / squashStretch),
state.player.size * 0.5 * squashStretch,
0, 0, Math.PI * 2
);
state.ctx.fillStyle = '#ff4444';
state.ctx.fill();
state.ctx.strokeStyle = '#aa0000';
state.ctx.stroke();
}
function gameLoop(timestamp) {
const frameInterval = 1000 / 60;
if (!state.lastFrameTime || timestamp - state.lastFrameTime >= frameInterval) {
state.ctx.clearRect(0, 0, state.canvas.width, state.canvas.height);
drawGrid();
updateParticles();
drawParticles();
updatePlayer();
drawPlayer();
state.lastFrameTime = timestamp;
}
requestAnimationFrame(gameLoop);
}
function handleClick(e) {
const rect = state.canvas.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const clickY = e.clientY - rect.top;
const gridPos = fromIsometric(clickX, clickY);
const iso = toIsometric(state.player.x, state.player.y);
const playerRadius = state.player.size;
const distanceToPlayer = Math.sqrt(
Math.pow(clickX - (iso.x + state.offsetX), 2) +
Math.pow(clickY - (iso.y + state.offsetY), 2)
);
if (distanceToPlayer < playerRadius) {
state.isHopping = true;
state.hopProgress = 0;
} else if (gridPos.x >= 0 && gridPos.x < state.gridSize &&
gridPos.y >= 0 && gridPos.y < state.gridSize) {
state.player.targetX = Math.round(gridPos.x);
state.player.targetY = Math.round(gridPos.y);
state.player.path = findPath(
Math.round(state.player.x),
Math.round(state.player.y),
state.player.targetX,
state.player.targetY
);
state.player.currentWaypoint = null;
}
}
function init() {
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
state.canvas.addEventListener('click', handleClick);
state.lastFrameTime = 0;
gameLoop();
}
return { init };
}
window.onload = () => {
const game = createGame();
game.init();
};