Hugging Face's logo

Spaces:
awacke1
/
PrimitivePunchUpGame
Running

App Files Community
PrimitivePunchUpGame / index.html
awacke1's picture
awacke1
Update index.html
ef90db1 verified
raw
history blame contribute delete
59.2 kB
 <!DOCTYPE html>
<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/three@0.128.0/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>