awacke1's picture
Update index.html
0c1ca25 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Leaning Tower of Pisa: Castle Builder</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Apply Inter font and basic reset */
body {
font-family: 'Inter', sans-serif;
margin: 0;
overflow: hidden; /* Prevent scrollbars due to canvas */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #1a202c; /* Dark background */
color: #e2e8f0; /* Light text color */
}
/* Canvas styling to fill the screen and be responsive */
canvas {
display: block;
width: 100%;
height: 100%;
background-color: #2d3748; /* Slightly lighter dark background for canvas */
border-radius: 1rem; /* Rounded corners */
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}
/* Game UI container */
#game-container {
position: relative;
width: 100vw;
height: calc(100vh - 80px); /* Adjust height to make space for controls */
display: grid; /* Use grid for layout */
grid-template-columns: 1fr 200px; /* Canvas takes remaining space, panel takes 200px */
gap: 0; /* No gap between canvas and panel */
margin-bottom: 1rem;
max-width: 1200px; /* Limit max width for better aesthetics */
border-radius: 1rem;
overflow: hidden; /* Ensure rounded corners apply */
}
#gameCanvas {
grid-column: 1 / 2; /* Canvas in the first column */
width: 100%;
height: 100%;
}
/* Score displays */
.score-display {
position: absolute;
font-size: 1.5rem;
font-weight: bold;
background-color: rgba(45, 55, 72, 0.8); /* Semi-transparent dark background */
padding: 0.75rem 1.25rem;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 10;
}
#player1-score {
top: 1rem;
left: 1rem;
color: #63b3ed; /* Blue for Player 1 */
}
#player2-score {
top: 1rem;
right: 1rem;
color: #f6ad55; /* Orange for Player 2 */
}
/* Controls Panel */
#controls-panel {
grid-column: 2 / 3; /* Panel in the second column */
width: 100%; /* Fill its grid cell */
height: 100%;
padding: 1rem;
background-color: #2d3748; /* Dark background */
border-radius: 0 1rem 1rem 0; /* Rounded right corners */
box-shadow: inset 4px 0 14px rgba(0, 0, 0, 0.3); /* Inner shadow */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: 0.9rem; /* Small text */
overflow-y: auto; /* Scroll if content overflows */
}
#controls-panel h3 {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 1rem;
color: #e2e8f0;
}
#controls-panel h4 {
font-size: 1rem;
font-weight: bold;
margin-top: 0.75rem;
margin-bottom: 0.25rem;
}
.player-controls-section {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
}
.player-controls-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.movement-buttons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.3rem;
width: 100px; /* Fixed width for the grid of buttons */
margin: 0.5rem auto; /* Center the grid */
}
.movement-buttons-grid .grid-cell {
display: flex;
justify-content: center;
align-items: center;
}
.control-btn {
padding: 0.4rem 0.6rem;
font-size: 0.75rem; /* Really small text for buttons */
font-weight: bold;
background-color: #4a5568; /* Darker gray */
color: #e2e8f0;
border: none;
border-radius: 0.4rem;
cursor: pointer;
transition: all 0.1s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
width: 100%; /* Make buttons fill grid cell */
text-align: center;
line-height: 1; /* Adjust line height for small text */
}
.control-btn:hover {
background-color: #63b3ed; /* Default blue on hover */
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.control-btn:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* Specific hover colors for players */
.control-btn[data-player="1"]:hover {
background-color: #63b3ed; /* Blue for P1 */
}
.control-btn[data-player="2"]:hover {
background-color: #f6ad55; /* Orange for P2 */
}
.rules-text {
font-size: 0.7rem; /* Really small text for rules */
color: #a0aec0;
line-height: 1.3;
}
/* Control and Reset button container (bottom) */
#controls-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background-color: #2d3748;
border-radius: 1rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 600px;
margin-top: 1rem; /* Space between canvas and controls */
}
/* Reset button */
#reset-button {
padding: 0.75rem 1.5rem;
font-size: 1.1rem;
font-weight: bold;
background: linear-gradient(145deg, #f56565, #e53e3e); /* Red gradient */
color: white;
border: none;
border-radius: 0.75rem;
cursor: pointer;
transition: all 0.2s ease-in-out;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
#reset-button:hover {
background: linear-gradient(145deg, #e53e3e, #c53030);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
#reset-button:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Game Over message */
#game-over-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 2rem;
border-radius: 1rem;
text-align: center;
font-size: 2.5rem;
font-weight: bold;
display: none; /* Hidden by default */
z-index: 20;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translate(-50%, -60%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
/* Responsive adjustments */
@media (max-width: 768px) {
#game-container {
grid-template-columns: 1fr; /* Stack vertically on small screens */
grid-template-rows: 1fr auto; /* Canvas takes space, panel takes auto height */
height: calc(100vh - 160px); /* Adjust height for controls at bottom */
max-width: 100vw; /* Full width */
border-radius: 0; /* No rounded corners for full screen */
}
#gameCanvas {
grid-row: 1 / 2;
border-radius: 0;
}
#controls-panel {
grid-row: 2 / 3;
width: 100%; /* Full width at bottom */
height: auto; /* Auto height */
border-radius: 1rem 1rem 0 0; /* Rounded top corners */
box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.3); /* Shadow from bottom */
}
.score-display {
font-size: 1.2rem;
padding: 0.5rem 1rem;
}
#game-over-message {
font-size: 1.8rem;
padding: 1.5rem;
}
#reset-button {
font-size: 1rem;
padding: 0.6rem 1.2rem;
}
}
</style>
</head>
<body>
<div id="game-container">
<div id="player1-score" class="score-display">P1: 0</div>
<div id="player2-score" class="score-display">P2: 0</div>
<canvas id="gameCanvas"></canvas>
<div id="controls-panel">
<h3>Controls & Rules</h3>
<div class="player-controls-section">
<h4 class="text-blue-300">Player 1 (Blue)</h4>
<p class="text-gray-300 text-xs">Keyboard: WASD to move, E to Release Part</p>
<div class="movement-buttons-grid">
<div class="grid-cell"></div>
<div class="grid-cell"><button class="control-btn" data-player="1" data-action="move-forward">W</button></div>
<div class="grid-cell"></div>
<div class="grid-cell"><button class="control-btn" data-player="1" data-action="move-left">A</button></div>
<div class="grid-cell"><button class="control-btn" data-player="1" data-action="move-backward">S</button></div>
<div class="grid-cell"><button class="control-btn" data-player="1" data-action="move-right">D</button></div>
</div>
<button class="control-btn w-3/4 mx-auto block mt-2" data-player="1" data-action="release">Release Part (E)</button>
</div>
<div class="player-controls-section">
<h4 class="text-orange-300">Player 2 (Orange)</h4>
<p class="text-gray-300 text-xs">Keyboard: IJKL to move, U to Release Part</p>
<div class="movement-buttons-grid">
<div class="grid-cell"></div>
<div class="grid-cell"><button class="control-btn" data-player="2" data-action="move-forward">I</button></div>
<div class="grid-cell"></div>
<div class="grid-cell"><button class="control-btn" data-player="2" data-action="move-left">J</button></div>
<div class="grid-cell"><button class="control-btn" data-player="2" data-action="move-backward">K</button></div>
<div class="grid-cell"><button class="control-btn" data-player="2" data-action="move-right">L</button></div>
</div>
<button class="control-btn w-3/4 mx-auto block mt-2" data-player="2" data-action="release">Release Part (U)</button>
</div>
<div class="flex-grow"></div> <div class="w-full">
<h4 class="text-white">Game Rules</h4>
<p class="rules-text">
Control your character to guide falling castle parts.
<br>Release parts to build your tower.
<br>Build the tallest stable castle.
<br>If any castle collapses, game over!
<br>Players take turns building.
</p>
</div>
</div>
<div id="game-over-message">Game Over! A Castle Toppled!</div>
</div>
<div id="controls-container">
<button id="reset-button">Reset Game</button>
</div>
<script>
// Global variables for Three.js and Cannon.js
let scene, camera, renderer;
let world; // Cannon.js physics world
// Game state variables
let blocks = []; // Array to hold all placed blocks (Three.js mesh and Cannon.js body)
let currentFallingBlock = null; // The block currently falling and being controlled by the player
let playerCharacters = {}; // Stores player characters (Three.js mesh and Cannon.js body)
let playerScores = {
player1: 0,
player2: 0
};
let currentPlayer = 1; // Start with Player 1
let isGameOver = false;
// Block properties
const BLOCK_SPAWN_HEIGHT = 15; // Y-coordinate where blocks appear
const FALL_THRESHOLD = -5; // If a block falls below this Y-coordinate, game over
// Player properties
const PLAYER_MOVE_SPEED = 0.15; // Character movement speed
const PLAYER_SPAWN_OFFSET_X = 8; // How far players spawn from the center
const CASTLE_BUILD_OFFSET_X = 5; // How far building areas are from the center
// HTML elements
const player1ScoreElement = document.getElementById('player1-score');
const player2ScoreElement = document.getElementById('player2-score');
const resetButton = document.getElementById('reset-button');
const gameOverMessage = document.getElementById('game-over-message');
const canvas = document.getElementById('gameCanvas');
// Keyboard state
let keysPressed = {};
// Castle Part Definitions
const castlePartTypes = [
{
name: "Wall",
color: 0x9e9e9e, // Grey
geometry: new THREE.BoxGeometry(3, 1.5, 0.8),
shape: new CANNON.Box(new CANNON.Vec3(1.5, 0.75, 0.4)),
mass: 2
},
{
name: "Tower Base",
color: 0x757575, // Darker Grey
geometry: new THREE.CylinderGeometry(1.2, 1.2, 2.5, 16),
shape: new CANNON.Cylinder(1.2, 1.2, 2.5, 16),
mass: 3
},
{
name: "Catapult Base",
color: 0x5d4037, // Brown
geometry: new THREE.BoxGeometry(2.5, 1.0, 2.5),
shape: new CANNON.Box(new CANNON.Vec3(1.25, 0.5, 1.25)),
mass: 2.5
}
];
let currentPartIndex = 0; // To cycle through castle parts
// --- Initialization ---
function init() {
// Scene setup
scene = new THREE.Scene();
scene.background = new THREE.Color(0x333333); // Dark grey background for the 3D scene
// Camera setup (PerspectiveCamera for a more dynamic 3D feel)
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 20, 20); // Position above and slightly in front
camera.lookAt(0, 0, 0); // Look at the origin
// Renderer setup
renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true; // Enable shadows
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Soft shadows
// Lighting
const ambientLight = new THREE.AmbientLight(0x404040, 1.5); // Soft white light
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
directionalLight.position.set(10, 30, 10);
directionalLight.castShadow = true; // Enable shadow casting for the light
// Configure shadow properties for better quality
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 50;
directionalLight.shadow.camera.left = -20;
directionalLight.shadow.camera.right = 20;
directionalLight.shadow.camera.top = 20;
directionalLight.shadow.camera.bottom = -20;
scene.add(directionalLight);
// Cannon.js physics world setup
world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // Set gravity (m/s^2)
world.broadphase = new CANNON.SAPBroadphase(world); // Improve collision detection performance
world.solver.iterations = 10; // Increase solver iterations for better stability
// Create the ground/base platforms for each castle
createGround();
// Create player characters (static)
playerCharacters.player1 = createPrimitiveCharacter(0x63b3ed, -PLAYER_SPAWN_OFFSET_X); // Blue, left side
playerCharacters.player2 = createPrimitiveCharacter(0xf6ad55, PLAYER_SPAWN_OFFSET_X); // Orange, right side
scene.add(playerCharacters.player1.mesh);
world.addBody(playerCharacters.player1.body);
scene.add(playerCharacters.player2.mesh);
world.addBody(playerCharacters.player2.body);
// Event Listeners
window.addEventListener('resize', onWindowResize);
document.addEventListener('keydown', onKeyDown);
document.addEventListener('keyup', onKeyUp);
resetButton.addEventListener('click', resetGame);
// Add event listeners for control buttons
document.querySelectorAll('.control-btn').forEach(button => {
button.addEventListener('click', (event) => {
const playerNum = parseInt(event.target.dataset.player);
const action = event.target.dataset.action;
if (action === 'release') {
// Only allow release if it's the current player's turn to influence
if (currentPlayer === playerNum) {
handleReleaseAction();
}
} else {
// For movement buttons, apply a temporary force
applyPlayerMovementForce(playerNum, action);
}
});
});
// Start the first block
newBlock();
// Start the animation loop
animate();
}
// --- Ground Creation ---
function createGround() {
// Main arena ground
const arenaGeometry = new THREE.BoxGeometry(30, 1, 20);
const arenaMaterial = new THREE.MeshStandardMaterial({ color: 0x4a5568, roughness: 0.8, metalness: 0.1 });
const arenaMesh = new THREE.Mesh(arenaGeometry, arenaMaterial);
arenaMesh.position.y = -0.5;
arenaMesh.receiveShadow = true;
scene.add(arenaMesh);
const arenaShape = new CANNON.Box(new CANNON.Vec3(15, 0.5, 10));
const arenaBody = new CANNON.Body({ mass: 0, shape: arenaShape, material: new CANNON.Material('groundMaterial') });
arenaBody.position.copy(arenaMesh.position);
world.addBody(arenaBody);
// Player 1 building platform (blue)
const p1PlatformGeometry = new THREE.BoxGeometry(6, 0.2, 6);
const p1PlatformMaterial = new THREE.MeshStandardMaterial({ color: 0x3182ce, roughness: 0.5, metalness: 0.1 });
const p1PlatformMesh = new THREE.Mesh(p1PlatformGeometry, p1PlatformMaterial);
p1PlatformMesh.position.set(-CASTLE_BUILD_OFFSET_X, 0.05, 0); // Slightly above main ground
p1PlatformMesh.receiveShadow = true;
scene.add(p1PlatformMesh);
const p1PlatformShape = new CANNON.Box(new CANNON.Vec3(3, 0.1, 3));
const p1PlatformBody = new CANNON.Body({ mass: 0, shape: p1PlatformShape, material: new CANNON.Material('groundMaterial') });
p1PlatformBody.position.copy(p1PlatformMesh.position);
world.addBody(p1PlatformBody);
// Player 2 building platform (orange)
const p2PlatformGeometry = new THREE.BoxGeometry(6, 0.2, 6);
const p2PlatformMaterial = new THREE.MeshStandardMaterial({ color: 0xea8a00, roughness: 0.5, metalness: 0.1 });
const p2PlatformMesh = new THREE.Mesh(p2PlatformGeometry, p2PlatformMaterial);
p2PlatformMesh.position.set(CASTLE_BUILD_OFFSET_X, 0.05, 0); // Slightly above main ground
p2PlatformMesh.receiveShadow = true;
scene.add(p2PlatformMesh);
const p2PlatformShape = new CANNON.Box(new CANNON.Vec3(3, 0.1, 3));
const p2PlatformBody = new CANNON.Body({ mass: 0, shape: p2PlatformShape, material: new CANNON.Material('groundMaterial') });
p2PlatformBody.position.copy(p2PlatformMesh.position);
world.addBody(p2PlatformBody);
}
// --- Primitive Character Creation (Static) ---
function createPrimitiveCharacter(color, initialX) {
const characterGroup = new THREE.Group();
const scaleFactor = 1.0;
// Body: A central box
const bodyGeometry = new THREE.BoxGeometry(1.0 * scaleFactor, 1.8 * scaleFactor, 1.0 * scaleFactor);
const bodyMaterial = new THREE.MeshStandardMaterial({ color: color, roughness: 0.7, metalness: 0.2 });
const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial);
bodyMesh.position.y = 0.9 * scaleFactor;
characterGroup.add(bodyMesh);
// Head: A sphere on top of the body
const headGeometry = new THREE.SphereGeometry(0.5 * scaleFactor, 16, 16);
const headMaterial = new THREE.MeshStandardMaterial({ color: color, roughness: 0.7, metalness: 0.2 });
const headMesh = new THREE.Mesh(headGeometry, headMaterial);
headMesh.position.y = 1.8 * scaleFactor;
characterGroup.add(headMesh);
// Arms (purely visual, no physics interaction)
const armGeometry = new THREE.CylinderGeometry(0.2 * scaleFactor, 0.2 * scaleFactor, 1.0 * scaleFactor);
const armMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.7, metalness: 0.2 });
const rightArm = new THREE.Mesh(armGeometry, armMaterial);
rightArm.position.set(-0.6 * scaleFactor, 1.3 * scaleFactor, 0);
rightArm.rotation.z = Math.PI / 2;
characterGroup.add(rightArm);
characterGroup.rightArm = rightArm; // Store reference for animation
const leftArm = new THREE.Mesh(armGeometry, armMaterial);
leftArm.position.set(0.6 * scaleFactor, 1.3 * scaleFactor, 0);
leftArm.rotation.z = -Math.PI / 2;
characterGroup.add(leftArm);
characterGroup.leftArm = leftArm; // Store reference for animation
// Cannon.js body for the character (STATIC)
const characterShape = new CANNON.Box(new CANNON.Vec3(0.5 * scaleFactor, 0.9 * scaleFactor, 0.5 * scaleFactor));
const characterBody = new CANNON.Body({
mass: 0, // Mass 0 makes it static
type: CANNON.Body.STATIC, // Explicitly set as static
shape: characterShape,
material: new CANNON.Material('playerMaterial')
});
characterBody.position.set(initialX, 0.9 * scaleFactor, 0);
// Animation properties for visual punch (no physics interaction)
characterGroup.isPunching = false;
characterGroup.punchAnimationProgress = 0;
characterGroup.punchDuration = 15; // frames
return { mesh: characterGroup, body: characterBody };
}
// --- Block Creation (Castle Parts) ---
function newBlock() {
if (isGameOver) return;
const partDef = castlePartTypes[currentPartIndex];
const mesh = new THREE.Mesh(partDef.geometry, new THREE.MeshStandardMaterial({ color: partDef.color, roughness: 0.7, metalness: 0.2 }));
mesh.castShadow = true;
scene.add(mesh);
// Get current player's character position for spawning the block
const playerCharBody = playerCharacters[`player${currentPlayer}`].body;
const spawnX = playerCharBody.position.x;
const spawnZ = playerCharBody.position.z;
const body = new CANNON.Body({ mass: partDef.mass, shape: partDef.shape, material: new CANNON.Material('blockMaterial') });
body.fixedRotation = false; // Allow rotation
body.position.set(spawnX, BLOCK_SPAWN_HEIGHT, spawnZ); // Spawn at player's horizontal position
world.addBody(body);
currentFallingBlock = {
mesh: mesh,
body: body,
player: currentPlayer,
height: partDef.geometry.parameters.height || (partDef.geometry.parameters.radius * 2), // Use height from geometry
};
// Add the falling block to the main blocks array
blocks.push(currentFallingBlock);
// No need to set mass to 0 initially or restore it, as it's always falling.
// The "release" action will now just switch turns.
}
// --- Game Loop ---
const timeStep = 1 / 60; // seconds
let lastTime;
function animate(time) {
if (isGameOver) {
return;
}
requestAnimationFrame(animate);
if (lastTime !== undefined) {
const dt = (time - lastTime) / 1000;
world.step(timeStep, dt); // Update physics
}
lastTime = time;
// Update Three.js meshes from Cannon.js bodies
for (let i = 0; i < blocks.length; i++) {
blocks[i].mesh.position.copy(blocks[i].body.position);
blocks[i].mesh.quaternion.copy(blocks[i].body.quaternion);
// Check if any block has fallen too far (game over condition)
if (blocks[i].body.position.y < FALL_THRESHOLD) {
endGame();
return;
}
// Update score based on the highest block in each player's castle
const blockTopY = blocks[i].body.position.y + blocks[i].height / 2;
if (blocks[i].player === 1) {
playerScores.player1 = Math.max(playerScores.player1, blockTopY);
} else if (blocks[i].player === 2) {
playerScores.player2 = Math.max(playerScores.player2, blockTopY);
}
}
updateScoreDisplay();
// Synchronize player character meshes with their physics bodies (even if static, for visual updates)
playerCharacters.player1.mesh.position.copy(playerCharacters.player1.body.position);
playerCharacters.player1.mesh.quaternion.copy(playerCharacters.player1.body.quaternion);
playerCharacters.player2.mesh.position.copy(playerCharacters.player2.body.position);
playerCharacters.player2.mesh.quaternion.copy(playerCharacters.player2.body.quaternion);
// Handle player movement input
handlePlayerMovement(playerCharacters.player1, 1);
handlePlayerMovement(playerCharacters.player2, 2);
// Handle punch animations (visual only for characters)
updatePunchAnimation(playerCharacters.player1.mesh);
updatePunchAnimation(playerCharacters.player2.mesh);
renderer.render(scene, camera);
}
// --- Player Movement Logic ---
function handlePlayerMovement(playerChar, playerNum) {
const playerBody = playerChar.body;
let moveX = 0;
let moveZ = 0;
if (playerNum === 1) {
if (keysPressed['w']) moveZ = -PLAYER_MOVE_SPEED;
if (keysPressed['s']) moveZ = PLAYER_MOVE_SPEED;
if (keysPressed['a']) moveX = -PLAYER_MOVE_SPEED;
if (keysPressed['d']) moveX = PLAYER_MOVE_SPEED;
} else if (playerNum === 2) {
if (keysPressed['i']) moveZ = -PLAYER_MOVE_SPEED;
if (keysPressed['k']) moveZ = PLAYER_MOVE_SPEED;
if (keysPressed['j']) moveX = -PLAYER_MOVE_SPEED;
if (keysPressed['l']) moveX = PLAYER_MOVE_SPEED;
}
// Move the player character
playerBody.position.x += moveX * 5; // Direct position update for static body
playerBody.position.z += moveZ * 5;
// Keep player character within arena bounds
const arenaHalfWidth = 14; // Half width of the arena ground
const arenaHalfDepth = 9; // Half depth of the arena ground
playerBody.position.x = Math.max(-arenaHalfWidth, Math.min(arenaHalfWidth, playerBody.position.x));
playerBody.position.z = Math.max(-arenaHalfDepth, Math.min(arenaHalfDepth, playerBody.position.z));
// Make player character face the direction of movement
if (moveX !== 0 || moveZ !== 0) {
const targetQuaternion = new THREE.Quaternion().setFromUnitVectors(
new THREE.Vector3(0, 0, 1), // Default forward direction
new THREE.Vector3(moveX, 0, moveZ).normalize()
);
playerChar.mesh.quaternion.slerp(targetQuaternion, 0.1); // Smooth rotation
}
}
// --- Punch Animation Logic (Visual only) ---
function updatePunchAnimation(playerMesh) {
if (playerMesh.isPunching) {
playerMesh.punchAnimationProgress++;
const progress = playerMesh.punchAnimationProgress / playerMesh.punchDuration;
// Simple punch animation: arm moves forward and back
const armSwing = Math.sin(progress * Math.PI) * Math.PI / 4; // Swing from 0 to PI/4 and back
playerMesh.rightArm.rotation.x = armSwing; // Rotate arm forward
if (playerMesh.punchAnimationProgress >= playerMesh.punchDuration) {
playerMesh.isPunching = false;
playerMesh.punchAnimationProgress = 0;
playerMesh.rightArm.rotation.x = 0; // Reset arm position
}
}
}
// --- Release Action Handler (Now "Confirm Placement" and turn switch) ---
function handleReleaseAction() {
// Start punch animation for the current player's character
const playerCharMesh = playerCharacters[`player${currentPlayer}`].mesh;
if (!playerCharMesh.isPunching) {
playerCharMesh.isPunching = true;
playerCharMesh.punchAnimationProgress = 0;
}
// Switch player for the next block
currentPlayer = currentPlayer === 1 ? 2 : 1;
// Generate a new block after a short delay to allow physics to settle
// This new block will immediately start falling at the new player's location
setTimeout(newBlock, 500);
}
// --- Event Handlers ---
function onWindowResize() {
const gameContainer = document.getElementById('game-container');
const controlsPanel = document.getElementById('controls-panel');
let canvasWidth, canvasHeight;
if (window.innerWidth > 768) {
canvasWidth = gameContainer.clientWidth - (controlsPanel.clientWidth || 0);
canvasHeight = gameContainer.clientHeight;
} else {
canvasWidth = gameContainer.clientWidth;
canvasHeight = gameContainer.clientHeight - (controlsPanel.clientHeight || 0);
}
canvasWidth = Math.max(1, canvasWidth);
canvasHeight = Math.max(1, canvasHeight);
camera.aspect = canvasWidth / canvasHeight;
camera.updateProjectionMatrix();
renderer.setSize(canvasWidth, canvasHeight);
}
function onKeyDown(event) {
keysPressed[event.key.toLowerCase()] = true;
// Handle release actions for keyboard
if (event.key.toLowerCase() === 'e' && currentPlayer === 1) {
handleReleaseAction();
}
if (event.key.toLowerCase() === 'u' && currentPlayer === 2) {
handleReleaseAction();
}
}
function onKeyUp(event) {
keysPressed[event.key.toLowerCase()] = false;
}
function updateScoreDisplay() {
player1ScoreElement.textContent = `P1: ${playerScores.player1.toFixed(2)}`;
player2ScoreElement.textContent = `P2: ${playerScores.player2.toFixed(2)}`;
}
function endGame() {
isGameOver = true;
gameOverMessage.style.display = 'block';
}
function resetGame() {
// Clear all blocks from scene and world
blocks.forEach(block => {
scene.remove(block.mesh);
world.removeBody(block.body);
});
blocks = []; // Clear the array
// Reset scores
playerScores = { player1: 0, player2: 0 };
updateScoreDisplay();
// Reset game state
isGameOver = false;
gameOverMessage.style.display = 'none';
currentPlayer = 1; // Start with Player 1
currentPartIndex = 0; // Reset part cycle
// Reset player character positions
playerCharacters.player1.body.position.set(-PLAYER_SPAWN_OFFSET_X, 0.9, 0);
playerCharacters.player1.mesh.position.copy(playerCharacters.player1.body.position);
playerCharacters.player1.mesh.rotation.set(0,0,0); // Reset mesh rotation
playerCharacters.player2.body.position.set(PLAYER_SPAWN_OFFSET_X, 0.9, 0);
playerCharacters.player2.mesh.position.copy(playerCharacters.player2.body.position);
playerCharacters.player2.mesh.rotation.set(0,0,0); // Reset mesh rotation
// Generate a new block to start
newBlock();
// Restart animation loop if it was stopped
if (!isGameOver && lastTime === undefined) {
animate();
}
}
// --- Start the game when the window loads ---
window.onload = function () {
init();
updateScoreDisplay(); // Initialize score display
onWindowResize(); // Call once to set initial canvas size correctly
};
</script>
</body>
</html>