MARIO PARTY 99 V2

MARIO PARTY 99 V2

🪙 0

Round: 1/5

Marios: 99

🧭

Height: 0m

Place: 1st

), (import * as THREE from 'three'; class Game { constructor() { this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000); this.renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas'), antialias: true }); this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setClearColor(0x87CEEB); this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; this.init(); this.setupControls(); this.animate(); } init() { // Game state this.round = 1; this.marioCount = 99; this.playerCoins = 0; this.chargeLevel = 0; this.isCharging = false; this.isGrounded = true; this.canDoubleJump = true; this.cameraShakeIntensity = 0; this.cameraShakeDecay = 0.95; this.isClimbing = false; this.climbingBuilding = null; this.lastHeight = 0; // Track fall height this.isWalking = false; this.walkAnimationTime = 0; this.isLanding = false; this.landingAnimationType = 'normal'; this.landingAnimationTime = 0; this.isGroundPounding = false; this.groundPoundAnimationTime = 0; // Player (polar bear) this.player = this.createPlayer(); this.playerVelocity = new THREE.Vector3(); this.playerHeight = 0; // Marios this.marios = []; this.createMarios(); // Buildings this.buildings = []; this.createBuildings(); // Environment this.createEnvironment(); this.createLighting(); // Particles this.particles = []; this.cracks = []; // Sound effects this.sounds = {}; this.loadSounds(); // Helicopter for coins this.helicopterTimer = 0; this.coins = []; this.updateHUD(); } loadSounds() { const soundFiles = ['jump', 'crack', 'coin', 'hurt', 'applause', 'explosion']; soundFiles.forEach(soundName => { this.sounds[soundName] = new Audio(`/${soundName}.mp3`); this.sounds[soundName].preload = 'auto'; this.sounds[soundName].volume = 0.5; }); } playSound(type) { if (this.sounds[type]) { // Clone the audio to allow overlapping sounds const audio = this.sounds[type].cloneNode(); audio.currentTime = 0; audio.play().catch(error => { console.log('Could not play sound:', type); }); } } createPlayer() { // Create polar bear with 3D shapes instead of texture const group = new THREE.Group(); // Body (main cube) const bodyGeometry = new THREE.BoxGeometry(2, 1.5, 1.5); const bodyMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); body.position.y = 0; group.add(body); // Head const headGeometry = new THREE.BoxGeometry(1.2, 1.2, 1.2); const headMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); const head = new THREE.Mesh(headGeometry, headMaterial); head.position.set(0, 1, 0.8); group.add(head); // Eyes const eyeGeometry = new THREE.SphereGeometry(0.1); const eyeMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 }); const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial); leftEye.position.set(-0.3, 1.2, 1.3); group.add(leftEye); const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial); rightEye.position.set(0.3, 1.2, 1.3); group.add(rightEye); // Nose const noseGeometry = new THREE.SphereGeometry(0.08); const noseMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 }); const nose = new THREE.Mesh(noseGeometry, noseMaterial); nose.position.set(0, 1, 1.4); group.add(nose); // Legs const legGeometry = new THREE.BoxGeometry(0.4, 0.8, 0.4); const legMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); const frontLeftLeg = new THREE.Mesh(legGeometry, legMaterial); frontLeftLeg.position.set(-0.6, -0.8, 0.5); group.add(frontLeftLeg); const frontRightLeg = new THREE.Mesh(legGeometry, legMaterial); frontRightLeg.position.set(0.6, -0.8, 0.5); group.add(frontRightLeg); const backLeftLeg = new THREE.Mesh(legGeometry, legMaterial); backLeftLeg.position.set(-0.6, -0.8, -0.5); group.add(backLeftLeg); const backRightLeg = new THREE.Mesh(legGeometry, legMaterial); backRightLeg.position.set(0.6, -0.8, -0.5); group.add(backRightLeg); // Store references for animation group.userData = { body, head, legs: [frontLeftLeg, frontRightLeg, backLeftLeg, backRightLeg] }; group.position.set(0, 10, 0); group.castShadow = true; this.scene.add(group); return group; } createMarios() { const textureLoader = new THREE.TextureLoader(); const marioTexture = textureLoader.load('/mario.png'); for (let i = 0; i < this.marioCount; i++) { const geometry = new THREE.BoxGeometry(1.5, 1.5, 1.5); const material = new THREE.MeshLambertMaterial({ map: marioTexture }); const mario = new THREE.Mesh(geometry, material); mario.position.set( (Math.random() - 0.5) * 200, 5, (Math.random() - 0.5) * 200 ); mario.velocity = new THREE.Vector3( (Math.random() - 0.5) * 2, 0, (Math.random() - 0.5) * 2 ); mario.health = 3; mario.coins = Math.floor(Math.random() * 50); mario.castShadow = true; this.scene.add(mario); this.marios.push(mario); } } createBuildings() { for (let i = 0; i < 20; i++) { const width = 10 + Math.random() * 20; const height = 20 + Math.random() * 800; const depth = 10 + Math.random() * 20; const geometry = new THREE.BoxGeometry(width, height, depth); const material = new THREE.MeshLambertMaterial({ color: 0x666666 }); const building = new THREE.Mesh(geometry, material); building.position.set( (Math.random() - 0.5) * 400, height / 2, (Math.random() - 0.5) * 400 ); building.health = 10000; building.maxHealth = 10000; building.castShadow = true; building.receiveShadow = true; building.userData.width = width; building.userData.height = height; building.userData.depth = depth; this.scene.add(building); this.buildings.push(building); // Create health bar for building this.createBuildingHealthBar(building); } // Special tall building (829m) const tallGeometry = new THREE.BoxGeometry(30, 829, 30); const tallMaterial = new THREE.MeshLambertMaterial({ color: 0x444444 }); const tallBuilding = new THREE.Mesh(tallGeometry, tallMaterial); tallBuilding.position.set(100, 414.5, 100); tallBuilding.health = 10000; tallBuilding.maxHealth = 10000; tallBuilding.castShadow = true; tallBuilding.receiveShadow = true; tallBuilding.userData.width = 30; tallBuilding.userData.height = 829; tallBuilding.userData.depth = 30; this.scene.add(tallBuilding); this.buildings.push(tallBuilding); this.createBuildingHealthBar(tallBuilding); // Ultra tall building (1008m) const ultraTallGeometry = new THREE.BoxGeometry(35, 1008, 35); const ultraTallMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 }); const ultraTallBuilding = new THREE.Mesh(ultraTallGeometry, ultraTallMaterial); ultraTallBuilding.position.set(-150, 504, -150); ultraTallBuilding.health = 10000; ultraTallBuilding.maxHealth = 10000; ultraTallBuilding.castShadow = true; ultraTallBuilding.receiveShadow = true; ultraTallBuilding.userData.width = 35; ultraTallBuilding.userData.height = 1008; ultraTallBuilding.userData.depth = 35; this.scene.add(ultraTallBuilding); this.buildings.push(ultraTallBuilding); this.createBuildingHealthBar(ultraTallBuilding); } createBuildingHealthBar(building) { const healthBarContainer = document.createElement('div'); healthBarContainer.className = 'building-healthbar'; healthBarContainer.style.display = 'none'; // Initially hidden const healthBarFill = document.createElement('div'); healthBarFill.className = 'building-healthbar-fill'; healthBarFill.style.width = '100%'; healthBarContainer.appendChild(healthBarFill); document.body.appendChild(healthBarContainer); building.userData.healthBar = healthBarContainer; building.userData.healthBarFill = healthBarFill; } createEnvironment() { // Ground const groundGeometry = new THREE.PlaneGeometry(1000, 1000); const groundMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; this.scene.add(ground); // Snow particles this.createSnow(); } createSnow() { const snowGeometry = new THREE.BufferGeometry(); const snowCount = 1000; const positions = new Float32Array(snowCount * 3); for (let i = 0; i < snowCount * 3; i += 3) { positions[i] = (Math.random() - 0.5) * 1000; positions[i + 1] = Math.random() * 500; positions[i + 2] = (Math.random() - 0.5) * 1000; } snowGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const snowMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 2 }); const snow = new THREE.Points(snowGeometry, snowMaterial); this.scene.add(snow); this.snow = snow; } createLighting() { const ambientLight = new THREE.AmbientLight(0x404040, 0.4); this.scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(50, 100, 50); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; this.scene.add(directionalLight); } setupControls() { this.keys = {}; window.addEventListener('keydown', (event) => { this.keys[event.code] = true; if (event.code === 'Space') { event.preventDefault(); if (!this.isCharging && this.isGrounded) { this.isCharging = true; this.chargeLevel = 0; } } if (event.code === 'ControlLeft') { this.groundPound(); } }); window.addEventListener('keyup', (event) => { this.keys[event.code] = false; if (event.code === 'Space') { if (this.isCharging) { this.jump(); this.isCharging = false; } else if (!this.isGrounded && this.canDoubleJump) { this.doubleJump(); } } }); document.getElementById('restartBtn').addEventListener('click', () => { this.restart(); }); } jump() { const jumpPower = Math.min(this.chargeLevel / 100, 1); // Create crack effect when super jumping from ground OR when grounded and charging if (this.isGrounded && (jumpPower >= 0.5 || this.chargeLevel > 0)) { const crackSize = Math.max(1, Math.floor(jumpPower * 10)); this.createCrack(crackSize); this.playSound('crack'); } // Calculate initial velocity for target height using realistic physics // v = sqrt(2 * g * h) where g = 9.8 m/s^2 (realistic gravity) const gravity = 9.8; let targetHeight; if (jumpPower === 1) { targetHeight = 105; } else { targetHeight = 3 + jumpPower * 12; } this.playerVelocity.y = Math.sqrt(2 * gravity * targetHeight); this.isGrounded = false; this.canDoubleJump = true; this.isClimbing = false; this.climbingBuilding = null; this.lastHeight = this.player.position.y; if (jumpPower > 0.3) { this.playSound('jump'); this.createDustTrail(); } this.chargeLevel = 0; } doubleJump() { // Double jump uses the current charge level const jumpPower = Math.min(this.chargeLevel / 100, 1); const gravity = 9.8; let targetHeight; if (jumpPower === 1) { targetHeight = 105; } else { targetHeight = 2 + jumpPower * 10; } this.playerVelocity.y = Math.sqrt(2 * gravity * targetHeight); this.canDoubleJump = false; if (jumpPower > 0.3) { this.playSound('jump'); this.createDustTrail(); } this.chargeLevel = 0; } groundPound() { if (!this.isGrounded) { this.playerVelocity.y = -50; this.isGroundPounding = true; this.groundPoundAnimationTime = 0; } } checkBuildingCollision() { const playerBox = new THREE.Box3().setFromObject(this.player); let onBuilding = false; let nearWall = false; this.buildings.forEach(building => { const buildingBox = new THREE.Box3().setFromObject(building); // Check if player is on top of building if (playerBox.intersectsBox(buildingBox)) { const buildingTop = building.position.y + building.userData.height / 2; const playerBottom = this.player.position.y - 1; // If player is landing on top from above if (this.playerVelocity.y <= 0 && playerBottom >= buildingTop - 3) { this.player.position.y = buildingTop + 1; // Calculate fall height for landing effects if (!this.isGrounded) { const fallHeight = this.lastHeight - buildingTop; if (fallHeight >= 1) { this.createLandingEffects(fallHeight); } } this.playerVelocity.y = 0; this.isGrounded = true; this.canDoubleJump = true; onBuilding = true; return; } // Side collision - prevent passing through walls const centerDistX = Math.abs(this.player.position.x - building.position.x); const centerDistZ = Math.abs(this.player.position.z - building.position.z); const halfWidthX = building.userData.width / 2 + 1; const halfWidthZ = building.userData.depth / 2 + 1; if (centerDistX < halfWidthX && centerDistZ < halfWidthZ) { // Push player out from the closest edge if (centerDistX - halfWidthX > centerDistZ - halfWidthZ) { this.player.position.x = building.position.x + (this.player.position.x > building.position.x ? halfWidthX : -halfWidthX); } else { this.player.position.z = building.position.z + (this.player.position.z > building.position.z ? halfWidthZ : -halfWidthZ); } } } // Check if player is near a wall for climbing const distance = this.player.position.distanceTo(building.position); const buildingRadius = Math.max(building.userData.width, building.userData.depth) / 2; if (distance < buildingRadius + 3 && !onBuilding) { nearWall = true; this.climbingBuilding = building; } }); // Enable climbing if near wall and using WASD to move up if (nearWall && (this.keys['KeyW']) && !this.isGrounded) { this.isClimbing = true; this.playerVelocity.y = 2; } else if (this.isClimbing && !nearWall) { this.isClimbing = false; this.climbingBuilding = null; } return onBuilding; } createDustTrail() { for (let i = 0; i < 10; i++) { const dustGeometry = new THREE.SphereGeometry(0.1); const dustMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513, transparent: true, opacity: 0.7 }); const dust = new THREE.Mesh(dustGeometry, dustMaterial); dust.position.copy(this.player.position); dust.position.add(new THREE.Vector3( (Math.random() - 0.5) * 2, -1, (Math.random() - 0.5) * 2 )); dust.velocity = new THREE.Vector3( (Math.random() - 0.5) * 5, Math.random() * 5, (Math.random() - 0.5) * 5 ); dust.life = 60; this.scene.add(dust); this.particles.push(dust); } } createLandingEffects(fallHeight) { // Check for supernova - trigger when falling 1000+ meters if (fallHeight >= 1000) { this.createSupernova(); this.landingAnimationType = 'bellyflop'; return; } // Determine landing animation type based on fall height if (fallHeight >= 250) { this.landingAnimationType = fallHeight >= 1000 ? 'bellyflop' : 'heroic'; } else { this.landingAnimationType = 'normal'; } this.isLanding = true; this.landingAnimationTime = 0; // Fixed landing effects logic: 1 meter fall = 1 meter crack, 2 meter shockwave // Each additional meter adds 1 meter to crack, 2 meters to shockwave const crackSize = Math.floor(fallHeight); const shockwaveSize = Math.floor(fallHeight) * 2; // Camera shake - intensity depends on height this.cameraShakeIntensity = Math.min(fallHeight * 0.5, 20); // Always create crack for any fall >= 1 meter if (fallHeight >= 1) { this.createCrack(crackSize); this.playSound('crack'); } // Always create shockwave for any fall >= 1 meter if (fallHeight >= 1) { this.createShockwave(shockwaveSize); this.damageNearbyObjects(shockwaveSize, fallHeight); } // Landing dust - amount depends on height this.createLandingDust(fallHeight); } createCrack(crackSize) { // Choose random crack texture from available assets const crackTextures = ['crack1.png', 'crack2.png', 'crack3.png']; const randomCrack = crackTextures[Math.floor(Math.random() * crackTextures.length)]; const textureLoader = new THREE.TextureLoader(); const texture = textureLoader.load(`/${randomCrack}`); const crackGeometry = new THREE.PlaneGeometry(crackSize, crackSize); const crackMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true, alphaTest: 0.5 }); const crack = new THREE.Mesh(crackGeometry, crackMaterial); crack.rotation.x = -Math.PI / 2; crack.position.copy(this.player.position); crack.position.y = 0.1; this.scene.add(crack); this.cracks.push(crack); // Create snowy particles when crack appears this.createSnowParticles(crackSize); // Fade out crack after 5 seconds let fadeTime = 0; const fadeInterval = setInterval(() => { fadeTime += 0.1; crackMaterial.opacity = Math.max(0, 1 - (fadeTime / 5)); if (fadeTime >= 5) { clearInterval(fadeInterval); this.scene.remove(crack); const index = this.cracks.indexOf(crack); if (index > -1) this.cracks.splice(index, 1); } }, 100); } createSnowParticles(crackSize) { const particleCount = Math.floor(crackSize * 10); for (let i = 0; i < particleCount; i++) { const snowGeometry = new THREE.SphereGeometry(0.05 + Math.random() * 0.1); const snowMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.8 }); const snowParticle = new THREE.Mesh(snowGeometry, snowMaterial); snowParticle.position.copy(this.player.position); snowParticle.position.add(new THREE.Vector3( (Math.random() - 0.5) * crackSize, Math.random() * 2, (Math.random() - 0.5) * crackSize )); snowParticle.velocity = new THREE.Vector3( (Math.random() - 0.5) * 5, Math.random() * 8 + 2, (Math.random() - 0.5) * 5 ); snowParticle.life = 120; this.scene.add(snowParticle); this.particles.push(snowParticle); } } createShockwave(shockwaveSize) { const shockwaveGeometry = new THREE.RingGeometry(0, shockwaveSize, 32); const shockwaveMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.5 }); const shockwave = new THREE.Mesh(shockwaveGeometry, shockwaveMaterial); shockwave.rotation.x = -Math.PI / 2; shockwave.position.copy(this.player.position); shockwave.position.y = 0.2; this.scene.add(shockwave); // Animate shockwave expansion let scale = 1; const animate = () => { scale += 0.1; shockwave.scale.setScalar(scale); shockwaveMaterial.opacity -= 0.02; if (shockwaveMaterial.opacity > 0) { requestAnimationFrame(animate); } else { this.scene.remove(shockwave); } }; animate(); } createSupernova() { // Play explosion sound this.playSound('explosion'); // Purple explosion effect for (let i = 0; i < 100; i++) { const explosionGeometry = new THREE.SphereGeometry(Math.random() * 5); const explosionMaterial = new THREE.MeshBasicMaterial({ color: 0x8A2BE2, transparent: true, opacity: 0.8 }); const explosion = new THREE.Mesh(explosionGeometry, explosionMaterial); explosion.position.copy(this.player.position); explosion.position.add(new THREE.Vector3( (Math.random() - 0.5) * 100, (Math.random() - 0.5) * 100, (Math.random() - 0.5) * 100 )); explosion.velocity = new THREE.Vector3( (Math.random() - 0.5) * 20, (Math.random() - 0.5) * 20, (Math.random() - 0.5) * 20 ); explosion.life = 120; this.scene.add(explosion); this.particles.push(explosion); } // Destroy all buildings this.buildings.forEach(building => { this.scene.remove(building); this.playerCoins += 100; }); this.buildings = []; // Damage all Marios this.marios.forEach(mario => { mario.health = 0; }); } createLandingDust(fallHeight) { const dustCount = Math.max(8, Math.floor(fallHeight * 3)); const ringRadius = Math.max(2, fallHeight * 0.5); for (let i = 0; i < dustCount; i++) { const dustGeometry = new THREE.SphereGeometry(0.3 + Math.random() * 0.2); const dustMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.7 }); const dust = new THREE.Mesh(dustGeometry, dustMaterial); // Position dust in a ring pattern const angle = (i / dustCount) * Math.PI * 2; const distance = ringRadius * (0.5 + Math.random() * 0.5); dust.position.copy(this.player.position); dust.position.x += Math.cos(angle) * distance; dust.position.z += Math.sin(angle) * distance; dust.position.y += Math.random() * 0.5; dust.velocity = new THREE.Vector3( Math.cos(angle) * (2 + Math.random() * 3), Math.random() * 3 + 1, Math.sin(angle) * (2 + Math.random() * 3) ); dust.life = 80; this.scene.add(dust); this.particles.push(dust); } } damageNearbyObjects(shockwaveRadius, fallHeight) { // Damage Marios this.marios.forEach(mario => { const distance = this.player.position.distanceTo(mario.position); if (distance < shockwaveRadius) { const damage = Math.floor(fallHeight * 0.1); mario.health -= damage; if (mario.health <= 0) { this.knockoutMario(mario); } else { this.playSound('hurt'); } } }); // Damage buildings this.buildings.forEach((building, index) => { const distance = this.player.position.distanceTo(building.position); if (distance < shockwaveRadius) { const damage = Math.floor(fallHeight * 2); building.health -= damage; building.health = Math.max(0, building.health); // Update health bar this.updateBuildingHealthBar(building); if (building.health <= 0) { this.destroyBuilding(building, index); } } }); } updateBuildingHealthBar(building) { if (building.userData.healthBar && building.userData.healthBarFill) { const healthPercent = (building.health / building.maxHealth) * 100; building.userData.healthBarFill.style.width = `${healthPercent}%`; // Show health bar when damaged if (building.health < building.maxHealth) { building.userData.healthBar.style.display = 'block'; } } } knockoutMario(mario) { this.playerCoins += mario.coins; this.scene.remove(mario); const index = this.marios.indexOf(mario); if (index > -1) { this.marios.splice(index, 1); this.marioCount--; } this.playSound('coin'); if (this.marioCount === 0) { this.nextRound(); } } destroyBuilding(building, index) { this.playerCoins += 100; this.scene.remove(building); // Remove health bar if (building.userData.healthBar) { document.body.removeChild(building.userData.healthBar); } this.buildings.splice(index, 1); this.playSound('crack'); } nextRound() { this.round++; if (this.round > 5) { this.endGame(); } else { this.marioCount = 99; this.createMarios(); } } endGame() { const place = this.getPlayerPlace(); let medal = ''; let congratsText = ''; if (place <= 3) { if (place === 1) { medal = '🥇'; congratsText = '1st PLACE CONGRATULATIONS!'; } else if (place === 2) { medal = '🥈'; congratsText = '2nd PLACE CONGRATULATIONS!'; } else { medal = '🥉'; congratsText = '3rd PLACE CONGRATULATIONS!'; } this.playSound('applause'); } else { congratsText = `YOU PLACED ${this.getOrdinalSuffix(place)}`; } document.getElementById('endText').textContent = medal + ' ' + congratsText; document.getElementById('endScreen').style.display = 'flex'; } getPlayerPlace() { // Simplified - player is always 1st if they have coins return this.playerCoins > 0 ? 1 : Math.floor(Math.random() * 10) + 1; } getOrdinalSuffix(num) { const suffixes = ['th', 'st', 'nd', 'rd']; const v = num % 100; return num + (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]); } restart() { // Clear scene this.scene.clear(); // Remove all health bars const healthBars = document.querySelectorAll('.building-healthbar'); healthBars.forEach(bar => document.body.removeChild(bar)); // Reset game state this.round = 1; this.marioCount = 99; this.playerCoins = 0; this.chargeLevel = 0; this.marios = []; this.buildings = []; this.particles = []; this.cracks = []; this.coins = []; this.isClimbing = false; this.climbingBuilding = null; this.lastHeight = 0; // Hide end screen document.getElementById('endScreen').style.display = 'none'; // Reinitialize this.init(); } updatePlayer() { // Handle charging - max charge with coins bonus if (this.isCharging && this.keys['Space']) { const maxCharge = 100 + this.playerCoins; this.chargeLevel = Math.min(this.chargeLevel + 2, maxCharge); } // Handle double jump charging if (!this.isGrounded && !this.isCharging && this.canDoubleJump && this.keys['Space']) { const maxCharge = 100 + this.playerCoins; this.chargeLevel = Math.min(this.chargeLevel + 2, maxCharge); } // Movement - Use Arrow keys for normal movement, WASD only when climbing const speed = 0.5; let isMoving = false; if (this.isClimbing) { // WASD controls when climbing if (this.keys['KeyA']) { this.player.position.x -= speed; isMoving = true; } if (this.keys['KeyD']) { this.player.position.x += speed; isMoving = true; } if (this.keys['KeyW']) { this.playerVelocity.y = 2; } if (this.keys['KeyS']) { this.playerVelocity.y = -2; } } else { // Arrow keys for normal movement if (this.keys['ArrowLeft']) { this.player.position.x -= speed; isMoving = true; } if (this.keys['ArrowRight']) { this.player.position.x += speed; isMoving = true; } if (this.keys['ArrowUp']) { this.player.position.z -= speed; isMoving = true; } if (this.keys['ArrowDown']) { this.player.position.z += speed; isMoving = true; } } // Update walking state this.isWalking = isMoving && this.isGrounded && !this.isLanding && !this.isGroundPounding; // Check building collision const onBuilding = this.checkBuildingCollision(); // Realistic gravity (9.8 m/s^2) - only if not climbing or on building if (!this.isGrounded && !this.isClimbing && !onBuilding) { this.playerVelocity.y -= 9.8 * 0.016; } // Apply velocity only if not climbing if (!this.isClimbing) { this.player.position.add(this.playerVelocity.clone().multiplyScalar(0.016)); } // Ground collision if (this.player.position.y <= 2 && this.playerVelocity.y <= 0 && !onBuilding) { const fallHeight = this.lastHeight - 2; // Always create effects if falling 1+ meters if (fallHeight >= 1 && !this.isGrounded) { this.createLandingEffects(fallHeight); } this.player.position.y = 2; this.playerVelocity.y = 0; this.isGrounded = true; this.canDoubleJump = true; this.isClimbing = false; this.climbingBuilding = null; } // Update last height when grounded or on building if (this.isGrounded || onBuilding) { this.lastHeight = this.player.position.y; } // Update animations this.updatePlayerAnimations(); // Update height this.playerHeight = Math.max(0, this.player.position.y - 2); // Space transition if (this.playerHeight > 1000) { this.renderer.setClearColor(0x000011); } else { this.renderer.setClearColor(0x87CEEB); } } updatePlayerAnimations() { if (!this.player.userData) return; const { body, head, legs } = this.player.userData; // Reset all rotations body.rotation.set(0, 0, 0); head.rotation.set(0, 0, 0); legs.forEach(leg => leg.rotation.set(0, 0, 0)); // Walking animation if (this.isWalking) { this.walkAnimationTime += 0.2; const bobAmount = Math.sin(this.walkAnimationTime) * 0.1; body.position.y = bobAmount; head.position.y = 1 + bobAmount; // Leg walking animation legs.forEach((leg, index) => { const phase = index < 2 ? 0 : Math.PI; // Front legs vs back legs leg.rotation.x = Math.sin(this.walkAnimationTime + phase) * 0.3; }); } else { this.walkAnimationTime = 0; body.position.y = 0; head.position.y = 1; } // Landing animations if (this.isLanding) { this.landingAnimationTime += 0.1; switch (this.landingAnimationType) { case 'normal': // Simple landing - slight crouch if (this.landingAnimationTime < 0.5) { const squash = Math.sin(this.landingAnimationTime * Math.PI * 2) * 0.2; body.scale.y = 1 - squash; legs.forEach(leg => leg.scale.y = 1 - squash * 0.5); } break; case 'heroic': // Heroic landing - dramatic pose if (this.landingAnimationTime < 1) { body.rotation.x = Math.sin(this.landingAnimationTime * Math.PI) * 0.3; head.rotation.x = -body.rotation.x * 0.5; legs.forEach((leg, index) => { leg.rotation.x = index < 2 ? 0.2 : -0.2; }); } break; case 'bellyflop': // Belly flop - flat on ground if (this.landingAnimationTime < 2) { body.rotation.z = Math.PI / 2; head.rotation.z = Math.PI / 2; legs.forEach(leg => { leg.rotation.z = Math.PI / 2; leg.rotation.x = (Math.random() - 0.5) * 0.5; }); } break; } if (this.landingAnimationTime > 2) { this.isLanding = false; this.landingAnimationTime = 0; // Reset scales body.scale.set(1, 1, 1); legs.forEach(leg => leg.scale.set(1, 1, 1)); } } // Ground pound animation if (this.isGroundPounding) { this.groundPoundAnimationTime += 0.2; // Flip animation if (this.groundPoundAnimationTime < Math.PI) { body.rotation.x = this.groundPoundAnimationTime; head.rotation.x = this.groundPoundAnimationTime; legs.forEach(leg => leg.rotation.x = this.groundPoundAnimationTime); } // Land on butt when hitting ground if (this.isGrounded && this.groundPoundAnimationTime > Math.PI) { body.rotation.x = Math.PI / 4; // Sitting position head.rotation.x = -Math.PI / 8; legs.forEach((leg, index) => { leg.rotation.x = index < 2 ? Math.PI / 3 : -Math.PI / 6; }); if (this.groundPoundAnimationTime > Math.PI + 1) { this.isGroundPounding = false; this.groundPoundAnimationTime = 0; } } } } updateMarios() { this.marios.forEach(mario => { // Simple AI movement if (Math.random() < 0.02) { mario.velocity.set( (Math.random() - 0.5) * 2, 0, (Math.random() - 0.5) * 2 ); } mario.position.add(mario.velocity); mario.velocity.multiplyScalar(0.98); // Keep on ground if (mario.position.y < 1.5) { mario.position.y = 1.5; } // Boundary check if (Math.abs(mario.position.x) > 200 || Math.abs(mario.position.z) > 200) { mario.position.set( (Math.random() - 0.5) * 100, 5, (Math.random() - 0.5) * 100 ); } }); } updateParticles() { for (let i = this.particles.length - 1; i >= 0; i--) { const particle = this.particles[i]; if (particle.velocity) { particle.position.add(particle.velocity); particle.velocity.y -= 0.1; particle.velocity.multiplyScalar(0.95); } if (particle.material && particle.material.opacity !== undefined) { particle.material.opacity -= 0.01; } particle.life--; if (particle.life <= 0 || (particle.material && particle.material.opacity <= 0)) { this.scene.remove(particle); this.particles.splice(i, 1); } } } updateCamera() { // Follow player with offset const targetPosition = new THREE.Vector3( this.player.position.x, this.player.position.y + 8, this.player.position.z + 12 ); // Camera shake if (this.cameraShakeIntensity > 0) { targetPosition.add(new THREE.Vector3( (Math.random() - 0.5) * this.cameraShakeIntensity, (Math.random() - 0.5) * this.cameraShakeIntensity, (Math.random() - 0.5) * this.cameraShakeIntensity )); this.cameraShakeIntensity *= this.cameraShakeDecay; } this.camera.position.lerp(targetPosition, 0.1); this.camera.lookAt(this.player.position); // Update building health bar positions this.updateBuildingHealthBarPositions(); } updateBuildingHealthBarPositions() { this.buildings.forEach(building => { if (building.userData.healthBar && building.health < building.maxHealth) { const screenPosition = this.worldToScreen( building.position.x, building.position.y + building.userData.height / 2 + 5, building.position.z ); if (screenPosition) { building.userData.healthBar.style.left = `${screenPosition.x - 30}px`; building.userData.healthBar.style.top = `${screenPosition.y - 10}px`; // Hide if too far away const distance = this.player.position.distanceTo(building.position); building.userData.healthBar.style.display = distance < 100 ? 'block' : 'none'; } } }); } worldToScreen(x, y, z) { const vector = new THREE.Vector3(x, y, z); vector.project(this.camera); const screenX = (vector.x * 0.5 + 0.5) * window.innerWidth; const screenY = (vector.y * -0.5 + 0.5) * window.innerHeight; // Only return position if in front of camera if (vector.z < 1) { return { x: screenX, y: screenY }; } return null; } updateHelicopter() { this.helicopterTimer++; if (this.helicopterTimer > 300 && Math.random() < 0.005) { this.dropCoins(); this.helicopterTimer = 0; } } dropCoins() { for (let i = 0; i < 10; i++) { const coinGeometry = new THREE.CylinderGeometry(0.3, 0.3, 0.1); const coinMaterial = new THREE.MeshLambertMaterial({ color: 0xFFD700 }); const coin = new THREE.Mesh(coinGeometry, coinMaterial); coin.position.set( this.player.position.x + (Math.random() - 0.5) * 50, 50, this.player.position.z + (Math.random() - 0.5) * 50 ); coin.velocity = new THREE.Vector3(0, 0, 0); this.scene.add(coin); this.coins.push(coin); } } updateCoins() { for (let i = this.coins.length - 1; i >= 0; i--) { const coin = this.coins[i]; coin.velocity.y -= 0.1; coin.position.add(coin.velocity); coin.rotation.y += 0.1; // Ground collision if (coin.position.y <= 1) { coin.position.y = 1; coin.velocity.y = 0; } // Player collection if (this.player.position.distanceTo(coin.position) < 3) { this.playerCoins++; this.playSound('coin'); this.scene.remove(coin); this.coins.splice(i, 1); } } } updateHUD() { const maxCharge = 100 + this.playerCoins; const displayCharge = Math.min(this.chargeLevel, 100); document.getElementById('coinCounter').textContent = `🪙 ${this.playerCoins}`; document.getElementById('chargeBarFill').style.width = `${displayCharge}%`; document.getElementById('chargeText').textContent = `${Math.floor(displayCharge)}%`; document.getElementById('roundInfo').textContent = `Round: ${this.round}/5`; document.getElementById('marioCount').textContent = `Marios: ${this.marioCount}`; document.getElementById('height').textContent = `Height: ${Math.floor(this.playerHeight)}m`; document.getElementById('place').textContent = `Place: ${this.getPlayerPlace()}${this.getOrdinalSuffix(this.getPlayerPlace()).slice(-2)}`; } animate() { requestAnimationFrame(() => this.animate()); this.updatePlayer(); this.updateMarios(); this.updateParticles(); this.updateCamera(); this.updateHelicopter(); this.updateCoins(); this.updateHUD(); // Animate snow if (this.snow) { this.snow.rotation.y += 0.001; const positions = this.snow.geometry.attributes.position.array; for (let i = 1; i < positions.length; i += 3) { positions[i] -= 0.5; if (positions[i] < 0) { positions[i] = 500; } } this.snow.geometry.attributes.position.needsUpdate = true; } this.renderer.render(this.scene, this.camera); } } // Start the game window.addEventListener('load', () => { new Game(); }); // Handle window resize window.addEventListener('resize', () => { const camera = window.game?.camera; const renderer = window.game?.renderer; if (camera && renderer) { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } });) and (* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: #000; overflow: hidden; } #gameContainer { width: 100vw; height: 100vh; position: relative; } #gameCanvas { display: block; width: 100%; height: 100%; } #hud { position: absolute; top: 20px; left: 20px; right: 20px; z-index: 100; pointer-events: none; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); } #title { font-size: 24px; font-weight: bold; text-align: center; color: #ff0; margin-bottom: 10px; } #coinCounter { font-size: 18px; font-weight: bold; } #chargeBar { width: 200px; height: 20px; border: 2px solid white; margin: 10px 0; position: relative; background: rgba(0,0,0,0.5); } #chargeBarFill { height: 100%; background: linear-gradient(90deg, #0f0, #ff0, #f00); width: 0%; transition: width 0.1s; } #chargeText { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: bold; } #compass { position: absolute; top: 0; right: 100px; font-size: 24px; } #minimap { position: absolute; top: 40px; right: 0; width: 150px; height: 150px; border: 2px solid white; background: rgba(0,0,0,0.7); } #height, #place { font-size: 16px; margin: 5px 0; } #endScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 200; } #endText { font-size: 48px; font-weight: bold; margin-bottom: 30px; background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rainbow 2s ease-in-out infinite; } @keyframes rainbow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } #restartBtn { padding: 15px 30px; font-size: 20px; background: #0f0; color: white; border: none; border-radius: 10px; cursor: pointer; pointer-events: all; } #restartBtn:hover { background: #0a0; } .building-healthbar { position: absolute; width: 60px; height: 8px; background: rgba(0,0,0,0.5); border: 1px solid white; z-index: 50; } .building-healthbar-fill { height: 100%; background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00); transition: width 0.3s; }) but we've fixed the jump height to 7.35m every 100% also can exceed up to infinity so it can go beyond 100 and it has 100 helicopters and it's named \"Mario Party 99 v2 hacked\" please make this please","url","link_url","/p/htw2f6kdygon2gu02gk7","versioned_link_url","/p/htw2f6kdygon2gu02gk7/1","yapping","**Considering game modifications**\n\nThe user wants a modified version of the game with a fixed jump height of 7.35m. They also want it to exceed 100 and include 100 helicopters in a new version called \"Mario Party 99 v2 hacked\". I need to create several files: index.html, game.js, and style.css. \n\nThere's a question about keeping arrow keys for controls versus WASD, which is the default for the system. I'll probably keep the original controls but consider adding WASD for flexibility. I'll also need to adjust the title text, HUD title, and end screen accordingly. For jump logic, I need to modify the targetHeight based on other factors.\n**Adjusting jump mechanics**\n\nThe user wants the jump height to be fixed at 7.35m for every 100% of charge without a cap. This means I need to set the targetHeight to 7.35 * (chargeLevel / 100) and allow chargeLevel to grow infinitely, which might make the physics unpredictable. \n\nEarlier, chargeLevel had a cap related to playerCoins, but now it seems I need to remove that maxCharge constraint altogether. I'll need to update the double jump mechanics similarly, ensuring the targetHeight reflects these changes. Lastly, I'll check the landing effects linked to fallHeight.\n**Implementing helicopter mechanics**\n\nThe user wants to incorporate 100 helicopters into the game, even though the original design didn't include helicopter objects, just coin drops with a timer. I could approach this by modifying the dropCoins function to loop through dropping multiple coins across various positions. \n\nSince creating 100 independent timers might be too complex, I'll opt for a simpler way: looping 100 times to call dropCoinsSmall. Each helicopter will be interpreted as a simultaneous coin drop. To manage the load, I think allowing each helicopter to drop just one coin could be more manageable.\n**Organizing game title and assets**\n\nI need to set the title in both the HTML tag and the HUD's innerText to \"MARIO PARTY 99 V2 HACKED\" while following the user's capitalization request. The sound and texture paths are the same, but I don’t have the assets yet, which is okay. \n\nAlso, I notice the importmap uses unpkg, but the guideline suggests using esm.sh CDN instead. I'll update it to \"https://esm.sh/three@0.158.0\". I have to fix how the game's constructor assigns window.game for proper functionality and ensure the CSS prevents scrolling and matches the requested design choices while avoiding blue backgrounds unless necessary. I'll manage the other code modifications for gameplay as well.\n**Updating player charging mechanics**\n\nI’m looking to update the player charging mechanics. Currently, maxCharge is defined as 100 plus playerCoins, but I’ll change it to be infinite. This makes using Math.min unnecessary, so I'll just increase chargeLevel by 2.\n\nFor HUD display, I’ll adjust it to show actual percentages instead of a capped 100, allowing for text to indicate values over 100 while keeping the progress bar width at 100%. I'll maintain the jumping mechanics without resetting chargeLevel after a jump and ensure double jump behavior continues charging while in the air. Finally, I'll focus on more frequent coin drops instead of creating actual objects for helicopters.\n\nindex.html\n\n```index.html\n```\n\nstyle.css\n```style.css\n```\n\ngame.js\n```game.js\n```","cursor","eyJpZCI6Imh0dzJmNmtkeWdvbjJndTAyZ2s3In0","token","included",[],"routes/browser/layout","actionData","errors"] </article></body></html>