Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Primitive Punch-Up!</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <style> | |
| /* Basic styling for the body to remove default margins and overflows */ | |
| body { | |
| margin: 0; | |
| overflow: hidden; /* Hide scrollbars */ | |
| font-family: 'Inter', sans-serif; /* Use Inter font */ | |
| background-color: #1a1a1a; /* Dark background for the page */ | |
| } | |
| /* Container for the game canvas and UI elements */ | |
| #game-container { | |
| position: relative; | |
| width: 100vw; /* Full viewport width */ | |
| height: 100vh; /* Full viewport height */ | |
| display: flex; /* Use flexbox for centering */ | |
| justify-content: center; /* Center horizontally */ | |
| align-items: center; /* Center vertically */ | |
| overflow: hidden; /* Ensure no overflow */ | |
| } | |
| /* Styling for the score displays */ | |
| #score-left, #score-right { | |
| position: absolute; | |
| top: 20px; /* Distance from the top */ | |
| color: white; /* White text color */ | |
| font-size: 2.2em; /* Larger font size */ | |
| font-weight: bold; /* Bold text */ | |
| text-shadow: 3px 3px 6px rgba(0,0,0,0.8); /* Stronger text shadow for readability */ | |
| z-index: 10; /* Ensure it's above the canvas */ | |
| padding: 10px 15px; /* Padding around text */ | |
| background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent background */ | |
| border-radius: 12px; /* Rounded corners */ | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Subtle box shadow */ | |
| } | |
| #score-left { | |
| left: 30px; /* Position on the left */ | |
| } | |
| #score-right { | |
| right: 30px; /* Position on the right */ | |
| } | |
| /* Styling for the health bars */ | |
| #health-bar-left, #health-bar-right { | |
| position: absolute; | |
| top: 90px; /* Position below scores */ | |
| height: 35px; /* Height of the health bar */ | |
| background-color: green; /* Default healthy color */ | |
| border: 3px solid #ffffff; /* White border */ | |
| border-radius: 10px; /* Rounded corners */ | |
| transition: width 0.3s ease-out, background-color 0.3s ease-out; /* Smooth transitions for width and color */ | |
| z-index: 10; /* Ensure it's above the canvas */ | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Subtle box shadow */ | |
| } | |
| #health-bar-left { | |
| left: 50%; /* Start from the center */ | |
| transform: translateX(-105%); /* Shift left to align to the left of center */ | |
| width: 250px; /* Max width for health bar */ | |
| max-width: 250px; /* Ensure it doesn't exceed this width */ | |
| } | |
| #health-bar-right { | |
| right: 50%; /* Start from the center */ | |
| transform: translateX(5%); /* Shift right to align to the right of center */ | |
| width: 250px; /* Max width for health bar */ | |
| max-width: 250px; /* Ensure it doesn't exceed this width */ | |
| } | |
| /* Styling for the reset button */ | |
| #reset-button { | |
| position: absolute; | |
| bottom: 40px; /* Distance from the bottom */ | |
| left: 50%; /* Center horizontally */ | |
| transform: translateX(-50%); /* Adjust for true centering */ | |
| padding: 18px 35px; /* Generous padding */ | |
| font-size: 1.8em; /* Larger font size */ | |
| background: linear-gradient(145deg, #ff6b6b, #ee4444); /* Gradient background */ | |
| color: white; /* White text */ | |
| border: none; /* No border */ | |
| border-radius: 15px; /* More rounded corners */ | |
| cursor: pointer; /* Pointer cursor on hover */ | |
| box-shadow: 0 8px 20px rgba(0,0,0,0.6); /* Stronger shadow */ | |
| transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease; /* Smooth transitions */ | |
| z-index: 10; /* Ensure it's above the canvas */ | |
| font-weight: bold; /* Bold text */ | |
| letter-spacing: 1px; /* Slight letter spacing */ | |
| text-transform: uppercase; /* Uppercase text */ | |
| } | |
| #reset-button:hover { | |
| background: linear-gradient(145deg, #ff4d4d, #cc3333); /* Darker gradient on hover */ | |
| transform: translateX(-50%) scale(1.05); /* Slightly enlarge on hover */ | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.8); /* Deeper shadow on hover */ | |
| } | |
| #reset-button:active { | |
| transform: translateX(-50%) scale(0.98); /* Shrink slightly on click */ | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.4); /* Recessed shadow on click */ | |
| } | |
| /* Styling for the Three.js canvas */ | |
| canvas { | |
| display: block; /* Remove extra space below canvas */ | |
| width: 100%; /* Make canvas fill its container */ | |
| height: 100%; /* Make canvas fill its container */ | |
| border-radius: 15px; /* Rounded corners for the canvas itself */ | |
| box-shadow: 0 0 25px rgba(0,0,0,0.7); /* Shadow around the canvas */ | |
| } | |
| /* Controls display */ | |
| #controls { | |
| position: absolute; | |
| bottom: 120px; /* Position above the reset button */ | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background-color: rgba(0, 0, 0, 0.6); | |
| color: white; | |
| padding: 15px 25px; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.7); | |
| font-size: 1.1em; | |
| text-align: center; | |
| z-index: 10; | |
| display: flex; | |
| gap: 40px; /* Space between player control sections */ | |
| } | |
| #controls h3 { | |
| margin-top: 0; | |
| color: #ffd700; /* Gold color for headings */ | |
| font-size: 1.3em; | |
| margin-bottom: 10px; | |
| } | |
| #controls ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| text-align: left; | |
| } | |
| #controls li { | |
| margin-bottom: 5px; | |
| } | |
| #controls span { | |
| font-weight: bold; | |
| color: #aaffaa; /* Light green for keys */ | |
| display: inline-block; | |
| width: 40px; /* Fixed width for key display */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="game-container"> | |
| <div id="score-left">P1 Score: 0</div> | |
| <div id="score-right">P2 Score: 0</div> | |
| <div id="health-bar-left"></div> | |
| <div id="health-bar-right"></div> | |
| <button id="reset-button">Primitive Reset!</button> | |
| <div id="controls"> | |
| <div> | |
| <h3>Player 1 Controls</h3> | |
| <ul> | |
| <li><span>WASD:</span> Move</li> | |
| <li><span>E:</span> Attack</li> | |
| <li><span>Q:</span> Block</li> | |
| <li><span>C:</span> Change Gear</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3>Player 2 Controls</h3> | |
| <ul> | |
| <li><span>IJKL:</span> Move</li> | |
| <li><span>U:</span> Attack</li> | |
| <li><span>O:</span> Block</li> | |
| <li><span>M:</span> Change Gear</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module"> | |
| // Import Three.js library from a reliable CDN | |
| import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js'; | |
| // Declare global variables for Three.js scene, camera, renderer, and game state | |
| let scene, camera, renderer; | |
| let player1, player2; // Our primitive-assembled characters | |
| let player1Health = 100; | |
| let player2Health = 100; | |
| let player1Score = 0; | |
| let player2Score = 0; | |
| const maxHealth = 100; // Define max health for players | |
| const movementSpeed = 0.3; // Adjust movement speed for players | |
| const baseAttackDamage = 10; // Base damage dealt by an attack | |
| const blockReduction = 0.5; // Percentage of damage reduced when blocking (e.g., 0.5 means 50% less damage) | |
| const playerScaleFactor = 1.5; // Scale factor for players | |
| const attackRange = 2 * (1.5 * playerScaleFactor); // About 2 player widths | |
| // Projectile parameters | |
| const projectileSpeed = 0.8; | |
| const projectileLife = 120; // frames (2 seconds at 60fps) | |
| const projectileRadius = 0.3; | |
| // Object to keep track of pressed keys for smooth movement | |
| const keys = { | |
| w: false, a: false, s: false, d: false, | |
| i: false, j: false, k: false, l: false, | |
| p1_attack: false, p1_block: false, p1_change_gear: false, | |
| p2_attack: false, p2_block: false, p2_change_gear: false | |
| }; | |
| // Weapon and Shield Definitions for DnD-like classes | |
| const gearCombinations = [ | |
| { name: "Fighter (Sword & Kite Shield)", weapon: "sword", shield: "kite_shield" }, | |
| { name: "Barbarian (Great Axe)", weapon: "great_axe", shield: null }, | |
| { name: "Rogue (Daggers & Buckler)", weapon: "dagger", shield: "buckler" }, | |
| { name: "Paladin (Mace & Tower Shield)", weapon: "mace", shield: "tower_shield" }, | |
| { name: "Ranger (Longbow)", weapon: "longbow", shield: null } | |
| ]; | |
| let player1GearIndex = 0; | |
| let player2GearIndex = 0; | |
| const activeProjectiles = []; | |
| const impactParticlesGroup = new THREE.Group(); | |
| const weaponRangeParticlesGroup = new THREE.Group(); // New group for weapon range particles | |
| /** | |
| * Generates a random integer within a specified range (inclusive). | |
| * @param {number} min - The minimum value. | |
| * @param {number} max - The maximum value. | |
| * @returns {number} A random integer. | |
| */ | |
| function getRandomInt(min, max) { | |
| min = Math.ceil(min); | |
| max = Math.floor(max); | |
| return Math.floor(Math.random() * (max - min + 1)) + min; | |
| } | |
| /** | |
| * Initializes the game environment, including the Three.js scene, camera, renderer, | |
| * 3D objects (players, ground), UI elements, and event listeners. | |
| */ | |
| function init() { | |
| // Scene Setup: The container for all 3D objects, lights, and cameras | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0x333333); // Dark grey background for the 3D scene | |
| // Camera Setup: Orthographic camera for a top-down semi-isometric view | |
| const aspectRatio = window.innerWidth / window.innerHeight; | |
| const frustumSize = 30; // Adjusted frustum size for a slightly more zoomed in view | |
| camera = new THREE.OrthographicCamera( | |
| frustumSize * aspectRatio / - 2, | |
| frustumSize * aspectRatio / 2, | |
| frustumSize / 2, | |
| frustumSize / - 2, | |
| 1, 1000 | |
| ); | |
| // Position camera for a top-down semi-isometric view | |
| camera.position.set(10, 30, 10); // Higher Y, and equal X/Z for a balanced angle | |
| camera.lookAt(0, 0, 0); // Make the camera look directly at the origin | |
| // Renderer Setup: Renders the 3D scene onto a 2D canvas | |
| renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| renderer.setPixelRatio(window.devicePixelRatio); | |
| document.getElementById('game-container').appendChild(renderer.domElement); | |
| // Lighting: Essential for seeing 3D objects | |
| const ambientLight = new THREE.AmbientLight(0x404040); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); | |
| directionalLight.position.set(5, 10, 7); | |
| scene.add(directionalLight); | |
| // Ground/Arena: A simple plane representing the fighting stage | |
| const groundGeometry = new THREE.PlaneGeometry(50, 50); // Larger ground for larger players | |
| const groundMaterial = new THREE.MeshPhongMaterial({ color: 0x666666, side: THREE.DoubleSide }); | |
| const ground = new THREE.Mesh(groundGeometry, groundMaterial); | |
| ground.rotation.x = -Math.PI / 2; | |
| scene.add(ground); | |
| // Player 1 Character: Created using primitive shapes | |
| player1 = createPrimitiveCharacter(0xff4500); // Red-orange color | |
| player1.position.set(-10, 0.5 * playerScaleFactor, 0); // Start on the left side of the arena, adjusted for size | |
| scene.add(player1); | |
| // Player 2 Character: Created using primitive shapes | |
| player2 = createPrimitiveCharacter(0x00aaff); // Blue color | |
| player2.position.set(10, 0.5 * playerScaleFactor, 0); // Start on the right side of the arena, adjusted for size | |
| scene.add(player2); | |
| // Initialize players with their starting gear | |
| updatePlayerGear(player1, player1GearIndex); | |
| updatePlayerGear(player2, player2GearIndex); | |
| // Add particle groups to the scene | |
| scene.add(impactParticlesGroup); | |
| scene.add(weaponRangeParticlesGroup); | |
| // UI Elements Initialization and Event Listeners | |
| document.getElementById('reset-button').addEventListener('click', resetGame); | |
| updateHealthBars(); | |
| updateScores(); | |
| // Event Listeners for Keyboard Input | |
| window.addEventListener('keydown', onKeyDown); | |
| window.addEventListener('keyup', onKeyUp); | |
| window.addEventListener('resize', onWindowResize); | |
| // Start the animation loop | |
| animate(); | |
| } | |
| /** | |
| * Creates a "primitive assembled" character with body, head, arms, and legs using Three.js primitives. | |
| * Each part is given a name and damage value for collision detection and health reduction. | |
| * @param {number} color - Hex color for the character. | |
| * @returns {THREE.Group} A group representing the player character. | |
| */ | |
| function createPrimitiveCharacter(color) { | |
| const character = new THREE.Group(); | |
| character.parts = []; // Array to hold all individual body parts | |
| character.missingParts = []; // Array to track removed parts | |
| character.playerColor = color; // Store the player's main color | |
| // Body: A central box | |
| const bodyGeometry = new THREE.BoxGeometry(1.5 * playerScaleFactor, 2.5 * playerScaleFactor, 1.5 * playerScaleFactor); | |
| const bodyMaterial = new THREE.MeshPhongMaterial({ color: color }); | |
| const body = new THREE.Mesh(bodyGeometry, bodyMaterial); | |
| body.position.y = 1.25 * playerScaleFactor; | |
| body.name = 'body'; | |
| body.damageValue = baseAttackDamage * 1.5; // Body hits deal more damage | |
| character.add(body); | |
| character.parts.push(body); | |
| // Head: A sphere on top of the body | |
| const headGeometry = new THREE.SphereGeometry(0.8 * playerScaleFactor, 24, 24); | |
| const headMaterial = new THREE.MeshPhongMaterial({ color: color }); | |
| const head = new THREE.Mesh(headGeometry, headMaterial); | |
| head.position.y = 3.2 * playerScaleFactor; | |
| head.name = 'head'; | |
| head.damageValue = baseAttackDamage * 3; // Headshots deal critical damage | |
| character.add(head); | |
| character.parts.push(head); | |
| const visorGeometry = new THREE.BoxGeometry(0.6 * playerScaleFactor, 0.2 * playerScaleFactor, 0.1 * playerScaleFactor); | |
| const visorMaterial = new THREE.MeshPhongMaterial({ color: 0x333333 }); | |
| const visor = new THREE.Mesh(visorGeometry, visorMaterial); | |
| visor.position.set(0, 1.8 * playerScaleFactor, 0.5 * playerScaleFactor); | |
| visor.name = 'visor'; // Not a critical part, no damageValue | |
| character.add(visor); | |
| character.parts.push(visor); | |
| // Arms: Two cylinders for arms | |
| const upperArmGeometry = new THREE.CylinderGeometry(0.3 * playerScaleFactor, 0.3 * playerScaleFactor, 0.7 * playerScaleFactor, 8); | |
| const lowerArmGeometry = new THREE.CylinderGeometry(0.28 * playerScaleFactor, 0.28 * playerScaleFactor, 0.7 * playerScaleFactor, 8); | |
| const armMaterial = new THREE.MeshPhongMaterial({ color: color }); | |
| // Player's right arm (for weapon) | |
| const rightArm = new THREE.Mesh(upperArmGeometry, armMaterial); | |
| rightArm.position.set(-1.2 * playerScaleFactor, 2.2 * playerScaleFactor, 0); | |
| rightArm.rotation.z = (color === 0xff4500) ? Math.PI / 6 : -Math.PI / 6; | |
| rightArm.rotation.x = 0; | |
| rightArm.name = 'rightArm'; | |
| rightArm.damageValue = baseAttackDamage * 0.8; | |
| character.add(rightArm); | |
| character.parts.push(rightArm); | |
| character.rightArm = rightArm; // Store reference for animation | |
| character.rightArmInitialRotZ = rightArm.rotation.z; | |
| character.rightArmInitialRotX = rightArm.rotation.x; | |
| const rightLowerArm = new THREE.Mesh(lowerArmGeometry, armMaterial); | |
| rightLowerArm.position.set(-1.7 * playerScaleFactor, 1.8 * playerScaleFactor, 0); | |
| rightLowerArm.rotation.z = Math.PI / 8; | |
| rightLowerArm.name = 'rightLowerArm'; | |
| rightLowerArm.damageValue = baseAttackDamage * 0.8; | |
| character.add(rightLowerArm); | |
| character.parts.push(rightLowerArm); | |
| // Player's left arm (for shield) | |
| const leftArm = new THREE.Mesh(upperArmGeometry, armMaterial); | |
| leftArm.position.set(1.2 * playerScaleFactor, 2.2 * playerScaleFactor, 0); | |
| leftArm.rotation.z = (color === 0xff4500) ? -Math.PI / 6 : Math.PI / 6; | |
| leftArm.rotation.x = 0; | |
| leftArm.rotation.y = 0; | |
| leftArm.name = 'leftArm'; | |
| leftArm.damageValue = baseAttackDamage * 0.8; | |
| character.add(leftArm); | |
| character.parts.push(leftArm); | |
| character.leftArm = leftArm; // Store reference for animation | |
| character.leftArmInitialRotZ = leftArm.rotation.z; | |
| character.leftArmInitialRotX = leftArm.rotation.x; | |
| character.leftArmInitialRotY = leftArm.rotation.y; | |
| const leftLowerArm = new THREE.Mesh(lowerArmGeometry, armMaterial); | |
| leftLowerArm.position.set(1.7 * playerScaleFactor, 1.8 * playerScaleFactor, 0); | |
| leftLowerArm.rotation.z = -Math.PI / 8; | |
| leftLowerArm.name = 'leftLowerArm'; | |
| leftLowerArm.damageValue = baseAttackDamage * 0.8; | |
| character.add(leftLowerArm); | |
| character.parts.push(leftLowerArm); | |
| // Legs: Two cylinders for legs | |
| const upperLegGeometry = new THREE.CylinderGeometry(0.25 * playerScaleFactor, 0.25 * playerScaleFactor, 0.8 * playerScaleFactor, 8); | |
| const lowerLegGeometry = new THREE.CylinderGeometry(0.2 * playerScaleFactor, 0.2 * playerScaleFactor, 0.8 * playerScaleFactor, 8); | |
| const legMaterial = new THREE.MeshPhongMaterial({ color: 0x777777 }); | |
| const leg1 = new THREE.Mesh(upperLegGeometry, legMaterial); | |
| leg1.position.set(-0.3 * playerScaleFactor, 0.4 * playerScaleFactor, 0); | |
| leg1.name = 'leftUpperLeg'; | |
| leg1.damageValue = baseAttackDamage * 0.5; | |
| character.add(leg1); | |
| character.parts.push(leg1); | |
| const leg2 = new THREE.Mesh(lowerLegGeometry, legMaterial); | |
| leg2.position.set(-0.3 * playerScaleFactor, -0.4 * playerScaleFactor, 0); | |
| leg2.name = 'leftLowerLeg'; | |
| leg2.damageValue = baseAttackDamage * 0.5; | |
| character.add(leg2); | |
| character.parts.push(leg2); | |
| const leg3 = new THREE.Mesh(upperLegGeometry, legMaterial); | |
| leg3.position.set(0.3 * playerScaleFactor, 0.4 * playerScaleFactor, 0); | |
| leg3.name = 'rightUpperLeg'; | |
| leg3.damageValue = baseAttackDamage * 0.5; | |
| character.add(leg3); | |
| character.parts.push(leg3); | |
| const leg4 = new THREE.Mesh(lowerLegGeometry, legMaterial); | |
| leg4.position.set(0.3 * playerScaleFactor, -0.4 * playerScaleFactor, 0); | |
| leg4.name = 'rightLowerLeg'; | |
| leg4.damageValue = baseAttackDamage * 0.5; | |
| character.add(leg4); | |
| character.parts.push(leg4); | |
| // Backpack (Box) | |
| const backpackGeometry = new THREE.BoxGeometry(0.8 * playerScaleFactor, 1 * playerScaleFactor, 0.4 * playerScaleFactor); | |
| const backpackMaterial = new THREE.MeshPhongMaterial({ color: 0x444444 }); | |
| const backpack = new THREE.Mesh(backpackGeometry, backpackMaterial); | |
| backpack.position.set(0, 0.75 * playerScaleFactor, -0.7 * playerScaleFactor); | |
| backpack.name = 'backpack'; // Not a critical part | |
| character.add(backpack); | |
| character.parts.push(backpack); | |
| // Store initial positions and rotations for resetting | |
| character.initialState = { | |
| position: character.position.clone(), | |
| parts: character.parts.map(part => ({ | |
| name: part.name, | |
| position: part.position.clone(), | |
| rotation: part.rotation.clone(), | |
| material: part.material // Store material reference | |
| })) | |
| }; | |
| // Animation properties | |
| character.isAttacking = false; | |
| character.attackAnimationProgress = 0; | |
| character.attackDuration = 15; // frames | |
| character.isBlocking = false; | |
| character.blockAnimationProgress = 0; | |
| character.blockDuration = 10; // frames | |
| // Store current weapon type for animation logic | |
| character.currentWeaponType = null; | |
| character.weaponMesh = null; // Reference to the actual weapon mesh | |
| character.shieldMesh = null; // Reference to the actual shield mesh | |
| return character; | |
| } | |
| /** | |
| * Creates a weapon mesh based on the specified type. | |
| * Includes a collision sphere for the weapon. | |
| * @param {string} type - The type of weapon (e.g., "sword", "longbow"). | |
| * @param {number} [color=0xcccccc] - Hex color for the weapon. | |
| * @returns {THREE.Group} A group representing the weapon. | |
| */ | |
| function createWeapon(type, color = 0xcccccc) { | |
| const weaponGroup = new THREE.Group(); | |
| const material = new THREE.MeshPhongMaterial({ color: color }); | |
| const handleMaterial = new THREE.MeshPhongMaterial({ color: 0x663300 }); | |
| const bladeMaterial = new THREE.MeshPhongMaterial({ color: 0x999999 }); | |
| // Collision sphere for the weapon (relative to its local origin) | |
| weaponGroup.collisionSphere = new THREE.Sphere(new THREE.Vector3(), 1.0); | |
| switch (type) { | |
| case "sword": | |
| weaponGroup.add(new THREE.Mesh(new THREE.BoxGeometry(0.2, 2.0, 0.1), bladeMaterial)); // Blade | |
| const hiltMesh = new THREE.Mesh(new THREE.CylinderGeometry(0.15, 0.15, 0.5), handleMaterial); // Hilt | |
| hiltMesh.position.y = -1.25; | |
| weaponGroup.add(hiltMesh); | |
| weaponGroup.position.set(0.5, -0.5, 0); | |
| weaponGroup.rotation.z = -Math.PI / 2; | |
| weaponGroup.collisionSphere.radius = 1.2; // Adjust collision sphere size | |
| break; | |
| case "great_axe": | |
| weaponGroup.add(new THREE.Mesh(new THREE.BoxGeometry(0.2, 3.0, 0.2), handleMaterial)); // Handle | |
| const axeHead = new THREE.Mesh(new THREE.BoxGeometry(0.1, 1.5, 1.0), bladeMaterial); // Axe blade | |
| axeHead.position.set(0, 1.5, 0.5); | |
| weaponGroup.add(axeHead); | |
| weaponGroup.position.set(0.5, -1.0, 0); | |
| weaponGroup.rotation.z = -Math.PI / 2; | |
| weaponGroup.collisionSphere.radius = 1.8; | |
| break; | |
| case "dagger": | |
| weaponGroup.add(new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.8, 0.05), bladeMaterial)); // Blade | |
| const daggerHiltMesh = new THREE.Mesh(new THREE.CylinderGeometry(0.08, 0.08, 0.3), handleMaterial); // Hilt | |
| daggerHiltMesh.position.y = -0.55; | |
| weaponGroup.add(daggerHiltMesh); | |
| weaponGroup.position.set(0.3, -0.2, 0); | |
| weaponGroup.rotation.z = -Math.PI / 2; | |
| weaponGroup.collisionSphere.radius = 0.8; | |
| break; | |
| case "mace": | |
| weaponGroup.add(new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 1.5), handleMaterial)); // Handle | |
| const maceHead = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 16), bladeMaterial); // Spiked head | |
| maceHead.position.y = 0.75; | |
| weaponGroup.add(maceHead); | |
| weaponGroup.position.set(0.5, -0.75, 0); | |
| weaponGroup.rotation.z = -Math.PI / 2; | |
| weaponGroup.collisionSphere.radius = 1.0; | |
| break; | |
| case "longbow": | |
| const bowString = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.02, 2.0), new THREE.MeshPhongMaterial({ color: 0x333333 })); | |
| const bowBody = new THREE.Mesh(new THREE.BoxGeometry(0.1, 2.0, 0.1), new THREE.MeshPhongMaterial({ color: 0x8B4513 })); | |
| bowString.position.x = 0.5; | |
| bowBody.rotation.y = Math.PI / 2; | |
| weaponGroup.add(bowBody); | |
| weaponGroup.add(bowString); | |
| weaponGroup.position.set(0.5, -0.5, 0); | |
| weaponGroup.rotation.z = -Math.PI / 2; | |
| weaponGroup.collisionSphere.radius = 1.5; | |
| break; | |
| default: | |
| break; | |
| } | |
| weaponGroup.name = `weapon_${type}`; | |
| weaponGroup.visible = false; | |
| return weaponGroup; | |
| } | |
| /** | |
| * Creates a shield mesh based on the specified type. | |
| * Includes a collision sphere for the shield. | |
| * @param {string} type - The type of shield (e.g., "kite_shield", "buckler"). | |
| * @param {number} [color=0x888888] - Hex color for the shield. | |
| * @returns {THREE.Group} A group representing the shield. | |
| */ | |
| function createShield(type, color = 0x888888) { | |
| const shieldGroup = new THREE.Group(); | |
| const material = new THREE.MeshPhongMaterial({ color: color }); | |
| shieldGroup.collisionSphere = new THREE.Sphere(new THREE.Vector3(), 1.5); // Default collision sphere | |
| switch (type) { | |
| case "kite_shield": | |
| const pointsKite = [ | |
| new THREE.Vector2(0, 1.5), new THREE.Vector2(0.8, 1.0), | |
| new THREE.Vector2(0.8, -1.5), new THREE.Vector2(-0.8, -1.5), | |
| new THREE.Vector2(-0.8, 1.0) | |
| ]; | |
| const kiteShape = new THREE.Shape(pointsKite); | |
| const shieldShapeKite = new THREE.ExtrudeGeometry(kiteShape, { depth: 0.1, bevelEnabled: false }); | |
| shieldGroup.add(new THREE.Mesh(shieldShapeKite, material)); | |
| shieldGroup.position.set(-0.5, -0.5, 0); | |
| shieldGroup.rotation.y = Math.PI / 2; | |
| shieldGroup.collisionSphere.radius = 1.8; // Adjust collision sphere size | |
| break; | |
| case "buckler": | |
| const shieldShapeBuckler = new THREE.CylinderGeometry(0.7, 0.7, 0.1, 16); | |
| shieldGroup.add(new THREE.Mesh(shieldShapeBuckler, material)); | |
| shieldGroup.position.set(-0.5, -0.2, 0); | |
| shieldGroup.rotation.y = Math.PI / 2; | |
| shieldGroup.collisionSphere.radius = 0.9; | |
| break; | |
| case "tower_shield": | |
| const shieldShapeTower = new THREE.BoxGeometry(1.2, 2.5, 0.1); | |
| shieldGroup.add(new THREE.Mesh(shieldShapeTower, material)); | |
| shieldGroup.position.set(-0.5, -1.0, 0); | |
| shieldGroup.rotation.y = Math.PI / 2; | |
| shieldGroup.collisionSphere.radius = 2.0; | |
| break; | |
| default: | |
| break; | |
| } | |
| shieldGroup.name = `shield_${type}`; | |
| shieldGroup.visible = false; | |
| return shieldGroup; | |
| } | |
| /** | |
| * Creates a projectile (a small sphere) to be fired. | |
| * @param {THREE.Group} firingPlayer - The player who fired the projectile. | |
| * @param {THREE.Group} targetPlayer - The intended target of the projectile. | |
| */ | |
| function createProjectile(firingPlayer, targetPlayer) { | |
| const projectileGeometry = new THREE.SphereGeometry(projectileRadius, 8, 8); | |
| const projectileMaterial = new THREE.MeshPhongMaterial({ color: 0xffd700 }); // Gold color | |
| const projectileMesh = new THREE.Mesh(projectileGeometry, projectileMaterial); | |
| // Set projectile starting position from player's weapon tip or chest height | |
| const startPosition = new THREE.Vector3(); | |
| if (firingPlayer.weaponMesh) { | |
| // Get weapon's world position and move it slightly forward | |
| firingPlayer.weaponMesh.getWorldPosition(startPosition); | |
| const forwardDir = new THREE.Vector3(); | |
| firingPlayer.getWorldDirection(forwardDir); | |
| startPosition.add(forwardDir.multiplyScalar(firingPlayer.weaponMesh.collisionSphere.radius * 0.5)); | |
| } else { | |
| // If no weapon, shoot from player's chest height | |
| startPosition.copy(firingPlayer.position); | |
| startPosition.y += 1.5 * playerScaleFactor; | |
| } | |
| projectileMesh.position.copy(startPosition); | |
| // Calculate direction towards target (at target's chest height) | |
| const targetPosition = targetPlayer.position.clone(); | |
| targetPosition.y += 1.5 * playerScaleFactor; // Aim for chest height | |
| const direction = new THREE.Vector3(); | |
| direction.subVectors(targetPosition, projectileMesh.position).normalize(); | |
| projectileMesh.velocity = direction.multiplyScalar(projectileSpeed); | |
| projectileMesh.life = projectileLife; | |
| projectileMesh.damage = baseAttackDamage; // Projectiles deal base damage | |
| projectileMesh.originPlayer = firingPlayer; // Store who fired it | |
| scene.add(projectileMesh); | |
| activeProjectiles.push(projectileMesh); | |
| } | |
| /** | |
| * Updates a player's equipped weapon and shield based on the gear index. | |
| * @param {THREE.Group} player - The player character to update. | |
| * @param {number} gearIndex - The index of the gear combination to equip. | |
| */ | |
| function updatePlayerGear(player, gearIndex) { | |
| // Remove existing weapon and shield meshes from the player's arms | |
| if (player.weaponMesh && player.weaponMesh.parent) { | |
| player.weaponMesh.parent.remove(player.weaponMesh); | |
| } | |
| if (player.shieldMesh && player.shieldMesh.parent) { | |
| player.shieldMesh.parent.remove(player.shieldMesh); | |
| } | |
| const gear = gearCombinations[gearIndex]; | |
| player.currentWeaponType = gear.weapon; // Store the current weapon type for animation logic | |
| // Add new weapon if applicable | |
| if (gear.weapon) { | |
| const newWeapon = createWeapon(gear.weapon); | |
| player.rightArm.add(newWeapon); // Attach to the player's right arm | |
| player.weaponMesh = newWeapon; // Store reference | |
| newWeapon.visible = true; | |
| } else { | |
| player.weaponMesh = null; | |
| } | |
| // Add new shield if applicable | |
| if (gear.shield) { | |
| const newShield = createShield(gear.shield); | |
| player.leftArm.add(newShield); // Attach to the player's left arm | |
| player.shieldMesh = newShield; // Store reference | |
| newShield.visible = true; | |
| } else { | |
| player.shieldMesh = null; | |
| } | |
| } | |
| /** | |
| * Handles keydown events to update player movement and action states. | |
| * @param {KeyboardEvent} event - The keyboard event. | |
| */ | |
| function onKeyDown(event) { | |
| switch (event.code) { | |
| // Player 1 Movement (WASD) | |
| case 'KeyW': keys.w = true; break; | |
| case 'KeyA': keys.a = true; break; | |
| case 'KeyS': keys.s = true; break; | |
| case 'KeyD': keys.d = true; break; | |
| // Player 1 Actions | |
| case 'KeyE': // Attack | |
| // Only allow attack if not already attacking or blocking | |
| if (!player1.isAttacking && !player1.isBlocking) { | |
| startAttackAnimation(player1); | |
| createProjectile(player1, player2); // All attacks now fire projectiles | |
| } | |
| break; | |
| case 'KeyQ': // Block | |
| // Only allow block if not already blocking or attacking | |
| if (!player1.isBlocking && !player1.isAttacking) { | |
| startBlockAnimation(player1); | |
| } | |
| break; | |
| case 'KeyC': // Change Gear | |
| if (!keys.p1_change_gear) { // Prevent rapid gear changes | |
| player1GearIndex = (player1GearIndex + 1) % gearCombinations.length; | |
| updatePlayerGear(player1, player1GearIndex); | |
| keys.p1_change_gear = true; // Set flag to prevent continuous change | |
| } | |
| break; | |
| // Player 2 Movement (IJKL) | |
| case 'KeyI': keys.i = true; break; | |
| case 'KeyJ': keys.j = true; break; | |
| case 'KeyK': keys.k = true; break; | |
| case 'KeyL': keys.l = true; break; | |
| // Player 2 Actions | |
| case 'KeyU': // Attack | |
| // Only allow attack if not already attacking or blocking | |
| if (!player2.isAttacking && !player2.isBlocking) { | |
| startAttackAnimation(player2); | |
| createProjectile(player2, player1); // All attacks now fire projectiles | |
| } | |
| break; | |
| case 'KeyO': // Block | |
| // Only allow block if not already blocking or attacking | |
| if (!player2.isBlocking && !player2.isAttacking) { | |
| startBlockAnimation(player2); | |
| } | |
| break; | |
| case 'KeyM': // Change Gear | |
| if (!keys.p2_change_gear) { // Prevent rapid gear changes | |
| player2GearIndex = (player2GearIndex + 1) % gearCombinations.length; | |
| updatePlayerGear(player2, player2GearIndex); | |
| keys.p2_change_gear = true; // Set flag to prevent continuous change | |
| } | |
| break; | |
| } | |
| } | |
| /** | |
| * Handles keyup events to reset player movement and action states. | |
| * @param {KeyboardEvent} event - The keyboard event. | |
| */ | |
| function onKeyUp(event) { | |
| switch (event.code) { | |
| // Player 1 Movement | |
| case 'KeyW': keys.w = false; break; | |
| case 'KeyA': keys.a = false; break; | |
| case 'KeyS': keys.s = false; break; | |
| case 'KeyD': keys.d = false; break; | |
| // Player 1 Actions (resetting the "pressed" state for single-trigger actions) | |
| case 'KeyE': /* Attack action is handled by animation state */ break; | |
| case 'KeyQ': /* Block action is handled by animation state */ break; | |
| case 'KeyC': keys.p1_change_gear = false; break; // Release for next change | |
| // Player 2 Movement | |
| case 'KeyI': keys.i = false; break; | |
| case 'KeyJ': keys.j = false; break; | |
| case 'KeyK': keys.k = false; break; | |
| case 'KeyL': keys.l = false; break; | |
| // Player 2 Actions | |
| case 'KeyU': /* Attack action is handled by animation state */ break; | |
| case 'KeyO': /* Block action is handled by animation state */ break; | |
| case 'KeyM': keys.p2_change_gear = false; break; // Release for next change | |
| } | |
| } | |
| /** | |
| * Initiates the attack animation for a given player. | |
| * @param {THREE.Group} player - The player initiating the attack. | |
| */ | |
| function startAttackAnimation(player) { | |
| player.isAttacking = true; | |
| player.attackAnimationProgress = 0; // Reset animation progress | |
| // Store initial arm rotation for smooth return | |
| player.rightArm.initialRotationZ = player.rightArm.rotation.z; | |
| player.rightArm.initialRotationX = player.rightArm.rotation.x; | |
| // Create weapon range particles using the player's stored color | |
| createWeaponRangeParticles(player.weaponMesh ? player.weaponMesh : player.position, player.playerColor); | |
| } | |
| /** | |
| * Initiates the block animation for a given player. | |
| * @param {THREE.Group} player - The player initiating the block. | |
| */ | |
| function startBlockAnimation(player) { | |
| player.isBlocking = true; | |
| player.blockAnimationProgress = 0; // Reset animation progress | |
| // Store initial arm rotation for smooth return | |
| player.leftArm.initialRotationZ = player.leftArm.rotation.z; | |
| player.leftArm.initialRotationX = player.leftArm.rotation.x; | |
| player.leftArm.initialRotationY = player.leftArm.rotation.y; | |
| } | |
| /** | |
| * Creates a burst of small particles at a given position and color. | |
| * Used for visual feedback on hits/blocks. | |
| * @param {THREE.Vector3} position - The world position for particles. | |
| * @param {number} color - Hex color for the particles. | |
| * @param {string} type - Type of particles ('impact' or 'blood'). | |
| */ | |
| function createParticles(position, color, type = 'impact') { | |
| const particleCount = (type === 'blood') ? 20 : 10; | |
| const particleColor = (type === 'blood') ? 0x8B0000 : color; // Dark red for blood | |
| const particleMaterial = new THREE.MeshBasicMaterial({ color: particleColor, transparent: true, opacity: 1 }); | |
| const particleGeometry = new THREE.SphereGeometry(0.1, 8, 8); // Smaller for blood | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = new THREE.Mesh(particleGeometry, particleMaterial.clone()); | |
| particle.position.copy(position); | |
| particle.velocity = new THREE.Vector3( | |
| (Math.random() - 0.5) * 0.8, // Random X velocity | |
| Math.random() * 0.8 + 0.2, // Upward Y velocity | |
| (Math.random() - 0.5) * 0.8 // Random Z velocity | |
| ); | |
| particle.life = (type === 'blood') ? 60 : 40; // Longer life for blood | |
| particle.initialLife = particle.life; // Store initial life for opacity calculation | |
| impactParticlesGroup.add(particle); | |
| } | |
| } | |
| /** | |
| * Creates a temporary particle system to visualize weapon range/attack. | |
| * @param {THREE.Object3D} originObject - The object from which particles emanate (weapon or player). | |
| * @param {number} color - The hex color of the particles. | |
| */ | |
| function createWeaponRangeParticles(originObject, color) { | |
| const particleCount = 15; | |
| const particleMaterial = new THREE.MeshBasicMaterial({ color: color, transparent: true, opacity: 0.8 }); | |
| const particleGeometry = new THREE.SphereGeometry(0.15, 8, 8); | |
| const originPosition = new THREE.Vector3(); | |
| if (originObject instanceof THREE.Mesh || originObject instanceof THREE.Group) { // Check if it's a Three.js object | |
| originObject.getWorldPosition(originPosition); | |
| } else { // Assume it's a Vector3 if not a mesh/group | |
| originPosition.copy(originObject); | |
| } | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = new THREE.Mesh(particleGeometry, particleMaterial.clone()); | |
| particle.position.copy(originPosition); | |
| // Randomize initial direction slightly | |
| const angle = Math.random() * Math.PI * 2; | |
| const speed = 0.1 + Math.random() * 0.1; | |
| particle.velocity = new THREE.Vector3( | |
| Math.cos(angle) * speed, | |
| 0.1 + Math.random() * 0.1, // Slight upward motion | |
| Math.sin(angle) * speed | |
| ); | |
| particle.life = 30; // Short life for range visualization | |
| particle.initialLife = particle.life; // Store initial life for opacity calculation | |
| weaponRangeParticlesGroup.add(particle); | |
| } | |
| } | |
| /** | |
| * The main animation loop of the game. | |
| * Updates player movement, animations, projectile physics, and renders the scene. | |
| */ | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| // Player 1 Movement | |
| if (keys.w) player1.position.z -= movementSpeed; | |
| if (keys.s) player1.position.z += movementSpeed; | |
| if (keys.a) player1.position.x -= movementSpeed; | |
| if (keys.d) player1.position.x += movementSpeed; | |
| // Player 2 Movement | |
| if (keys.i) player2.position.z -= movementSpeed; | |
| if (keys.k) player2.position.z += movementSpeed; | |
| if (keys.j) player2.position.x -= movementSpeed; | |
| if (keys.l) player2.position.x += movementSpeed; | |
| // Auto-rotate players to face each other (only if not attacking/blocking to prevent jitter) | |
| if (!player1.isAttacking && !player1.isBlocking) { | |
| player1.lookAt(player2.position.x, player1.position.y, player2.position.z); | |
| } | |
| if (!player2.isAttacking && !player2.isBlocking) { | |
| player2.lookAt(player1.position.x, player2.position.y, player1.position.z); | |
| } | |
| // Attack Animation Logic for both players | |
| [player1, player2].forEach(player => { | |
| if (player.isAttacking) { | |
| player.attackAnimationProgress++; | |
| const progress = player.attackAnimationProgress / player.attackDuration; | |
| const swingDirection = (player === player1) ? 1 : -1; // Adjust swing direction for each player | |
| // Animate weapon arm based on weapon type | |
| switch (player.currentWeaponType) { | |
| case "sword": | |
| case "great_axe": | |
| case "mace": | |
| // Sweeping motion: Z-axis for horizontal swing, X-axis for vertical tilt | |
| player.rightArm.rotation.z = player.rightArmInitialRotZ + swingDirection * Math.sin(progress * Math.PI * 1.5) * Math.PI / 2; | |
| player.rightArm.rotation.x = player.rightArmInitialRotX + Math.sin(progress * Math.PI * 2) * Math.PI / 12; | |
| break; | |
| case "dagger": | |
| // Forward jab: X-axis for forward thrust | |
| player.rightArm.rotation.x = player.rightArmInitialRotX + Math.sin(progress * Math.PI * 2) * Math.PI / 6; | |
| player.rightArm.rotation.z = player.rightArmInitialRotZ + swingDirection * Math.sin(progress * Math.PI * 2) * Math.PI / 12; // Slight side movement | |
| break; | |
| case "longbow": | |
| // Draw back and release: X-axis for pulling back, then forward | |
| player.rightArm.rotation.x = player.rightArmInitialRotX + Math.sin(progress * Math.PI * 2) * Math.PI / 4; | |
| player.rightArm.rotation.z = player.rightArmInitialRotZ; // Keep Z stable | |
| break; | |
| } | |
| // End attack animation | |
| if (player.attackAnimationProgress >= player.attackDuration) { | |
| player.isAttacking = false; | |
| // Reset arm rotations to initial state | |
| player.rightArm.rotation.z = player.rightArmInitialRotZ; | |
| player.rightArm.rotation.x = player.rightArmInitialRotX; | |
| } | |
| } | |
| // Block Animation Logic | |
| if (player.isBlocking) { | |
| player.blockAnimationProgress++; | |
| const progress = player.blockAnimationProgress / player.blockDuration; | |
| const blockDirection = (player === player1) ? 1 : -1; // Adjust block direction | |
| // Move shield arm to a defensive position | |
| player.leftArm.rotation.z = player.leftArmInitialRotZ + blockDirection * Math.sin(progress * Math.PI) * Math.PI / 8; // Arm moves up/down slightly | |
| player.leftArm.rotation.y = player.leftArmInitialRotY + blockDirection * Math.sin(progress * Math.PI) * Math.PI / 6; // Shield turns towards opponent | |
| // End block animation | |
| if (player.blockAnimationProgress >= player.blockDuration) { | |
| player.isBlocking = false; | |
| // Reset arm rotations to initial state | |
| player.leftArm.rotation.z = player.leftArmInitialRotZ; | |
| player.leftArm.rotation.x = player.leftArmInitialRotX; | |
| player.leftArm.rotation.y = player.leftArmInitialRotY; | |
| } | |
| } | |
| // Health decay from missing parts | |
| const healthDecayRate = player.missingParts.length * 0.1; // 0.1 health per frame per missing part | |
| if (healthDecayRate > 0) { | |
| if (player === player1) { | |
| player1Health = Math.max(0, player1Health - healthDecayRate); | |
| if (player1Health === 0) { | |
| player2Score++; | |
| updateScores(); | |
| resetGame(); | |
| } | |
| } else { | |
| player2Health = Math.max(0, player2Health - healthDecayRate); | |
| if (player2Health === 0) { | |
| player1Score++; | |
| updateScores(); | |
| resetGame(); | |
| } | |
| } | |
| updateHealthBars(); | |
| } | |
| }); | |
| // Projectile Movement and Collision | |
| for (let i = activeProjectiles.length - 1; i >= 0; i--) { | |
| const projectile = activeProjectiles[i]; | |
| projectile.position.add(projectile.velocity); | |
| projectile.life--; | |
| const targetPlayer = (projectile.originPlayer === player1) ? player2 : player1; | |
| // Check for collision with target player's *individual* body parts | |
| const projectileSphere = new THREE.Sphere(projectile.position, projectileRadius); | |
| let hitOccurred = false; | |
| let hitPart = null; | |
| // Loop through each part of the target player | |
| for (let j = targetPlayer.parts.length - 1; j >= 0; j--) { | |
| const part = targetPlayer.parts[j]; | |
| // Calculate world position and collision sphere for the part | |
| const partWorldPosition = new THREE.Vector3(); | |
| part.getWorldPosition(partWorldPosition); | |
| const partCollisionSphere = new THREE.Sphere(partWorldPosition, part.geometry.parameters.radius || part.geometry.parameters.width / 2 || 0.5); // Estimate radius from geometry | |
| if (projectileSphere.intersectsSphere(partCollisionSphere)) { | |
| // Check for shield block first | |
| if (targetPlayer.isBlocking && targetPlayer.shieldMesh) { | |
| const targetShield = targetPlayer.shieldMesh; | |
| const shieldWorldPosition = new THREE.Vector3(); | |
| targetShield.getWorldPosition(shieldWorldPosition); | |
| targetShield.collisionSphere.center.copy(shieldWorldPosition); | |
| if (projectileSphere.intersectsSphere(targetShield.collisionSphere)) { | |
| // Block successful! | |
| applyDamage(targetPlayer, projectile.damage * (1 - blockReduction), projectile.originPlayer); | |
| createParticles(shieldWorldPosition, 0x00ff00, 'impact'); // Green for block | |
| hitOccurred = true; | |
| break; // Shield blocked, no need to check other parts | |
| } | |
| } | |
| // If not blocked by shield, apply damage to the part | |
| if (!hitOccurred) { | |
| hitPart = part; | |
| applyDamage(targetPlayer, part.damageValue || projectile.damage, projectile.originPlayer); // Use part's damage value if available | |
| createParticles(partWorldPosition, 0xffa500, 'impact'); // Orange for hit | |
| createParticles(partWorldPosition, 0xff0000, 'blood'); // Red blood particles | |
| hitOccurred = true; | |
| // Remove the hit part from the player model | |
| targetPlayer.remove(part); | |
| targetPlayer.parts.splice(j, 1); // Remove from active parts array | |
| targetPlayer.missingParts.push(part.name); // Add to missing parts list | |
| // Dispose of the removed part's geometry and material | |
| if (part.geometry) part.geometry.dispose(); | |
| if (part.material) part.material.dispose(); | |
| break; // Only one part hit per projectile | |
| } | |
| } | |
| } | |
| // Remove projectile on impact or if it goes too far | |
| if (hitOccurred || projectile.life <= 0) { | |
| scene.remove(projectile); | |
| projectile.geometry.dispose(); | |
| projectile.material.dispose(); | |
| activeProjectiles.splice(i, 1); | |
| } | |
| } | |
| // Update impact particles (move and fade out) | |
| for (let i = impactParticlesGroup.children.length - 1; i >= 0; i--) { | |
| const particle = impactParticlesGroup.children[i]; | |
| particle.position.add(particle.velocity); | |
| particle.velocity.y -= 0.02; // Simple gravity | |
| particle.life--; | |
| particle.material.opacity = particle.life / particle.initialLife; // Fade out over lifetime (assuming initialLife was stored) | |
| if (particle.life <= 0) { | |
| impactParticlesGroup.remove(particle); | |
| particle.geometry.dispose(); | |
| particle.material.dispose(); | |
| } | |
| } | |
| // Update weapon range particles (expand and fade out) | |
| for (let i = weaponRangeParticlesGroup.children.length - 1; i >= 0; i--) { | |
| const particle = weaponRangeParticlesGroup.children[i]; | |
| particle.position.add(particle.velocity); | |
| particle.scale.setScalar(particle.scale.x + 0.05); // Expand | |
| particle.material.opacity -= 0.03; // Fade out | |
| if (particle.material.opacity <= 0) { | |
| weaponRangeParticlesGroup.remove(particle); | |
| particle.geometry.dispose(); | |
| particle.material.dispose(); | |
| } | |
| } | |
| renderer.render(scene, camera); | |
| } | |
| /** | |
| * Applies damage to a target player, considering if they are blocking. | |
| * If a player's health drops to 0, the game resets and the other player scores. | |
| * @param {THREE.Group} targetPlayer - The player receiving damage. | |
| * @param {number} amount - The base amount of damage. | |
| * @param {THREE.Group} attackingPlayer - The player dealing damage. | |
| */ | |
| function applyDamage(targetPlayer, amount, attackingPlayer) { | |
| let actualDamage = amount; | |
| if (targetPlayer.isBlocking) { | |
| actualDamage = amount * (1 - blockReduction); // Reduce damage if blocking | |
| } | |
| if (targetPlayer === player1) { | |
| player1Health = Math.max(0, player1Health - actualDamage); | |
| if (player1Health === 0) { | |
| player2Score++; | |
| updateScores(); | |
| resetGame(); | |
| } | |
| } else if (targetPlayer === player2) { | |
| player2Health = Math.max(0, player2Health - actualDamage); | |
| if (player2Health === 0) { | |
| player1Score++; | |
| updateScores(); | |
| resetGame(); | |
| } | |
| } | |
| updateHealthBars(); | |
| } | |
| /** | |
| * Updates the visual width and color of the player health bars. | |
| */ | |
| function updateHealthBars() { | |
| const healthBarLeft = document.getElementById('health-bar-left'); | |
| const healthBarRight = document.getElementById('health-bar-right'); | |
| const maxWidth = 250; | |
| healthBarLeft.style.width = `${(player1Health / maxHealth) * maxWidth}px`; | |
| healthBarLeft.style.backgroundColor = player1Health > maxHealth * 0.6 ? '#28a745' : (player1Health > maxHealth * 0.3 ? '#ffc107' : '#dc3545'); | |
| healthBarRight.style.width = `${(player2Health / maxHealth) * maxWidth}px`; | |
| healthBarRight.style.backgroundColor = player2Health > maxHealth * 0.6 ? '#28a745' : (player2Health > maxHealth * 0.3 ? '#ffc107' : '#dc3545'); | |
| } | |
| /** | |
| * Updates the displayed scores for Player 1 and Player 2. | |
| */ | |
| function updateScores() { | |
| document.getElementById('score-left').textContent = `P1 Score: ${player1Score}`; | |
| document.getElementById('score-right').textContent = `P2 Score: ${player2Score}`; | |
| } | |
| /** | |
| * Resets the game to its initial state, including player health, positions, | |
| * and clearing all projectiles and particles. Also rebuilds player models. | |
| */ | |
| function resetGame() { | |
| player1Health = maxHealth; | |
| player2Health = maxHealth; | |
| updateHealthBars(); | |
| // Rebuild players to restore missing parts | |
| scene.remove(player1); | |
| scene.remove(player2); | |
| player1 = createPrimitiveCharacter(0xff4500); | |
| player2 = createPrimitiveCharacter(0x00aaff); | |
| scene.add(player1); | |
| scene.add(player2); | |
| player1.position.set(-10, 0.5 * playerScaleFactor, 0); | |
| player2.position.set(10, 0.5 * playerScaleFactor, 0); | |
| // Re-initialize gear | |
| updatePlayerGear(player1, player1GearIndex); | |
| updatePlayerGear(player2, player2GearIndex); | |
| // Reset any ongoing animations and arm positions | |
| [player1, player2].forEach(player => { | |
| player.isAttacking = false; | |
| player.isBlocking = false; | |
| player.attackAnimationProgress = 0; | |
| player.blockAnimationProgress = 0; | |
| // Arm rotations are reset by updatePlayerGear and createPrimitiveCharacter | |
| }); | |
| // Remove all active projectiles from scene and array | |
| while (activeProjectiles.length > 0) { | |
| const projectile = activeProjectiles.pop(); | |
| scene.remove(projectile); | |
| projectile.geometry.dispose(); | |
| projectile.material.dispose(); | |
| } | |
| // Clear all impact particles from scene and dispose | |
| while(impactParticlesGroup.children.length > 0){ | |
| const particle = impactParticlesGroup.children[0]; | |
| impactParticlesGroup.remove(particle); | |
| particle.geometry.dispose(); | |
| particle.material.dispose(); | |
| } | |
| // Clear all weapon range particles | |
| while(weaponRangeParticlesGroup.children.length > 0){ | |
| const particle = weaponRangeParticlesGroup.children[0]; | |
| weaponRangeParticlesGroup.remove(particle); | |
| particle.geometry.dispose(); | |
| particle.material.dispose(); | |
| } | |
| } | |
| /** | |
| * Handles window resize events to adjust the camera and renderer size. | |
| */ | |
| function onWindowResize() { | |
| const aspectRatio = window.innerWidth / window.innerHeight; | |
| const frustumSize = 30; // Keep consistent with init | |
| camera.left = frustumSize * aspectRatio / - 2; | |
| camera.right = frustumSize * aspectRatio / 2; | |
| camera.top = frustumSize / 2; | |
| camera.bottom = frustumSize / - 2; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| } | |
| // Initialize the game when the window loads | |
| window.onload = init; | |
| </script> | |
| </body> | |
| </html> | |