Hugging Face's logo

Spaces:
offerpk3
/
deepdive
Running

App Files Community
deepdive / index.html
offerpk3's picture
offerpk3
Update index.html
c0efcd9 verified
raw
history blame contribute delete
26.3 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deep Sea Jumper</title>
<style>
body {
margin: 0;
padding: 0;
background: linear-gradient(180deg, #87CEEB 0%, #4682B4 50%, #191970 100%);
font-family: 'Arial', sans-serif;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#gameContainer {
position: relative;
width: 400px;
height: 600px;
background: linear-gradient(180deg, #87CEEB 0%, #4682B4 30%, #191970 70%, #000080 100%);
border: 3px solid #2F4F4F;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 30px rgba(0, 100, 200, 0.5);
}
#gameCanvas {
width: 100%;
height: 100%;
display: block;
}
#ui {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 18px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
z-index: 10;
}
#gameOver {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 30px;
border-radius: 15px;
text-align: center;
display: none;
z-index: 20;
}
#startButton, #restartButton {
background: linear-gradient(45deg, #FF6B6B, #FF8E8E);
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 25px;
cursor: pointer;
margin-top: 15px;
transition: all 0.3s ease;
}
#startButton:hover, #restartButton:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}
.bubble {
position: absolute;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
border-radius: 50%;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
#instructions {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
text-align: center;
}
</style>
</head>
<body>
<div id="gameContainer">
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="ui">
<div>Depth: <span id="depth">0</span>m</div>
<div>Score: <span id="score">0</span></div>
</div>
<div id="gameOver">
<h2>Game Over!</h2>
<p>Final Depth: <span id="finalDepth">0</span>m</p>
<p>Final Score: <span id="finalScore">0</span></p>
<button id="restartButton">Dive Again</button>
</div>
<div id="instructions">
Use ARROW KEYS or A/D to move<br>
Space to jump higher
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gameOverDiv = document.getElementById('gameOver');
// Audio context for sound effects
let audioContext;
let sounds = {};
function initAudio() {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
// Create jump sound
sounds.jump = createSound(300, 0.1, 'sine');
sounds.land = createSound(150, 0.15, 'square');
sounds.ambient = createAmbientSound();
}
function createSound(frequency, duration, type = 'sine') {
return function() {
if (!audioContext) return;
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
oscillator.type = type;
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + duration);
};
}
function createAmbientSound() {
return function() {
if (!audioContext) return;
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.setValueAtTime(60, audioContext.currentTime);
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.02, audioContext.currentTime);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.5);
};
}
class Game {
constructor() {
this.player = {
x: 200,
y: 500,
width: 20,
height: 20,
vx: 0,
vy: 0,
onGround: false,
color: '#FF6B6B',
lastJumpTime: 0
};
this.platforms = [];
this.camera = { y: 0 };
this.depth = 0;
this.score = 0;
this.gameRunning = false;
this.keys = {};
this.particles = [];
this.bubbles = [];
this.seaCreatures = [];
this.snake = null;
this.lastCreatureSpawn = 0;
this.gravity = 0.5;
this.jumpPower = -12;
this.moveSpeed = 5;
this.generateInitialPlatforms();
this.setupEventListeners();
}
generateInitialPlatforms() {
// Starting platform
this.platforms.push({
x: 150,
y: 550,
width: 100,
height: 15,
color: '#8FBC8F'
});
// Generate platforms going down
for (let i = 1; i < 50; i++) {
this.platforms.push({
x: Math.random() * (canvas.width - 80),
y: 550 + i * 80,
width: 80 + Math.random() * 40,
height: 12,
color: this.getPlatformColor(i * 80)
});
}
}
getPlatformColor(depth) {
if (depth < 200) return '#8FBC8F'; // Light green
if (depth < 500) return '#20B2AA'; // Light sea green
if (depth < 1000) return '#4682B4'; // Steel blue
if (depth < 1500) return '#483D8B'; // Dark slate blue
return '#2F4F4F'; // Dark slate gray
}
getSeaCreatureType(depth) {
if (depth < 200) return { type: 'fish', color: '#FFD700', size: 15 };
if (depth < 400) return { type: 'jellyfish', color: '#FF69B4', size: 20 };
if (depth < 600) return { type: 'octopus', color: '#8A2BE2', size: 25 };
if (depth < 800) return { type: 'shark', color: '#708090', size: 30 };
if (depth < 1000) return { type: 'whale', color: '#4169E1', size: 40 };
return { type: 'anglerfish', color: '#32CD32', size: 35 };
}
spawnSeaCreature() {
const creatureInfo = this.getSeaCreatureType(this.depth);
const creature = {
x: Math.random() * canvas.width,
y: this.camera.y + Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 3,
vy: (Math.random() - 0.5) * 2,
type: creatureInfo.type,
color: creatureInfo.color,
size: creatureInfo.size,
angle: Math.random() * Math.PI * 2,
life: 300 + Math.random() * 200
};
this.seaCreatures.push(creature);
}
spawnSnake() {
if (this.snake) return; // Only one snake at a time
this.snake = {
x: Math.random() * canvas.width,
y: this.player.y + 200, // Start below player
vx: 0,
vy: 0,
speed: 2.5,
size: 25,
color: '#8B0000',
segments: [],
targetX: this.player.x,
targetY: this.player.y
};
// Create snake segments
for (let i = 0; i < 8; i++) {
this.snake.segments.push({
x: this.snake.x - i * 15,
y: this.snake.y,
angle: 0
});
}
}
setupEventListeners() {
document.addEventListener('keydown', (e) => {
this.keys[e.code] = true;
if (e.code === 'Space') {
e.preventDefault();
if (!this.gameRunning) {
this.start();
}
}
});
document.addEventListener('keyup', (e) => {
this.keys[e.code] = false;
});
document.getElementById('restartButton').addEventListener('click', () => {
this.restart();
});
// Start game on first interaction
canvas.addEventListener('click', () => {
if (!audioContext) {
initAudio();
}
if (!this.gameRunning) {
this.start();
}
});
}
start() {
if (!audioContext) {
initAudio();
}
this.gameRunning = true;
gameOverDiv.style.display = 'none';
this.gameLoop();
}
restart() {
this.player.x = 200;
this.player.y = 500;
this.player.vx = 0;
this.player.vy = 0;
this.player.onGround = false;
this.player.lastJumpTime = 0;
this.camera.y = 0;
this.depth = 0;
this.score = 0;
this.particles = [];
this.bubbles = [];
this.seaCreatures = [];
this.snake = null;
this.lastCreatureSpawn = 0;
this.platforms = [];
this.generateInitialPlatforms();
this.start();
}
update() {
if (!this.gameRunning) return;
// Player movement
if (this.keys['ArrowLeft'] || this.keys['KeyA']) {
this.player.vx = -this.moveSpeed;
}
if (this.keys['ArrowRight'] || this.keys['KeyD']) {
this.player.vx = this.moveSpeed;
}
// Friction
this.player.vx *= 0.8;
// Gravity
this.player.vy += this.gravity;
// Update position
this.player.x += this.player.vx;
this.player.y += this.player.vy;
// Screen wrapping
if (this.player.x < 0) this.player.x = canvas.width;
if (this.player.x > canvas.width) this.player.x = 0;
// Platform collision
this.player.onGround = false;
for (let platform of this.platforms) {
if (this.player.x < platform.x + platform.width &&
this.player.x + this.player.width > platform.x &&
this.player.y < platform.y + platform.height &&
this.player.y + this.player.height > platform.y) {
if (this.player.vy > 0 && this.player.y < platform.y) {
this.player.y = platform.y - this.player.height;
this.player.vy = 0;
this.player.onGround = true;
// Create landing particles
this.createParticles(this.player.x + this.player.width/2, this.player.y + this.player.height);
if (sounds.land) sounds.land();
}
}
}
// Jumping
if ((this.keys['Space'] || this.keys['ArrowUp'] || this.keys['KeyW']) && this.player.onGround) {
this.player.vy = this.jumpPower;
this.player.onGround = false;
this.player.lastJumpTime = Date.now();
if (sounds.jump) sounds.jump();
// Create jump particles
this.createParticles(this.player.x + this.player.width/2, this.player.y + this.player.height);
}
// Spawn sea creatures every few seconds
if (Date.now() - this.lastCreatureSpawn > 2000 + Math.random() * 3000) {
this.spawnSeaCreature();
this.lastCreatureSpawn = Date.now();
}
// Spawn snake every 100 score points
if (this.score > 0 && this.score % 100 === 0 && !this.snake && this.score !== this.lastSnakeSpawn) {
this.spawnSnake();
this.lastSnakeSpawn = this.score;
}
// Update sea creatures
this.seaCreatures = this.seaCreatures.filter(creature => {
creature.x += creature.vx;
creature.y += creature.vy;
creature.angle += 0.05;
// Random direction changes
if (Math.random() < 0.02) {
creature.vx += (Math.random() - 0.5) * 0.5;
creature.vy += (Math.random() - 0.5) * 0.5;
}
// Keep creatures in bounds
if (creature.x < 0 || creature.x > canvas.width) creature.vx *= -1;
creature.life--;
return creature.life > 0 && creature.y > this.camera.y - 100 && creature.y < this.camera.y + canvas.height + 100;
});
// Update snake
if (this.snake) {
// Calculate distance to player
const dx = this.player.x - this.snake.x;
const dy = this.player.y - this.snake.y;
const distance = Math.sqrt(dx * dx + dy * dy);
// Move towards player (slower than player)
this.snake.targetX = this.player.x;
this.snake.targetY = this.player.y;
const targetDx = this.snake.targetX - this.snake.x;
const targetDy = this.snake.targetY - this.snake.y;
const targetDistance = Math.sqrt(targetDx * targetDx + targetDy * targetDy);
if (targetDistance > 5) {
this.snake.vx = (targetDx / targetDistance) * this.snake.speed;
this.snake.vy = (targetDy / targetDistance) * this.snake.speed;
}
this.snake.x += this.snake.vx;
this.snake.y += this.snake.vy;
// Update snake segments
for (let i = this.snake.segments.length - 1; i > 0; i--) {
const segment = this.snake.segments[i];
const prevSegment = this.snake.segments[i - 1];
const segDx = prevSegment.x - segment.x;
const segDy = prevSegment.y - segment.y;
const segDistance = Math.sqrt(segDx * segDx + segDy * segDy);
if (segDistance > 15) {
segment.x = prevSegment.x - (segDx / segDistance) * 15;
segment.y = prevSegment.y - (segDy / segDistance) * 15;
}
segment.angle = Math.atan2(segDy, segDx);
}
// Update head segment
this.snake.segments[0].x = this.snake.x;
this.snake.segments[0].y = this.snake.y;
this.snake.segments[0].angle = Math.atan2(this.snake.vy, this.snake.vx);
// Check if player is idle too long
const timeSinceLastJump = Date.now() - this.player.lastJumpTime;
if (this.player.onGround && timeSinceLastJump > 4000) { // 4 seconds idle
// Check if snake is close enough to bite
if (distance < 40) {
this.gameOver("The sea snake caught you! Keep moving!");
return;
}
}
// Remove snake if too far from camera
if (this.snake.y < this.camera.y - 300) {
this.snake = null;
}
}
// Camera follows player
let targetCameraY = this.player.y - canvas.height/2;
this.camera.y += (targetCameraY - this.camera.y) * 0.1;
// Update depth and score
this.depth = Math.max(0, Math.floor((this.player.y - 500) / 10));
this.score = this.depth;
// Generate more platforms
if (this.player.y > this.platforms[this.platforms.length - 1].y - 500) {
for (let i = 0; i < 10; i++) {
let lastY = this.platforms[this.platforms.length - 1].y;
this.platforms.push({
x: Math.random() * (canvas.width - 80),
y: lastY + 80 + Math.random() * 40,
width: 80 + Math.random() * 40,
height: 12,
color: this.getPlatformColor(lastY + 80)
});
}
}
// Update particles
this.particles = this.particles.filter(particle => {
particle.x += particle.vx;
particle.y += particle.vy;
particle.vy += 0.2;
particle.life--;
return particle.life > 0;
});
// Update bubbles
this.bubbles = this.bubbles.filter(bubble => {
bubble.y -= bubble.speed;
bubble.x += Math.sin(bubble.y * 0.01) * 0.5;
return bubble.y > this.camera.y - 100;
});
// Add new bubbles
if (Math.random() < 0.1) {
this.bubbles.push({
x: Math.random() * canvas.width,
y: this.camera.y + canvas.height + 20,
size: 3 + Math.random() * 8,
speed: 1 + Math.random() * 2
});
}
// Check game over
if (this.player.y > this.camera.y + canvas.height + 100) {
this.gameOver("You fell into the abyss!");
}
// Update UI
document.getElementById('depth').textContent = this.depth;
document.getElementById('score').textContent = this.score;
}
createParticles(x, y) {
for (let i = 0; i < 5; i++) {
this.particles.push({
x: x + (Math.random() - 0.5) * 20,
y: y + (Math.random() - 0.5) * 10,
vx: (Math.random() - 0.5) * 6,
vy: (Math.random() - 0.5) * 6,
life: 20 + Math.random() * 20,
color: `hsl(${180 + Math.random() * 60}, 70%, 60%)`
});
}
}
render() {
// Clear canvas with gradient background
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
let depthRatio = Math.min(this.depth / 1000, 1);
gradient.addColorStop(0, `hsl(200, 60%, ${80 - depthRatio * 30}%)`);
gradient.addColorStop(1, `hsl(220, 80%, ${20 - depthRatio * 15}%)`);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(0, -this.camera.y);
// Draw bubbles
ctx.globalAlpha = 0.6;
for (let bubble of this.bubbles) {
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.beginPath();
ctx.arc(bubble.x, bubble.y, bubble.size, 0, Math.PI * 2);
ctx.fill();
}
ctx.globalAlpha = 1;
// Draw platforms
for (let platform of this.platforms) {
if (platform.y > this.camera.y - 50 && platform.y < this.camera.y + canvas.height + 50) {
ctx.fillStyle = platform.color;
ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
// Platform highlight
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fillRect(platform.x, platform.y, platform.width, 3);
}
}
// Draw particles
for (let particle of this.particles) {
ctx.fillStyle = particle.color;
ctx.globalAlpha = particle.life / 40;
ctx.fillRect(particle.x, particle.y, 3, 3);
}
ctx.globalAlpha = 1;
// Draw player
ctx.fillStyle = this.player.color;
ctx.fillRect(this.player.x, this.player.y, this.player.width, this.player.height);
// Player highlight
ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
ctx.fillRect(this.player.x, this.player.y, this.player.width, 5);
ctx.restore();
}
gameOver() {
this.gameRunning = false;
document.getElementById('finalDepth').textContent = this.depth;
document.getElementById('finalScore').textContent = this.score;
gameOverDiv.style.display = 'block';
}
gameLoop() {
if (this.gameRunning) {
this.update();
this.render();
requestAnimationFrame(() => this.gameLoop());
}
}
}
// Initialize game
const game = new Game();
// Start message
ctx.fillStyle = 'white';
ctx.font = '24px Arial';
ctx.textAlign = 'center';
ctx.fillText('Deep Sea Jumper', canvas.width/2, canvas.height/2 - 50);
ctx.font = '16px Arial';
ctx.fillText('Click or Press SPACE to Start', canvas.width/2, canvas.height/2);
ctx.fillText('Dive as deep as you can!', canvas.width/2, canvas.height/2 + 30);
</script>
</body>
</html>