AIDemo1

Running

App Files Files Community

AIDemo1 / index.html

awacke1

Update index.html

3b226b3 verified 9 months ago

raw

history blame contribute delete

26.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Yar's Revenge 3D: Brick Assault</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	<style>
	body { margin: 0; overflow: hidden; font-family: 'Arial', sans-serif; background-color: #000; color: #fff; }
	canvas { display: block; }
	#infoPanel {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 10px;
	background-color: rgba(0,0,0,0.7);
	border-radius: 8px;
	color: #fff;
	font-size: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	}
	.player-info {
	padding: 5px;
	border-radius: 4px;
	}
	.player1 { background-color: rgba(0, 150, 255, 0.5); }
	.player2 { background-color: rgba(255, 100, 0, 0.5); }
	#gameOverScreen {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 30px;
	background-color: rgba(20, 20, 20, 0.9);
	border: 2px solid #555;
	border-radius: 15px;
	text-align: center;
	display: none; /* Hidden by default */
	z-index: 100;
	}
	#gameOverScreen h2 { margin-top: 0; font-size: 28px; color: #ff4444; }
	#gameOverScreen p { font-size: 18px; }
	#gameOverScreen button {
	padding: 12px 25px;
	font-size: 18px;
	color: #fff;
	background-color: #007bff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	margin-top: 20px;
	transition: background-color 0.3s ease;
	}
	#gameOverScreen button:hover { background-color: #0056b3; }
	</style>
	</head>
	<body>
	<div id="infoPanel">
	<div id="player1Info" class="player-info player1">Player 1 (WASD, E): Score 0 \| Lives 3</div>
	<div id="player2Info" class="player-info player2">Player 2 (IJKL, U): Score 0 \| Lives 3</div>
	<div id="qotileInfo">Qotile Health: 100</div>
	</div>

	<div id="gameOverScreen">
	<h2>Game Over!</h2>
	<p id="gameOverMessage"></p>
	<button id="restartButton">Restart Game</button>
	</div>

	<script>
	let scene, camera, renderer, clock;
	let players = [];
	let playerProjectiles = [];
	let advancingBricks = []; // Renamed from neutralZoneBlocks
	let qotile;

	const keysPressed = {};
	const gameSettings = {
	playerSpeed: 10,
	projectileSpeed: 30,
	playerSize: 1,
	projectileSize: 0.2,
	brickSize: 2, // Size of individual bricks
	brickDepth: 1, // Thickness of bricks (Z-dimension)
	qotileSize: 4,
	playAreaWidth: 30,
	playAreaHeight: 20,
	playerShootCooldown: 0.2,
	initialPlayerLives: 3,
	qotileInitialHealth: 100,
	pointsPerBrick: 10, // Renamed from pointsPerNeutralBlock
	pointsPerQotileHit: 50,
	brickLayerSpeed: 1.5, // How fast layers move towards player
	newLayerSpawnInterval: 5.0, // Seconds between new layers
	brickSpawnStartZ: -12, // Z-position where new brick layers spawn (behind Qotile or far back)
	initialBrickLayers: 3, // Number of layers to start with
	rowsPerLayer: 5, // Bricks vertically in a layer
	colsPerLayer: 10, // Bricks horizontally in a layer
	gapBetweenInitialLayers: 2.5, // Z-gap for initial setup
	playerInvincibilityDuration: 1.5, // seconds
	};
	let gameActive = true;
	let newLayerTimer = 0;

	// Initialization function
	function init() {
	gameActive = true;
	newLayerTimer = 0;
	scene = new THREE.Scene();
	scene.background = new THREE.Color(0x111122);

	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 5, 25);
	camera.lookAt(0, 0, 0);

	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	const ambientLight = new THREE.AmbientLight(0x606060);
	scene.add(ambientLight);
	const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
	directionalLight.position.set(5, 10, 7.5);
	scene.add(directionalLight);

	clock = new THREE.Clock();

	createPlayers();
	createInitialBrickLayers(); // New function to set up starting bricks
	createQotile();

	document.addEventListener('keydown', onKeyDown);
	document.addEventListener('keyup', onKeyUp);
	window.addEventListener('resize', onWindowResize);
	document.getElementById('restartButton').addEventListener('click', restartGame);

	document.getElementById('gameOverScreen').style.display = 'none';
	updateUI();
	animate();
	}

	function createPlayers() {
	players = [];
	playerProjectiles = [];

	const playerGeometry = new THREE.BoxGeometry(gameSettings.playerSize, gameSettings.playerSize, gameSettings.playerSize);

	const player1Material = new THREE.MeshStandardMaterial({ color: 0x0099ff });
	const player1Mesh = new THREE.Mesh(playerGeometry, player1Material);
	player1Mesh.position.set(-gameSettings.playAreaWidth / 4, 0, 15); // Player Z position
	scene.add(player1Mesh);
	players.push({
	mesh: player1Mesh,
	isPlayer2: false,
	controls: { up: 'KeyW', down: 'KeyS', left: 'KeyA', right: 'KeyD', shoot: 'KeyE' },
	shootCooldownTimer: 0,
	score: 0,
	lives: gameSettings.initialPlayerLives,
	projectiles: [],
	invincibleTimer: 0,
	originalColor: player1Material.color.getHex()
	});

	const player2Material = new THREE.MeshStandardMaterial({ color: 0xff6600 });
	const player2Mesh = new THREE.Mesh(playerGeometry, player2Material);
	player2Mesh.position.set(gameSettings.playAreaWidth / 4, 0, 15); // Player Z position
	scene.add(player2Mesh);
	players.push({
	mesh: player2Mesh,
	isPlayer2: true,
	controls: { up: 'KeyI', down: 'KeyK', left: 'KeyJ', right: 'KeyL', shoot: 'KeyU' },
	shootCooldownTimer: 0,
	score: 0,
	lives: gameSettings.initialPlayerLives,
	projectiles: [],
	invincibleTimer: 0,
	originalColor: player2Material.color.getHex()
	});
	}

	// Creates the initial set of brick layers at the start of the game
	function createInitialBrickLayers() {
	advancingBricks.forEach(brick => {
	if (brick && scene.getObjectById(brick.id)) scene.remove(brick);
	if (brick && brick.geometry) brick.geometry.dispose();
	if (brick && brick.material) brick.material.dispose();
	});
	advancingBricks = [];
	for (let i = 0; i < gameSettings.initialBrickLayers; i++) {
	// Stagger initial layers further back
	const spawnZ = gameSettings.brickSpawnStartZ - (i * gameSettings.gapBetweenInitialLayers);
	spawnNewBrickLayer(spawnZ);
	}
	}

	// Spawns a single new layer of bricks at a given Z depth
	function spawnNewBrickLayer(spawnZ) {
	const brickGeometry = new THREE.BoxGeometry(
	gameSettings.brickSize,
	gameSettings.brickSize,
	gameSettings.brickDepth
	);
	// Give bricks varied, but generally dull/rocky colors
	const colors = [0x888888, 0x777777, 0x666666, 0x807060, 0x706050];

	const layerWidth = gameSettings.colsPerLayer * gameSettings.brickSize;
	const layerHeight = gameSettings.rowsPerLayer * gameSettings.brickSize;

	for (let r = 0; r < gameSettings.rowsPerLayer; r++) {
	for (let c = 0; c < gameSettings.colsPerLayer; c++) {
	const randomColor = colors[Math.floor(Math.random() * colors.length)];
	const brickMaterial = new THREE.MeshStandardMaterial({
	color: randomColor,
	roughness: 0.8,
	metalness: 0.2
	});
	const brick = new THREE.Mesh(brickGeometry.clone(), brickMaterial.clone());

	brick.position.set(
	(c - gameSettings.colsPerLayer / 2 + 0.5) * gameSettings.brickSize,
	(r - gameSettings.rowsPerLayer / 2 + 0.5) * gameSettings.brickSize,
	spawnZ
	);
	brick.userData = { type: 'brick' }; // Identify object type
	scene.add(brick);
	advancingBricks.push(brick);
	}
	}
	}

	function createQotile() {
	if (qotile && qotile.mesh) {
	if (scene.getObjectById(qotile.mesh.id)) scene.remove(qotile.mesh);
	if (qotile.mesh.geometry) qotile.mesh.geometry.dispose();
	if (qotile.mesh.material) qotile.mesh.material.dispose();
	}

	const qotileGeometry = new THREE.BoxGeometry(gameSettings.qotileSize, gameSettings.qotileSize, gameSettings.qotileSize);
	const qotileMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0x330000 });
	const qotileMesh = new THREE.Mesh(qotileGeometry, qotileMaterial);
	qotileMesh.position.set(0, 0, -15); // Qotile is further back
	scene.add(qotileMesh);
	qotile = {
	mesh: qotileMesh,
	health: gameSettings.qotileInitialHealth,
	hitTimer: 0
	};
	}

	function handlePlayerMovement(player, delta) {
	if (!player.mesh.visible) return; // Cannot move if not visible (e.g. after losing life briefly)
	const moveDistance = gameSettings.playerSpeed * delta;
	if (keysPressed[player.controls.up]) player.mesh.position.y += moveDistance;
	if (keysPressed[player.controls.down]) player.mesh.position.y -= moveDistance;
	if (keysPressed[player.controls.left]) player.mesh.position.x -= moveDistance;
	if (keysPressed[player.controls.right]) player.mesh.position.x += moveDistance;

	const halfWidth = gameSettings.playAreaWidth / 2 - gameSettings.playerSize / 2;
	const halfHeight = gameSettings.playAreaHeight / 2 - gameSettings.playerSize / 2;
	player.mesh.position.x = Math.max(-halfWidth, Math.min(halfWidth, player.mesh.position.x));
	player.mesh.position.y = Math.max(-halfHeight, Math.min(halfHeight, player.mesh.position.y));
	}

	function updatePlayerInvincibility(player, delta) {
	if (player.invincibleTimer > 0) {
	player.invincibleTimer -= delta;
	// Blink effect
	const blinkSpeed = 10; // Blinks per second
	player.mesh.visible = Math.floor(player.invincibleTimer * blinkSpeed) % 2 === 0;
	if (player.invincibleTimer <= 0) {
	player.mesh.visible = true; // Ensure visible
	player.mesh.material.color.setHex(player.originalColor); // Restore color
	player.invincibleTimer = 0; // Clamp to zero
	}
	} else {
	if(player.lives > 0) player.mesh.visible = true; // Ensure player is visible if they have lives
	}
	}


	function handlePlayerShooting(player, delta) {
	if (!player.mesh.visible) return;
	if (player.shootCooldownTimer > 0) {
	player.shootCooldownTimer -= delta;
	}
	if (keysPressed[player.controls.shoot] && player.shootCooldownTimer <= 0) {
	player.shootCooldownTimer = gameSettings.playerShootCooldown;
	createProjectile(player);
	}
	}

	function createProjectile(player) {
	const projectileGeometry = new THREE.SphereGeometry(gameSettings.projectileSize, 8, 8);
	const projectileMaterial = new THREE.MeshBasicMaterial({ color: player.isPlayer2 ? 0xffaa33 : 0x66ccff });
	const projectile = new THREE.Mesh(projectileGeometry, projectileMaterial);

	projectile.position.copy(player.mesh.position);
	projectile.position.z -= gameSettings.playerSize / 2 + gameSettings.projectileSize;

	projectile.userData = {
	owner: player,
	velocity: new THREE.Vector3(0, 0, -gameSettings.projectileSpeed)
	};

	scene.add(projectile);
	playerProjectiles.push(projectile);
	}

	function updateProjectiles(delta) {
	for (let i = playerProjectiles.length - 1; i >= 0; i--) {
	const projectile = playerProjectiles[i];
	if (!projectile \|\| !projectile.userData) {
	if (projectile && scene.getObjectById(projectile.id)) scene.remove(projectile);
	playerProjectiles.splice(i, 1);
	continue;
	}
	projectile.position.addScaledVector(projectile.userData.velocity, delta);

	if (projectile.position.z < -gameSettings.playAreaWidth \|\| projectile.position.z > gameSettings.playAreaWidth * 2 \|\| // Extended bounds
	Math.abs(projectile.position.x) > gameSettings.playAreaWidth \|\|
	Math.abs(projectile.position.y) > gameSettings.playAreaHeight) {
	scene.remove(projectile);
	if (projectile.geometry) projectile.geometry.dispose();
	if (projectile.material) projectile.material.dispose();
	playerProjectiles.splice(i, 1);
	continue;
	}
	checkProjectileCollisions(projectile, i);
	}
	}

	function checkProjectileCollisions(projectile, projectileIndex) {
	if (!projectile \|\| !projectile.userData \|\| !projectile.userData.owner) {
	if (projectile && scene.getObjectById(projectile.id)) scene.remove(projectile);
	if(playerProjectiles[projectileIndex] === projectile) playerProjectiles.splice(projectileIndex, 1);
	return;
	}
	const projectileBox = new THREE.Box3().setFromObject(projectile);

	// Collision with Advancing Bricks
	for (let j = advancingBricks.length - 1; j >= 0; j--) {
	const brick = advancingBricks[j];
	if (!brick \|\| !brick.geometry) continue; // Skip if brick already removed or invalid
	const brickBox = new THREE.Box3().setFromObject(brick);
	if (projectileBox.intersectsBox(brickBox)) {
	scene.remove(brick); // Remove brick from scene
	if (brick.geometry) brick.geometry.dispose();
	if (brick.material) brick.material.dispose();
	advancingBricks.splice(j, 1); // Remove brick from array

	scene.remove(projectile); // Remove projectile from scene
	if (projectile.geometry) projectile.geometry.dispose();
	if (projectile.material) projectile.material.dispose();
	playerProjectiles.splice(projectileIndex, 1); // Remove projectile from array

	projectile.userData.owner.score += gameSettings.pointsPerBrick;
	updateUI();
	return; // Projectile is gone, stop further checks for it
	}
	}

	// Collision with Qotile
	if (qotile && qotile.mesh && qotile.health > 0) {
	const qotileBox = new THREE.Box3().setFromObject(qotile.mesh);
	if (projectileBox.intersectsBox(qotileBox)) {
	scene.remove(projectile);
	if (projectile.geometry) projectile.geometry.dispose();
	if (projectile.material) projectile.material.dispose();
	playerProjectiles.splice(projectileIndex, 1);

	qotile.health -= 10;
	qotile.mesh.material.emissive.setHex(0xffffff);
	qotile.hitTimer = 0.1;
	projectile.userData.owner.score += gameSettings.pointsPerQotileHit;
	updateUI();

	if (qotile.health <= 0) {
	const winnerName = projectile.userData.owner.isPlayer2 ? "Player 2" : "Player 1";
	endGame(winnerName + " destroyed the Qotile! Players win!");
	}
	return;
	}
	}
	}

	// Moves bricks and checks for collisions with players
	function updateBricks(delta) {
	for (let i = advancingBricks.length - 1; i >= 0; i--) {
	const brick = advancingBricks[i];
	if (!brick \|\| !brick.geometry) { // Safety check / already removed
	advancingBricks.splice(i,1);
	continue;
	}

	brick.position.z += gameSettings.brickLayerSpeed * delta;

	// Brick is past the player's general Z plane - remove it
	// Player Z is 15. Brick depth is 1. Player Size is 1.
	// If brick's front (brick.position.z - brickDepth/2) is > player's back (15 + playerSize/2)
	if (brick.position.z - gameSettings.brickDepth / 2 > players[0].mesh.position.z + gameSettings.playerSize / 2 + 2) { // Added buffer
	scene.remove(brick);
	if (brick.geometry) brick.geometry.dispose();
	if (brick.material) brick.material.dispose();
	advancingBricks.splice(i, 1);
	// console.log("Brick passed player zone and removed");
	continue;
	}

	// Check collision with players
	const brickBox = new THREE.Box3().setFromObject(brick);
	for (const player of players) {
	if (player.lives <= 0 \|\| !player.mesh.visible \|\| player.invincibleTimer > 0) continue;

	const playerBox = new THREE.Box3().setFromObject(player.mesh);
	if (brickBox.intersectsBox(playerBox)) {
	player.lives--;
	player.invincibleTimer = gameSettings.playerInvincibilityDuration;
	player.mesh.material.color.setHex(0xff3333); // Flash red

	// Destroy the brick that hit the player
	scene.remove(brick);
	if (brick.geometry) brick.geometry.dispose();
	if (brick.material) brick.material.dispose();
	advancingBricks.splice(i, 1);

	updateUI();
	if (player.lives <= 0) {
	player.mesh.visible = false; // Hide player mesh when out of lives
	}
	checkOverallGameOver();
	break; // Brick is gone, stop checking it against other players
	}
	}
	}
	}


	function updateQotile(delta) {
	if (qotile && qotile.hitTimer > 0) {
	qotile.hitTimer -= delta;
	if (qotile.hitTimer <= 0) {
	qotile.mesh.material.emissive.setHex(0x330000);
	}
	}
	}

	function updateUI() {
	const p1 = players && players[0] ? players[0] : { score: 0, lives: 0 };
	const p2 = players && players[1] ? players[1] : { score: 0, lives: 0 };

	document.getElementById('player1Info').textContent = `Player 1 (WASD, E): Score ${p1.score} \| Lives ${p1.lives}`;
	document.getElementById('player2Info').textContent = `Player 2 (IJKL, U): Score ${p2.score} \| Lives ${p2.lives}`;

	if (qotile) {
	document.getElementById('qotileInfo').textContent = `Qotile Health: ${Math.max(0, qotile.health)}`;
	} else {
	document.getElementById('qotileInfo').textContent = `Qotile Health: N/A`;
	}
	}

	function checkOverallGameOver() {
	if (!gameActive) return;
	const activePlayers = players.filter(p => p.lives > 0).length;
	if (activePlayers === 0) {
	endGame("All players are out of lives! Game Over.");
	}
	}

	function endGame(message) {
	if (!gameActive) return;
	gameActive = false;
	console.log("Game Over:", message);
	document.getElementById('gameOverMessage').textContent = message;
	document.getElementById('gameOverScreen').style.display = 'flex';

	// Clear remaining projectiles (bricks are cleared by their own logic or restart)
	playerProjectiles.forEach(p => {
	if (p && scene.getObjectById(p.id)) scene.remove(p);
	if (p && p.geometry) p.geometry.dispose();
	if (p && p.material) p.material.dispose();
	});
	playerProjectiles = [];
	}

	function restartGame() {
	// Clean up existing meshes from scene
	players.forEach(p => {
	if (p.mesh && scene.getObjectById(p.mesh.id)) scene.remove(p.mesh);
	if (p.mesh && p.mesh.geometry) p.mesh.geometry.dispose();
	if (p.mesh && p.mesh.material) p.mesh.material.dispose();
	});
	playerProjectiles.forEach(p => {
	if (p && scene.getObjectById(p.id)) scene.remove(p);
	if (p && p.geometry) p.geometry.dispose();
	if (p && p.material) p.material.dispose();
	});
	advancingBricks.forEach(b => {
	if (b && scene.getObjectById(b.id)) scene.remove(b);
	if (b && b.geometry) b.geometry.dispose();
	if (b && b.material) b.material.dispose();
	});
	if (qotile && qotile.mesh) {
	if (scene.getObjectById(qotile.mesh.id)) scene.remove(qotile.mesh);
	if (qotile.mesh.geometry) qotile.mesh.geometry.dispose();
	if (qotile.mesh.material) qotile.mesh.material.dispose();
	}

	// Reset arrays
	players = [];
	playerProjectiles = [];
	advancingBricks = [];
	qotile = null;

	// Re-initialize game elements
	createPlayers(); // This will reset player scores, lives, positions, visibility
	createInitialBrickLayers();
	createQotile();

	// Reset game state variables
	gameActive = true;
	newLayerTimer = 0;
	players.forEach(p => { // Ensure players are visible and not invincible
	p.mesh.visible = true;
	p.invincibleTimer = 0;
	p.mesh.material.color.setHex(p.originalColor);
	});


	document.getElementById('gameOverScreen').style.display = 'none';
	updateUI();
	}

	function animate() {
	requestAnimationFrame(animate);
	const delta = clock.getDelta();

	if (gameActive) {
	players.forEach(player => {
	if (player.mesh && player.lives > 0) {
	handlePlayerMovement(player, delta);
	handlePlayerShooting(player, delta);
	}
	// Invincibility update happens regardless of player input if timer is active
	updatePlayerInvincibility(player, delta);
	});

	updateProjectiles(delta);
	updateBricks(delta); // Handles brick movement and collision with players
	updateQotile(delta);

	// Spawn new brick layers
	newLayerTimer += delta;
	if (newLayerTimer >= gameSettings.newLayerSpawnInterval) {
	spawnNewBrickLayer(gameSettings.brickSpawnStartZ);
	newLayerTimer = 0;
	}
	}

	updateUI();
	renderer.render(scene, camera);
	}

	function onKeyDown(event) {
	keysPressed[event.code] = true;
	const gameKeys = ['KeyW', 'KeyA', 'KeyS', 'KeyD', 'KeyI', 'KeyJ', 'KeyK', 'KeyL', 'KeyE', 'KeyU', 'Space'];
	if (gameKeys.includes(event.code)) {
	event.preventDefault();
	}
	}
	function onKeyUp(event) {
	keysPressed[event.code] = false;
	}
	function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	}

	window.onload = function() {
	init();
	};
	</script>
	</body>
	</html>