diff options
| author | elioat <elioat@tilde.institute> | 2024-12-28 19:57:58 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-12-28 19:57:58 -0500 |
| commit | 1efe21139c8f76541e37918de31e80fcb33e6e07 (patch) | |
| tree | d1a5d272e35615e3d44465180443e4ec08f633e9 | |
| parent | 426c199bb4074fc33861e656d70ec7fa5fdc0265 (diff) | |
| download | tour-1efe21139c8f76541e37918de31e80fcb33e6e07.tar.gz | |
*
| -rw-r--r-- | html/voxels/index.html | 4 | ||||
| -rw-r--r-- | html/voxels/js/game.js | 33 |
2 files changed, 27 insertions, 10 deletions
diff --git a/html/voxels/index.html b/html/voxels/index.html index 4f60ff2..fda7eba 100644 --- a/html/voxels/index.html +++ b/html/voxels/index.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <title>Isometric Game</title> <style> @@ -11,7 +11,7 @@ display: block; width: 100vw; height: 100vh; - background: #f0f0f0; + background: #bce8ff; } </style> </head> diff --git a/html/voxels/js/game.js b/html/voxels/js/game.js index 4547634..2ced6fd 100644 --- a/html/voxels/js/game.js +++ b/html/voxels/js/game.js @@ -97,6 +97,23 @@ class IsometricGame { // Apply jump height offset const jumpOffset = this.player.jumpHeight || 0; + // Calculate squash and stretch based on jump progress + let squashStretch = 1; + if (this.player.isJumping) { + // Stretch at the start and middle of jump, squash at landing + const jumpPhase = Math.sin(this.player.jumpProgress * Math.PI); + if (this.player.jumpProgress < 0.2) { + // Initial stretch when jumping + squashStretch = 1 + (0.3 * (1 - this.player.jumpProgress / 0.2)); + } else if (this.player.jumpProgress > 0.8) { + // Squash when landing + squashStretch = 1 - (0.3 * ((this.player.jumpProgress - 0.8) / 0.2)); + } else { + // Slight stretch at peak of jump + squashStretch = 1 + (0.1 * jumpPhase); + } + } + // Draw player shadow (gets smaller when jumping) const shadowScale = Math.max(0.2, 1 - (jumpOffset / this.tileHeight)); this.ctx.beginPath(); @@ -112,28 +129,28 @@ class IsometricGame { this.ctx.fillStyle = `rgba(0,0,0,${0.2 * shadowScale})`; this.ctx.fill(); - // Draw player body with jump offset + // Draw player body with jump offset and squash/stretch this.ctx.beginPath(); this.ctx.fillStyle = '#ff4444'; this.ctx.strokeStyle = '#aa0000'; - const bodyHeight = this.player.size * 2; - const bodyWidth = this.player.size * 0.8; + const bodyHeight = this.player.size * 2 * squashStretch; + const bodyWidth = this.player.size * 0.8 * (1 / squashStretch); // Inverse stretch for width this.ctx.save(); this.ctx.translate(iso.x + this.offsetX, iso.y + this.offsetY - jumpOffset); - this.ctx.scale(1, 0.5); + this.ctx.scale(1, 0.5); // Apply isometric perspective this.ctx.fillRect(-bodyWidth/2, -bodyHeight, bodyWidth, bodyHeight); this.ctx.strokeRect(-bodyWidth/2, -bodyHeight, bodyWidth, bodyHeight); this.ctx.restore(); - // Draw player head with jump offset + // Draw player head with jump offset and squash/stretch this.ctx.beginPath(); this.ctx.ellipse( iso.x + this.offsetX, - iso.y + this.offsetY - this.player.size - jumpOffset, - this.player.size, - this.player.size * 0.5, + iso.y + this.offsetY - this.player.size * squashStretch - jumpOffset, + this.player.size * (1 / squashStretch), + this.player.size * 0.5 * squashStretch, 0, 0, Math.PI * 2 |