LiteChat Race Result
Here's a colorful 3D-style scroll shooter with bonus drops, implemented using Three.js:
```runjs
// Main game module
(async () => {
try {
// Load Three.js modules
const { THREE, OrbitControls } = await litechat.utils.loadModules([
{
url: 'https://unpkg.com/three@0.170.0/build/three.module.js',
name: 'THREE',
globalKey: 'THREE',
importMap: {
"three": "https://unpkg.com/three@0.170.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.170.0/examples/jsm/"
}
},
{
url: 'https://unpkg.com/three@0.170.0/examples/jsm/controls/OrbitControls.js',
name: 'OrbitControls',
globalKey: 'OrbitControls',
dependencies: ['THREE']
}
]);
// Clear previous content
litechat.target.replaceChildren();
// Game constants
const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;
const PLAYER_SPEED = 0.2;
const BASE_FIRE_RATE = 500; // ms between shots
const ENEMY_SPAWN_RATE = 1000; // ms
const BONUS_DROP_CHANCE = 0.2; // 20% chance
// Game state
let gameState = {
score: 0,
lives: 3,
fireRate: BASE_FIRE_RATE,
lastShot: 0,
bouncyLevel: 0,
gunLevel: 1,
enemySpeed: 0.05,
activeBonuses: {},
enemies: [],
playerBullets: [],
bonuses: [],
isGameOver: false
};
// Create container for game
const container = document.createElement('div');
container.className = 'relative w-full h-full';
container.style.width = `${GAME_WIDTH}px`;
container.style.height = `${GAME_HEIGHT}px`;
container.style.backgroundColor = '#1a1a2e';
container.style.overflow = 'hidden';
container.style.borderRadius = '0.5rem';
container.style.boxShadow = '0 0 20px rgba(135, 206, 235, 0.3)';
// UI elements
const uiContainer = document.createElement('div');
uiContainer.className = 'absolute top-0 left-0 w-full p-4 flex justify-between items-center';
uiContainer.style.zIndex = '10';
const scoreDisplay = document.createElement('div');
scoreDisplay.className = 'text-white text-lg font-bold';
scoreDisplay.textContent = `Score: ${gameState.score}`;
const livesDisplay = document.createElement('div');
livesDisplay.className = 'text-white text-lg font-bold';
livesDisplay.textContent = `Lives: ${gameState.lives}`;
const bonusDisplay = document.createElement('div');
bonusDisplay.className = 'text-white text-sm';
bonusDisplay.innerHTML = 'Bonuses: <span id="bonusList">None</span>';
uiContainer.appendChild(scoreDisplay);
uiContainer.appendChild(livesDisplay);
uiContainer.appendChild(bonusDisplay);
container.appendChild(uiContainer);
// Create canvas for Three.js
const canvas = document.createElement('canvas');
canvas.width = GAME_WIDTH;
canvas.height = GAME_HEIGHT;
container.appendChild(canvas);
litechat.target.appendChild(container);
// Three.js setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e);
scene.fog = new THREE.Fog(0x1a1a2e, 20, 100);
const camera = new THREE.PerspectiveCamera(
75,
GAME_WIDTH / GAME_HEIGHT,
0.1,
1000
);
camera.position.set(0, 8, 15);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(GAME_WIDTH, GAME_HEIGHT);
renderer.shadowMap.enabled = true;
// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const sunLight = new THREE.DirectionalLight(0xffddaa, 1);
sunLight.position.set(10, 20, 15);
sunLight.castShadow = true;
scene.add(sunLight);
// Stars background
const starsGeometry = new THREE.BufferGeometry();
const starsMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 0.1,
transparent: true,
opacity: 0.8
});
const starsVertices = [];
for (let i = 0; i < 1000; i++) {
starsVertices.push(
(Math.random() - 0.5) * 200,
(Math.random() - 0.5) * 200,
(Math.random() - 0.5) * 200
);
}
starsGeometry.setAttribute(
'position',
new THREE.Float32BufferAttribute(starsVertices, 3)
);
const stars = new THREE.Points(starsGeometry, starsMaterial);
scene.add(stars);
// Player ship
const playerGeometry = new THREE.ConeGeometry(0.8, 2, 8);
const playerMaterial = new THREE.MeshPhongMaterial({
color: 0x4deeea,
emissive: 0x0a3a5f,
shininess: 100
});
const player = new THREE.Mesh(playerGeometry, playerMaterial);
player.position.y = -4;
player.rotation.x = Math.PI;
player.castShadow = true;
scene.add(player);
// Game objects arrays
const enemies = [];
const bullets = [];
const bonuses = [];
// Create an enemy
function createEnemy() {
const colors = [
0xff6b6b, 0xffd166, 0x06d6a0,
0x118ab2, 0xef476f, 0xffd166
];
const geometry = new THREE.ConeGeometry(0.8, 2, 6);
const material = new THREE.MeshPhongMaterial({
color: colors[Math.floor(Math.random() * colors.length)],
emissive: 0x111111,
shininess: 60
});
const enemy = new THREE.Mesh(geometry, material);
enemy.position.x = (Math.random() - 0.5) * 12;
enemy.position.z = 20;
enemy.rotation.x = Math.PI;
enemy.castShadow = true;
enemy.userData = { health: 1 };
scene.add(enemy);
enemies.push(enemy);
return enemy;
}
// Create bullet
function createBullet() {
const geometry = new THREE.SphereGeometry(0.3, 16, 16);
const material = new THREE.MeshPhongMaterial({
color: 0x4deeea,
emissive: 0x0a3a5f
});
const bullet = new THREE.Mesh(geometry, material);
bullet.position.copy(player.position);
bullet.position.y += 0.5;
bullet.castShadow = true;
bullet.userData = {
bounceCount: gameState.bouncyLevel,
direction: new THREE.Vector3(0, 0, 1)
};
scene.add(bullet);
bullets.push(bullet);
return bullet;
}
// Create bonus
function createBonus(position, type) {
const types = {
fireRate: { color: 0xf72585, symbol: '⚡' },
bouncy: { color: 0x4cc9f0, symbol: '🔵' },
gun: { color: 0x4361ee, symbol: '🔫' },
life: { color: 0x06d6a0, symbol: '❤️' }
};
const geometry = new THREE.IcosahedronGeometry(0.6, 0);
const material = new THREE.MeshPhongMaterial({
color: types[type].color,
emissive: types[type].color,
emissiveIntensity: 0.3
});
const bonus = new THREE.Mesh(geometry, material);
bonus.position.copy(position);
bonus.castShadow = true;
bonus.userData = { type, symbol: types[type].symbol };
scene.add(bonus);
bonuses.push(bonus);
return bonus;
}
// Handle keyboard input
const keys = {};
window.addEventListener('keydown', (e) => {
keys[e.key] = true;
});
window.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
// Handle bonus collection
function collectBonus(bonus) {
const { type } = bonus.userData;
gameState.activeBonuses[type] = (gameState.activeBonuses[type] || 0) + 1;
switch(type) {
case 'fireRate':
gameState.fireRate = BASE_FIRE_RATE * (1 - 0.1 * gameState.activeBonuses[type]);
break;
case 'bouncy':
gameState.bouncyLevel = gameState.activeBonuses[type];
break;
case 'gun':
gameState.gunLevel = Math.min(3, gameState.activeBonuses[type] + 1);
break;
case 'life':
gameState.lives++;
break;
}
// Update UI
const bonusItems = Object.entries(gameState.activeBonuses)
.map(([key, val]) => `${key}: ${val}`)
.join(', ');
document.getElementById('bonusList').textContent = bonusItems || 'None';
// Remove bonus
scene.remove(bonus);
bonuses.splice(bonuses.indexOf(bonus), 1);
}
// Handle collisions
function checkCollisions() {
// Bullet-enemy collisions
for (let i = bullets.length - 1; i >= 0; i--) {
for (let j = enemies.length - 1; j >= 0; j--) {
const bullet = bullets[i];
const enemy = enemies[j];
if (bullet.position.distanceTo(enemy.position) < 1.5) {
scene.remove(enemy);
enemies.splice(j, 1);
// Chance to drop bonus
if (Math.random() < BONUS_DROP_CHANCE) {
const bonusTypes = ['fireRate', 'bouncy', 'gun', 'life'];
const bonusType = bonusTypes[Math.floor(Math.random() * bonusTypes.length)];
createBonus(enemy.position.clone(), bonusType);
}
// Handle bullet bounce
if (bullet.userData.bounceCount > 0) {
bullet.userData.bounceCount--;
bullet.userData.direction.z *= -1;
} else {
scene.remove(bullet);
bullets.splice(i, 1);
}
gameState.score += 100;
scoreDisplay.textContent = `Score: ${gameState.score}`;
break;
}
}
}
// Player-enemy collisions
for (let i = enemies.length - 1; i >= 0; i--) {
if (player.position.distanceTo(enemies[i].position) < 1.8) {
scene.remove(enemies[i]);
enemies.splice(i, 1);
gameState.lives--;
livesDisplay.textContent = `Lives: ${gameState.lives}`;
if (gameState.lives <= 0) {
gameState.isGameOver = true;
}
}
}
// Player-bonus collisions
for (let i = bonuses.length - 1; i >= 0; i--) {
if (player.position.distanceTo(bonuses[i].position) < 1.2) {
collectBonus(bonuses[i]);
}
}
}
// Game loop
let lastSpawn = 0;
function animate(time) {
if (gameState.isGameOver) {
const gameOver = document.createElement('div');
gameOver.className = 'absolute inset-0 flex items-center justify-center text-white text-3xl font-bold';
gameOver.textContent = 'GAME OVER!';
container.appendChild(gameOver);
return;
}
requestAnimationFrame(animate);
// Move player
if (keys['ArrowLeft'] || keys['a']) {
player.position.x = Math.max(-8, player.position.x - PLAYER_SPEED);
}
if (keys['ArrowRight'] || keys['d']) {
player.position.x = Math.min(8, player.position.x + PLAYER_SPEED);
}
if (keys['ArrowUp'] || keys['w']) {
player.position.z = Math.min(0, player.position.z + PLAYER_SPEED);
}
if (keys['ArrowDown'] || keys['s']) {
player.position.z = Math.max(-8, player.position.z - PLAYER_SPEED);
}
// Shooting
if (keys[' '] && time - gameState.lastShot > gameState.fireRate) {
gameState.lastShot = time;
// Create bullets based on gun level
const positions = [
{ x: 0, z: 0 }
];
if (gameState.gunLevel >= 2) {
positions.push({ x: -0.7, z: -0.5 }, { x: 0.7, z: -0.5 });
}
if (gameState.gunLevel >= 3) {
positions.push({ x: -1.2, z: -1 }, { x: 1.2, z: -1 });
}
positions.forEach(pos => {
const bullet = createBullet();
bullet.position.x = player.position.x + pos.x;
bullet.position.z = player.position.z + pos.z;
});
}
// Spawn enemies
if (time - lastSpawn > ENEMY_SPAWN_RATE) {
lastSpawn = time;
createEnemy();
}
// Update enemies
for (let i = enemies.length - 1; i >= 0; i--) {
enemies[i].position.z -= gameState.enemySpeed;
// Remove if out of bounds
if (enemies[i].position.z < -15) {
scene.remove(enemies[i]);
enemies.splice(i, 1);
}
}
// Update bullets
for (let i = bullets.length - 1; i >= 0; i--) {
bullets[i].position.add(bullets[i].userData.direction);
// Remove if out of bounds
if (bullets[i].position.z > 25) {
scene.remove(bullets[i]);
bullets.splice(i, 1);
}
}
// Update bonuses
for (let i = bonuses.length - 1; i >= 0; i--) {
bonuses[i].position.z -= 0.05;
// Add rotation effect
bonuses[i].rotation.x += 0.02;
bonuses[i].rotation.y += 0.03;
// Remove if out of bounds
if (bonuses[i].position.z < -15) {
scene.remove(bonuses[i]);
bonuses.splice(i, 1);
}
}
// Rotate player for visual effect
player.rotation.z = Math.sin(time * 0.005) * 0.2;
// Gradually increase difficulty
gameState.enemySpeed += 0.0001;
checkCollisions();
renderer.render(scene, camera);
}
// Start the game
animate(0);
} catch (error) {
litechat.utils.log('error', 'Game error: ' + error.message);
const errorDiv = document.createElement('div');
errorDiv.className = 'p-4 text-red-500 bg-red-50 rounded-md';
errorDiv.textContent = 'Error: ' + error.message;
litechat.target.appendChild(errorDiv);
}
})();
```
### Game Features:
1. **Player Ship**:
- Move with arrow keys or WASD
- Blue glowing cone ship with smooth rotation
2. **Enemies**:
- Colorful cone-shaped enemies that move toward the player
- Speed increases over time
- Destroyed enemies have 20% chance to drop bonuses
3. **Bonus System**:
- ⚡ Fire Rate: +10% fire speed per bonus
- 🔵 Bouncy: Bullets bounce on enemy hit
- 🔫 Gun: Upgrade weapon (1 → 2 → 3 guns)
- ❤️ Life: Extra life
4. **Visuals**:
- Starry nebula background
- Soft blue lighting
- Smooth shadows and glow effects
- Responsive UI showing score, lives and active bonuses
5. **Controls**:
- Space bar to shoot
- Arrow keys/WASD to move
The game has a cozy space theme with vibrant colors and smooth animations. Difficulty gradually increases as enemies get faster over time. Collect bonuses to enhance your ship's capabilities and survive longer!
Would you like me to explain any part of the implementation in more detail?