3D Battleship

Okay, let's start building the 3D Battleship game. We'll begin with the basic HTML structure, the main Three.js setup, and the Grid component. 3D Battleship

3D Battleship - Place Your Ships

Ship: Orientation:

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { Grid } from './components/Grid.js'; import { GameManager } from './components/GameManager.js'; import { Player } from './components/Player.js'; import { AI } from './components/AI.js'; import { Ship } from './components/Ship.js'; // Import Ship // --- Scene Setup --- const scene = new THREE.Scene(); scene.background = new THREE.Color(0x1a2a3a); // Dark blue background // --- Camera --- const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(10, 15, 20); // Adjusted initial camera position // --- Renderer --- const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // --- Lighting --- const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); directionalLight.position.set(5, 10, 7.5); scene.add(directionalLight); // --- Controls --- const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.target.set(5, 5, 5); // Target the center of the grid // --- Game Components --- const gridSize = 10; const cellSize = 1; // Size of each grid cell const playerGrid = new Grid(gridSize, cellSize, 0x00ffff); // Cyan for player playerGrid.position.set(0, 0, 0); // Position player grid scene.add(playerGrid); const opponentGrid = new Grid(gridSize, cellSize, 0xffa500); // Orange for opponent (initially hidden) opponentGrid.position.set(gridSize * cellSize + 5, 0, 0); // Position opponent grid to the side opponentGrid.visible = false; // Hide opponent grid initially scene.add(opponentGrid); const player = new Player('Player 1', playerGrid); const ai = new AI('AI Opponent', opponentGrid); const gameManager = new GameManager(player, ai); // --- Ship Placement Setup --- const shipSelector = document.getElementById('shipSelect'); const orientationSelector = document.getElementById('orientationSelect'); const placeShipButton = document.getElementById('placeShipButton'); const startGameButton = document.getElementById('startGameButton'); const infoElement = document.getElementById('info'); let placementMode = true; // Start in placement mode let selectedCell = null; // Store the currently hovered cell for placement let placementShipMesh = null; // Ghost mesh for placing ships const shipTypes = { carrier: { length: 5, name: 'Carrier' }, battleship: { length: 4, name: 'Battleship' }, submarine: { length: 3, name: 'Submarine' }, destroyer: { length: 3, name: 'Destroyer' }, patrol: { length: 2, name: 'Patrol Boat' }, }; let shipsToPlace = Object.keys(shipTypes); // Array of ship keys to place function updatePlacementShip() { if (!placementMode || !selectedCell) return; const shipKey = shipSelector.value; const shipData = shipTypes[shipKey]; const orientation = orientationSelector.value; if (placementShipMesh) { scene.remove(placementShipMesh); placementShipMesh.geometry.dispose(); placementShipMesh.material.dispose(); } const shipLength = shipData.length; let shipWidth = cellSize * 0.8; let shipHeight = cellSize * 0.8; let shipDepth = cellSize * 0.8; if (orientation === 'x') shipWidth = cellSize * shipLength - (cellSize - shipWidth); else if (orientation === 'y') shipHeight = cellSize * shipLength - (cellSize - shipHeight); else if (orientation === 'z') shipDepth = cellSize * shipLength - (cellSize - shipDepth); const geometry = new THREE.BoxGeometry(shipWidth, shipHeight, shipDepth); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.5 }); placementShipMesh = new THREE.Mesh(geometry, material); // Calculate center position based on orientation and length const centerOffset = (shipLength - 1) / 2; const pos = selectedCell.clone(); // Center of the selected cell if (orientation === 'x') pos.x += centerOffset * cellSize; else if (orientation === 'y') pos.y += centerOffset * cellSize; else if (orientation === 'z') pos.z += centerOffset * cellSize; placementShipMesh.position.copy(pos); scene.add(placementShipMesh); } placeShipButton.addEventListener('click', () => { if (!placementMode || !selectedCell || shipsToPlace.length === 0) return; const shipKey = shipSelector.value; const shipData = shipTypes[shipKey]; const orientation = orientationSelector.value; const startCoords = playerGrid.worldToGridCoords(selectedCell); if (!startCoords) return; // Clicked outside grid bounds const ship = new Ship(shipData.name, shipData.length); const placed = player.placeShip(ship, startCoords, orientation); if (placed) { console.log(`Placed ${shipData.name} at ${JSON.stringify(startCoords)}, orientation: ${orientation}`); // Remove placed ship from list and selector const placedIndex = shipsToPlace.indexOf(shipKey); if (placedIndex > -1) { shipsToPlace.splice(placedIndex, 1); shipSelector.remove(shipSelector.selectedIndex); } // Update UI if (shipsToPlace.length > 0) { shipSelector.selectedIndex = 0; // Select next available ship updatePlacementShip(); // Update ghost ship for the new selection infoElement.textContent = `Place your ${shipTypes[shipsToPlace[0]].name} (${shipTypes[shipsToPlace[0]].length})`; } else { infoElement.textContent = 'All ships placed! Press Start Game.'; if (placementShipMesh) scene.remove(placementShipMesh); placeShipButton.style.display = 'none'; orientationSelector.style.display = 'none'; shipSelector.style.display = 'none'; document.querySelector('#controls label[for="shipSelect"]').style.display = 'none'; document.querySelector('#controls label[for="orientationSelect"]').style.display = 'none'; startGameButton.style.display = 'block'; placementMode = false; // Exit placement mode logic temporarily } } else { console.error("Failed to place ship. Invalid position or overlap."); // Add user feedback (e.g., make ghost ship red) if (placementShipMesh) placementShipMesh.material.color.setHex(0xff0000); setTimeout(() => { if (placementShipMesh) placementShipMesh.material.color.setHex(0x00ff00); }, 500); } }); startGameButton.addEventListener('click', () => { if (shipsToPlace.length === 0) { placementMode = false; startGameButton.style.display = 'none'; document.getElementById('controls').style.display = 'none'; // Hide placement controls infoElement.textContent = "Player 1's Turn"; opponentGrid.visible = true; // Show opponent grid ai.placeShipsRandomly(Object.values(shipTypes)); // AI places its ships console.log("Game Started!"); // Position camera between grids camera.position.set(gridSize * cellSize + 2.5, 15, 20); controls.target.set(gridSize * cellSize + 2.5, 5, 5); } }); // --- Raycasting for Interaction --- const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); let intersectedCellMarker = null; // Visual marker for hovered cell function createCellMarker() { const geometry = new THREE.BoxGeometry(cellSize, cellSize, cellSize); const material = new THREE.MeshBasicMaterial({ color: 0xffff00, // Yellow transparent: true, opacity: 0.4, depthWrite: false // Render on top }); const marker = new THREE.Mesh(geometry, material); marker.visible = false; scene.add(marker); return marker; } intersectedCellMarker = createCellMarker(); function onMouseMove(event) { // Calculate mouse position in normalized device coordinates (-1 to +1) mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; if (!intersectedCellMarker) return; raycaster.setFromCamera(mouse, camera); let targetGrid = null; let gridObjects = []; if (placementMode) { targetGrid = playerGrid; gridObjects = [playerGrid.gridHelper]; // Raycast against player grid helper during placement } else if (gameManager.currentPlayer === player && !gameManager.gameOver) { targetGrid = opponentGrid; gridObjects = [opponentGrid.gridHelper]; // Raycast against opponent grid helper during player's turn } else { targetGrid = null; // No interaction if it's AI's turn or game over } if (targetGrid && gridObjects.length > 0) { const intersects = raycaster.intersectObjects(gridObjects); if (intersects.length > 0) { const intersectionPoint = intersects[0].point; // Convert intersection point to grid cell coordinates and then back to world center const cellCenter = targetGrid.getNearestCellCenter(intersectionPoint); if (cellCenter) { intersectedCellMarker.position.copy(cellCenter); intersectedCellMarker.visible = true; selectedCell = cellCenter.clone(); // Store the center position if (placementMode) { updatePlacementShip(); // Update ghost ship position // Check validity for ghost ship color const startCoords = playerGrid.worldToGridCoords(selectedCell); const shipKey = shipSelector.value; const shipData = shipTypes[shipKey]; const orientation = orientationSelector.value; if (startCoords && playerGrid.isValidPlacement(shipData.length, startCoords, orientation, player.ships)) { if(placementShipMesh) placementShipMesh.material.color.setHex(0x00ff00); // Green if valid } else { if(placementShipMesh) placementShipMesh.material.color.setHex(0xff0000); // Red if invalid } } } else { intersectedCellMarker.visible = false; selectedCell = null; if (placementShipMesh) scene.remove(placementShipMesh); // Remove ghost if outside grid } } else { intersectedCellMarker.visible = false; selectedCell = null; if (placementShipMesh) scene.remove(placementShipMesh); // Remove ghost if not intersecting grid } } else { intersectedCellMarker.visible = false; selectedCell = null; if (placementShipMesh) scene.remove(placementShipMesh); } } function onClick(event) { if (placementMode) { // Placement handled by button click using selectedCell return; } if (gameManager.gameOver || gameManager.currentPlayer !== player) return; // Only player can click during their turn // Use the currently hovered cell (selectedCell) if valid if (selectedCell && opponentGrid.containsWorldPosition(selectedCell)) { const targetCoords = opponentGrid.worldToGridCoords(selectedCell); if (targetCoords) { console.log(`Player fires at AI grid: ${JSON.stringify(targetCoords)}`); gameManager.handlePlayerTurn(targetCoords); intersectedCellMarker.visible = false; // Hide marker after firing selectedCell = null; // Reset selection } } } window.addEventListener('mousemove', onMouseMove); window.addEventListener('click', onClick); orientationSelector.addEventListener('change', updatePlacementShip); // Update ghost on orientation change shipSelector.addEventListener('change', updatePlacementShip); // Update ghost on ship type change // --- Window Resize --- window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // --- Animation Loop --- function animate() { requestAnimationFrame(animate); controls.update(); // Required if damping is enabled // Game logic updates can go here if needed per frame gameManager.update(); // Handles AI turn delay etc. renderer.render(scene, camera); } animate(); import * as THREE from 'three'; export class Grid extends THREE.Group { constructor(size = 10, cellSize = 1, color = 0xffffff) { super(); this.gridSize = size; this.cellSize = cellSize; this.totalSize = size * cellSize; this.color = color; this.gridHelper = this.createGridHelper(); this.add(this.gridHelper); // Data structure to hold cell states (0: empty, 1: ship, 2: hit, 3: miss) this.cells = this.createGridDataStructure(); // Visual markers for hits and misses this.markers = []; } createGridHelper() { const halfTotalSize = this.totalSize / 2; const gridHelper = new THREE.GridHelper(this.totalSize, this.gridSize, this.color, this.color); gridHelper.position.set(halfTotalSize, 0, halfTotalSize); // Center the grid helper lines correctly gridHelper.material.opacity = 0.25; gridHelper.material.transparent = true; // Create bounding box lines manually for 3D grid visualization const boxGeo = new THREE.BoxGeometry(this.totalSize, this.totalSize, this.totalSize); const edges = new THREE.EdgesGeometry(boxGeo); const lineMat = new THREE.LineBasicMaterial({ color: this.color, opacity: 0.5, transparent: true }); const boxLines = new THREE.LineSegments(edges, lineMat); // Adjust position to align with the grid cells (origin at 0,0,0) boxLines.position.set(halfTotalSize, halfTotalSize, halfTotalSize); this.add(boxLines); // Add the 3D box outline // Optional: Add internal grid lines (can be performance intensive) // Add lines along X, Y, Z axes within the box if needed return gridHelper; // Return the base grid for raycasting reference } createGridDataStructure() { const cells = []; for (let x = 0; x < this.gridSize; x++) { cells[x] = []; for (let y = 0; y < this.gridSize; y++) { cells[x][y] = []; for (let z = 0; z < this.gridSize; z++) { cells[x][y][z] = { state: 0, ship: null }; // 0 = empty } } } return cells; } // Converts world coordinates (like raycast intersection) to grid cell indices {x, y, z} worldToGridCoords(worldPos) { // Account for the grid's world position const localPos = this.worldToLocal(worldPos.clone()); const x = Math.floor(localPos.x / this.cellSize); const y = Math.floor(localPos.y / this.cellSize); const z = Math.floor(localPos.z / this.cellSize); if (x >= 0 && x < this.gridSize && y >= 0 && y < this.gridSize && z >= 0 && z < this.gridSize) { return { x, y, z }; } return null; // Position is outside the grid bounds } // Converts grid cell indices {x, y, z} to world coordinates (center of the cell) gridToWorldCoords(gridCoords) { const worldX = gridCoords.x * this.cellSize + this.cellSize / 2; const worldY = gridCoords.y * this.cellSize + this.cellSize / 2; const worldZ = gridCoords.z * this.cellSize + this.cellSize / 2; // Convert local position to world position const localPos = new THREE.Vector3(worldX, worldY, worldZ); return this.localToWorld(localPos); } // Gets the center world coordinates of the cell nearest to the given world position getNearestCellCenter(worldPos) { const gridCoords = this.worldToGridCoords(worldPos); if (gridCoords) { return this.gridToWorldCoords(gridCoords); } return null; } // Checks if a world position is within the grid's bounds containsWorldPosition(worldPos) { return this.worldToGridCoords(worldPos) !== null; } getCellState(coords) { if (this.isValidCoords(coords)) { return this.cells[coords.x][coords.y][coords.z].state; } return -1; // Invalid coordinates } setCellState(coords, state, ship = null) { if (this.isValidCoords(coords)) { this.cells[coords.x][coords.y][coords.z].state = state; this.cells[coords.x][coords.y][coords.z].ship = ship; return true; } return false; } isValidCoords(coords) { return coords && coords.x >= 0 && coords.x < this.gridSize && coords.y >= 0 && coords.y < this.gridSize && coords.z >= 0 && coords.z < this.gridSize; } // Check if a ship placement is valid (within bounds and no overlaps) isValidPlacement(length, startCoords, orientation, existingShips) { const cellsToOccupy = []; for (let i = 0; i < length; i++) { const coords = { ...startCoords }; if (orientation === 'x') coords.x += i; else if (orientation === 'y') coords.y += i; else if (orientation === 'z') coords.z += i; if (!this.isValidCoords(coords)) { // console.log("Placement invalid: Out of bounds at", coords); return false; // Out of bounds } if (this.getCellState(coords) === 1) { // console.log("Placement invalid: Overlap at", coords); return false; // Overlaps with another ship segment } cellsToOccupy.push(coords); } return true; // Placement is valid } // Mark a cell as hit or miss and add a visual marker markCell(coords, isHit) { if (!this.isValidCoords(coords)) return false; const currentState = this.getCellState(coords); // Prevent marking already hit/missed cells again if (currentState === 2 || currentState === 3) return false; const newState = isHit ? 2 : 3; // 2 = hit, 3 = miss const ship = this.cells[coords.x][coords.y][coords.z].ship; this.setCellState(coords, newState, ship); const markerColor = isHit ? 0xff0000 : 0x808080; // Red for hit, Gray for miss const markerSize = this.cellSize * 0.5; // Smaller marker const geometry = new THREE.SphereGeometry(markerSize / 2, 16, 16); const material = new THREE.MeshBasicMaterial({ color: markerColor }); const marker = new THREE.Mesh(geometry, material); marker.position.copy(this.gridToWorldCoords(coords)); this.add(marker); // Add marker to the grid group this.markers.push(marker); if (isHit && ship) { ship.hit(); // Notify the ship it was hit // Add explosion effect here later this.addExplosion(marker.position); } return true; } addExplosion(position) { // Simple scaling sphere effect for explosion const explosionGeo = new THREE.SphereGeometry(this.cellSize * 0.1, 16, 16); const explosionMat = new THREE.MeshBasicMaterial({ color: 0xffaa00, transparent: true, opacity: 0.8 }); const explosionMesh = new THREE.Mesh(explosionGeo, explosionMat); explosionMesh.position.copy(position); this.add(explosionMesh); let scale = 1; const maxScale = 8; // Scale factor relative to initial size const duration = 300; // ms const startTime = Date.now(); const animateExplosion = () => { const elapsedTime = Date.now() - startTime; if (elapsedTime < duration) { const progress = elapsedTime / duration; scale = 1 + progress * (maxScale - 1); explosionMesh.scale.set(scale, scale, scale); explosionMat.opacity = 0.8 * (1 - progress); // Fade out requestAnimationFrame(animateExplosion); } else { this.remove(explosionMesh); // Remove after animation explosionMesh.geometry.dispose(); explosionMesh.material.dispose(); } }; animateExplosion(); } // Reset grid state and remove markers reset() { this.cells = this.createGridDataStructure(); this.markers.forEach(marker => { this.remove(marker); marker.geometry.dispose(); marker.material.dispose(); }); this.markers = []; } } import * as THREE from 'three'; export class Ship { constructor(name, length, cellSize = 1) { this.name = name; this.length = length; this.hits = 0; this.sunk = false; this.mesh = null; // Three.js mesh for visualization this.cellSize = cellSize; this.orientation = null; // 'x', 'y', or 'z' this.positionCoords = null; // Grid coordinates {x, y, z} of the starting cell } createMesh(startCoords, orientation, gridWorldPosition) { this.orientation = orientation; this.positionCoords = startCoords; const shipWidth = this.cellSize * 0.8; const shipHeight = this.cellSize * 0.8; const shipDepth = this.cellSize * 0.8; let finalWidth = shipWidth; let finalHeight = shipHeight; let finalDepth = shipDepth; // Adjust the longest dimension based on orientation if (orientation === 'x') finalWidth = this.cellSize * this.length - (this.cellSize - shipWidth); else if (orientation === 'y') finalHeight = this.cellSize * this.length - (this.cellSize - shipHeight); else if (orientation === 'z') finalDepth = this.cellSize * this.length - (this.cellSize - shipDepth); const geometry = new THREE.BoxGeometry(finalWidth, finalHeight, finalDepth); // Use a different color or material for placed ships vs ghost const material = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, // Grey color for placed ships metalness: 0.5, roughness: 0.6 }); this.mesh = new THREE.Mesh(geometry, material); // Calculate the center position of the mesh in local grid space const centerOffset = (this.length - 1) / 2; const localPos = new THREE.Vector3( startCoords.x * this.cellSize + this.cellSize / 2, startCoords.y * this.cellSize + this.cellSize / 2, startCoords.z * this.cellSize + this.cellSize / 2 ); if (orientation === 'x') localPos.x += centerOffset * this.cellSize; else if (orientation === 'y') localPos.y += centerOffset * this.cellSize; else if (orientation === 'z') localPos.z += centerOffset * this.cellSize; // Set mesh position relative to the grid's origin this.mesh.position.copy(localPos); // The mesh will be added to the Grid object, so its world position // will be automatically calculated based on the Grid's world position. // No need to add gridWorldPosition here if the mesh is a child of the Grid. return this.mesh; } hit() { this.hits++; if (this.hits >= this.length) { this.sunk = true; console.log(`${this.name} sunk!`); // Optionally change mesh appearance when sunk if (this.mesh) { this.mesh.material.color.setHex(0x550000); // Dark red when sunk this.mesh.material.emissive.setHex(0x330000); } } else { // Optional: Indicate hit on the mesh (e.g., slight color change) if (this.mesh) { // Could add decals or change material slightly per hit later } } } isSunk() { return this.sunk; } } import * as THREE from 'three'; export class Player { constructor(name, grid) { this.name = name; this.grid = grid; this.ships = []; this.shotsFired = new Set(); // Keep track of coordinates fired at {x,y,z} as strings } placeShip(ship, startCoords, orientation) { if (!this.grid.isValidPlacement(ship.length, startCoords, orientation, this.ships)) { console.error(`Player ${this.name}: Invalid placement for ${ship.name}`); return false; } // Create the ship mesh and add it to the grid group const shipMesh = ship.createMesh(startCoords, orientation, this.grid.position); this.grid.add(shipMesh); // Add ship mesh as child of the grid // Mark grid cells as occupied by the ship for (let i = 0; i < ship.length; i++) { const coords = { ...startCoords }; if (orientation === 'x') coords.x += i; else if (orientation === 'y') coords.y += i; else if (orientation === 'z') coords.z += i; this.grid.setCellState(coords, 1, ship); // 1 = occupied by ship } this.ships.push(ship); console.log(`Player ${this.name}: Placed ${ship.name} of length ${ship.length}`); return true; } receiveAttack(coords) { const cellState = this.grid.getCellState(coords); let result = 'miss'; // 'miss', 'hit', 'sunk', 'already_fired' const coordString = `${coords.x},${coords.y},${coords.z}`; // Check if this cell was already targeted if (cellState === 2 || cellState === 3) { console.log(`${this.name}'s grid at ${coordString} already targeted.`); return 'already_fired'; } if (cellState === 1) { // It's a hit! const ship = this.grid.cells[coords.x][coords.y][coords.z].ship; this.grid.markCell(coords, true); // Mark as hit result = 'hit'; if (ship && ship.isSunk()) { result = 'sunk'; console.log(`${this.name}'s ${ship.name} was sunk!`); } else { console.log(`${this.name}'s ${ship.name} was hit!`); } } else { // It's a miss this.grid.markCell(coords, false); // Mark as miss result = 'miss'; console.log(`Attack on ${this.name}'s grid at ${coordString} missed.`); } return result; } hasLost() { return this.ships.every(ship => ship.isSunk()); } reset() { this.ships.forEach(ship => { if (ship.mesh) { this.grid.remove(ship.mesh); // Remove mesh from grid group ship.mesh.geometry.dispose(); if (ship.mesh.material instanceof Array) { ship.mesh.material.forEach(m => m.dispose()); } else { ship.mesh.material.dispose(); } } }); this.ships = []; this.grid.reset(); // Reset grid cells and markers this.shotsFired.clear(); } } import { Player } from './Player.js'; import { Ship } from './Ship.js'; export class AI extends Player { constructor(name, grid) { super(name, grid); this.possibleMoves = this.generatePossibleMoves(); this.lastHit = null; // Store coords of last successful hit this.huntTarget = null; // Store coords of the ship being hunted this.huntDirection = null; // Store direction AI is checking around a hit this.potentialTargets = []; // Store adjacent cells after a hit } generatePossibleMoves() { const moves = []; const size = this.grid.gridSize; for (let x = 0; x < size; x++) { for (let y = 0; y < size; y++) { for (let z = 0; z < size; z++) { moves.push({ x, y, z }); } } } // Shuffle moves for randomness for (let i = moves.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [moves[i], moves[j]] = [moves[j], moves[i]]; } return moves; } placeShipsRandomly(shipTypes) { console.log(`${this.name} placing ships...`); const orientations = ['x', 'y', 'z']; shipTypes.forEach(shipData => { let placed = false; let attempts = 0; const maxAttempts = 200; // Prevent infinite loops while (!placed && attempts < maxAttempts) { attempts++; const orientation = orientations[Math.floor(Math.random() * orientations.length)]; const startCoords = { x: Math.floor(Math.random() * this.grid.gridSize), y: Math.floor(Math.random() * this.grid.gridSize), z: Math.floor(Math.random() * this.grid.gridSize), }; const ship = new Ship(shipData.name, shipData.length); placed = this.placeShip(ship, startCoords, orientation); } if (!placed) { console.error(`AI failed to place ${shipData.name} after ${maxAttempts} attempts.`); // Handle failure - maybe try simpler placement or throw error } }); console.log(`${this.name} finished placing ships.`); } chooseTarget() { // Simple AI: Randomly choose from remaining possible moves if (this.possibleMoves.length === 0) { console.error("AI has no more moves!"); return null; // Should not happen in a standard game } // TODO: Implement smarter AI (hunt/target mode) later // For now, just pick a random remaining coordinate const moveIndex = Math.floor(Math.random() * this.possibleMoves.length); // const targetCoords = this.possibleMoves[moveIndex]; // Don't remove yet, just pick // More robust: ensure the selected move hasn't somehow been fired at already let targetCoords; let attempts = 0; do { targetCoords = this.possibleMoves[Math.floor(Math.random() * this.possibleMoves.length)]; attempts++; } while (this.grid.getCellState(targetCoords) >= 2 && attempts < this.possibleMoves.length * 2) // State 2=hit, 3=miss if (this.grid.getCellState(targetCoords) >= 2) { console.warn("AI couldn't find a valid unfired cell, picking first available."); targetCoords = this.possibleMoves[0]; // Fallback } console.log(`${this.name} chooses target: ${JSON.stringify(targetCoords)}`); return targetCoords; } // Call this after the AI's shot result is known updatePossibleMoves(coords, result) { // Remove the fired coordinate from possible moves const index = this.possibleMoves.findIndex(move => move.x === coords.x && move.y === coords.y && move.z === coords.z ); if (index > -1) { this.possibleMoves.splice(index, 1); } else { // This might happen if the AI logic somehow chose a coord not in possibleMoves console.warn(`AI fired at ${JSON.stringify(coords)}, which was not found in possibleMoves.`); } // Basic Hunt/Target logic placeholder: if (result === 'hit') { this.lastHit = coords; // TODO: Add adjacent cells to potentialTargets } else if (result === 'sunk') { this.lastHit = null; // Reset hunt mode this.potentialTargets = []; } else if (result === 'miss' && this.lastHit) { // TODO: Refine hunt direction or switch back to random if hunt fails } } reset() { super.reset(); // Call Player's reset this.possibleMoves = this.generatePossibleMoves(); this.lastHit = null; this.huntTarget = null; this.huntDirection = null; this.potentialTargets = []; } } export class GameManager { constructor(player1, player2) { this.player1 = player1; // Human player this.player2 = player2; // AI or second player this.currentPlayer = player1; // Player 1 starts this.gameOver = false; this.winner = null; this.gameState = 'placement'; // 'placement', 'battle', 'gameover' this.aiTurnDelay = 1000; // Delay in ms for AI turn this.aiTurnTimeout = null; this.infoElement = document.getElementById('info'); // Cache info element } switchTurn() { if (this.gameOver) return; this.currentPlayer = (this.currentPlayer === this.player1) ? this.player2 : this.player1; this.updateInfo(`${this.currentPlayer.name}'s Turn`); console.log(`Turn switched to ${this.currentPlayer.name}`); if (this.currentPlayer === this.player2 && this.player2.constructor.name === 'AI') { // If it's AI's turn, schedule the move this.scheduleAITurn(); } } scheduleAITurn() { if (this.aiTurnTimeout) clearTimeout(this.aiTurnTimeout); // Clear previous timeout if any this.aiTurnTimeout = setTimeout(() => { if (!this.gameOver) { this.handleAITurn(); } }, this.aiTurnDelay); } handlePlayerTurn(targetCoords) { if (this.gameOver || this.currentPlayer !== this.player1) { console.log("Not player's turn or game over."); return; } const opponent = this.player2; const result = opponent.receiveAttack(targetCoords); if (result === 'already_fired') { this.updateInfo("Cell already targeted. Try again."); // Don't switch turn if already fired upon return; } this.checkGameOver(opponent); if (!this.gameOver) { this.switchTurn(); } } handleAITurn() { if (this.gameOver || this.currentPlayer !== this.player2) { console.log("Not AI's turn or game over."); return; } const targetCoords = this.player2.chooseTarget(); // AI chooses where to fire if (!targetCoords) { console.error("AI failed to choose a target."); this.switchTurn(); // Switch back if AI fails return; } const opponent = this.player1; const result = opponent.receiveAttack(targetCoords); // AI needs to know the result to update its strategy if (typeof this.player2.updatePossibleMoves === 'function') { this.player2.updatePossibleMoves(targetCoords, result); } this.checkGameOver(opponent); if (!this.gameOver) { this.switchTurn(); } } checkGameOver(attackedPlayer) { if (attackedPlayer.hasLost()) { this.gameOver = true; this.winner = this.currentPlayer; this.gameState = 'gameover'; this.updateInfo(`Game Over! ${this.winner.name} wins!`); console.log(`Game Over! ${this.winner.name} wins!`); if (this.aiTurnTimeout) clearTimeout(this.aiTurnTimeout); // Stop AI if game ends } } startGame() { if (this.player1.ships.length === 0) { this.updateInfo("Player 1 must place ships first!"); return; } // Assume AI places ships instantly for now, or add placement logic here if (this.player2.constructor.name === 'AI' && typeof this.player2.placeShipsRandomly === 'function') { // TODO: Get ship types properly // this.player2.placeShipsRandomly(Object.values(shipTypes)); } this.gameState = 'battle'; this.currentPlayer = this.player1; // Ensure player 1 starts battle phase this.updateInfo(`${this.currentPlayer.name}'s Turn`); console.log("Game Started - Battle Phase"); } updateInfo(message) { if (this.infoElement) { this.infoElement.textContent = message; } } // Optional: Add a game loop update for timed events if needed update() { // Currently handles AI turn delay via setTimeout, // but could be used for animations or other time-based logic. } resetGame() { this.player1.reset(); this.player2.reset(); this.currentPlayer = this.player1; this.gameOver = false; this.winner = null; this.gameState = 'placement'; // Reset to placement phase if (this.aiTurnTimeout) clearTimeout(this.aiTurnTimeout); this.updateInfo("Game Reset. Place Your Ships."); // TODO: Reset UI elements (show placement controls, hide opponent grid etc.) } } // Placeholder for Heads-Up Display logic (e.g., showing remaining ships) // This might be integrated directly into main.js or index.html for simplicity initially. export function updateHUD(player, opponent) { // Example: Update lists of remaining ships // const playerShipsElement = document.getElementById('player-ships'); // const opponentShipsElement = document.getElementById('opponent-ships'); // playerShipsElement.innerHTML = 'Your Ships: ' + player.ships.filter(s => !s.isSunk()).map(s => s.name).join(', '); // opponentShipsElement.innerHTML = 'Opponent Ships: ' + opponent.ships.filter(s => !s.isSunk()).length + ' remaining'; console.log("Updating HUD (placeholder)"); } // Placeholder for scoreboard logic // This might be integrated directly into main.js or index.html for simplicity initially. export function updateScoreboard(player1Score, player2Score) { // const scoreElement = document.getElementById('scoreboard'); // scoreElement.textContent = `Score: Player 1 (${player1Score}) - Player 2 (${player2Score})`; console.log("Updating Scoreboard (placeholder)"); } This sets up the core structure: 1. **`index.html`**: Basic HTML, CSS for layout, import map for Three.js, and simple UI controls for ship placement. 2. **`src/main.js`**: Initializes Three.js scene, camera, renderer, lights, controls. Creates instances of `Grid`, `Player`, `AI`, and `GameManager`. Sets up raycasting for grid interaction and basic ship placement logic using the UI. 3. **`src/components/Grid.js`**: Defines the `Grid` class responsible for creating the 3D grid visualization, managing cell states, converting coordinates, and handling hit/miss markers with simple explosion effects. 4. **`src/components/Ship.js`**: Defines the `Ship` class, holding ship properties (length, hits) and creating its visual mesh. 5. **`src/components/Player.js`**: Defines the base `Player` class, managing ships, placement logic, and processing attacks on its grid. 6. **`src/components/AI.js`**: Extends `Player` to create an AI opponent with random ship placement and basic random targeting logic. 7. **`src/components/GameManager.js`**: Manages game flow, turns, win conditions, and communication between players. Includes logic for handling player and AI turns with a delay. 8. **`src/ui/`**: Placeholder files for potential future UI modules. Next steps would involve: * Refining the ship placement interaction (e.g., visual feedback for invalid placement). * Implementing the AI's targeting logic more thoroughly (hunt/target modes). * Adding more detailed visual feedback (better explosions, ship hit indicators). * Integrating the HUD/Scoreboard placeholders with actual UI elements. * Adding sound effects.