Hugging Face's logo

Spaces:
AINPI
/
AIDemo1
Running

App Files Community
AIDemo1 / index.html
awacke1's picture
awacke1
Update index.html
3b226b3 verified
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>