Character Duo Game

Select Your Characters

Warrior (Strong attacks)

Mage (Magic abilities)

Rogue (Fast movement)

Jump

Atk

Ability

Throw

import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; // Game state const gameState = { player: null, partner: null, selectedCharacter: null, isJumping: false, velocity: new THREE.Vector3(), direction: new THREE.Vector3(), moveForward: false, moveLeft: false, moveRight: false, moveBackward: false }; // Setup scene const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); // Setup camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.y = 5; // Setup renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Add ground const groundGeometry = new THREE.PlaneGeometry(100, 100); const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x3a5f0b }); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground); // Add some obstacles const obstacleGeometry = new THREE.BoxGeometry(5, 5, 5); const obstacleMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial); obstacle.position.set(10, 2.5, 0); scene.add(obstacle); // Add lights const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(10, 20, 10); directionalLight.castShadow = true; scene.add(directionalLight); // Character classes class Character { constructor(type, scene) { this.type = type; this.mesh = new THREE.Group(); this.scene = scene; this.setupCharacter(); } setupCharacter() { const geometry = new THREE.BoxGeometry(1, 2, 1); let material; switch(this.type) { case 'warrior': material = new THREE.MeshStandardMaterial({ color: 0xff0000 }); break; case 'mage': material = new THREE.MeshStandardMaterial({ color: 0x0000ff }); break; case 'rogue': material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); break; default: material = new THREE.MeshStandardMaterial({ color: 0xffffff }); } const body = new THREE.Mesh(geometry, material); this.mesh.add(body); this.scene.add(this.mesh); } jump() { if (!gameState.isJumping) { gameState.velocity.y += 10; gameState.isJumping = true; } } attack() { console.log(`${this.type} attacks!`); } useAbility() { console.log(`${this.type} uses special ability!`); } throwPartner() { console.log(`Throwing partner!`); } } // Handle character selection document.querySelectorAll('.character-option').forEach(option => { option.addEventListener('click', () => { const characterType = option.getAttribute('data-character'); gameState.selectedCharacter = characterType; // Create player and partner gameState.player = new Character(characterType, scene); gameState.partner = new Character(getPartnerType(characterType), scene); gameState.player.mesh.position.set(0, 1, 0); gameState.partner.mesh.position.set(2, 1, 0); document.getElementById('character-select').style.display = 'none'; }); }); function getPartnerType(playerType) { const types = ['warrior', 'mage', 'rogue']; return types.filter(type => type !== playerType)[0]; } // Touch controls setup const moveJoystick = document.getElementById('move-joystick'); const joystickHandle = moveJoystick.querySelector('.joystick-handle'); let joystickActive = false; let joystickStartX = 0; let joystickStartY = 0; let joystickX = 0; let joystickY = 0; moveJoystick.addEventListener('touchstart', (e) => { const rect = moveJoystick.getBoundingClientRect(); joystickStartX = rect.left + rect.width / 2; joystickStartY = rect.top + rect.height / 2; joystickActive = true; updateJoystick(e.touches[0].clientX, e.touches[0].clientY); }); document.addEventListener('touchmove', (e) => { if (joystickActive) { updateJoystick(e.touches[0].clientX, e.touches[0].clientY); } }); document.addEventListener('touchend', () => { if (joystickActive) { joystickActive = false; joystickHandle.style.transform = 'translate(0, 0)'; gameState.moveForward = false; gameState.moveBackward = false; gameState.moveLeft = false; gameState.moveRight = false; } }); function updateJoystick(touchX, touchY) { const deltaX = touchX - joystickStartX; const deltaY = touchY - joystickStartY; const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); const maxDistance = 50; if (distance > maxDistance) { const angle = Math.atan2(deltaY, deltaX); joystickX = Math.cos(angle) * maxDistance; joystickY = Math.sin(angle) * maxDistance; } else { joystickX = deltaX; joystickY = deltaY; } joystickHandle.style.transform = `translate(${joystickX}px, ${joystickY}px)`; // Update movement state gameState.moveForward = joystickY < -10; gameState.moveBackward = joystickY > 10; gameState.moveLeft = joystickX < -10; gameState.moveRight = joystickX > 10; } // Action buttons document.getElementById('jump-btn').addEventListener('touchstart', () => { if (gameState.player) gameState.player.jump(); }); document.getElementById('attack-btn').addEventListener('touchstart', () => { if (gameState.player) gameState.player.attack(); }); document.getElementById('ability-btn').addEventListener('touchstart', () => { if (gameState.player) gameState.player.useAbility(); }); document.getElementById('throw-btn').addEventListener('touchstart', () => { if (gameState.player) gameState.player.throwPartner(); }); // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Physics const gravity = -30; const clock = new THREE.Clock(); // Animation loop function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); if (gameState.player) { // Player movement gameState.velocity.x -= gameState.velocity.x * 10.0 * delta; gameState.velocity.z -= gameState.velocity.z * 10.0 * delta; gameState.direction.z = Number(gameState.moveForward) - Number(gameState.moveBackward); gameState.direction.x = Number(gameState.moveRight) - Number(gameState.moveLeft); gameState.direction.normalize(); if (gameState.moveForward || gameState.moveBackward) gameState.velocity.z -= gameState.direction.z * 20.0 * delta; if (gameState.moveLeft || gameState.moveRight) gameState.velocity.x -= gameState.direction.x * 20.0 * delta; gameState.player.mesh.translateX(gameState.velocity.x * delta); gameState.player.mesh.translateZ(gameState.velocity.z * delta); // Apply gravity gameState.velocity.y += gravity * delta; gameState.player.mesh.position.y += gameState.velocity.y * delta; // Ground collision if (gameState.player.mesh.position.y < 1) { gameState.player.mesh.position.y = 1; gameState.velocity.y = 0; gameState.isJumping = false; } // Partner follow behavior if (gameState.partner) { const partnerPos = gameState.partner.mesh.position; const playerPos = gameState.player.mesh.position; const direction = new THREE.Vector3().subVectors(playerPos, partnerPos); if (direction.length() > 3) { direction.normalize().multiplyScalar(5 * delta); partnerPos.add(direction); } // Make partner look at player gameState.partner.mesh.lookAt(playerPos); } // Camera follow camera.position.x = gameState.player.mesh.position.x; camera.position.z = gameState.player.mesh.position.z + 5; camera.lookAt(gameState.player.mesh.position); } renderer.render(scene, camera); } animate();