Spaces:
Running
Running
| <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> | |