Spaces:

arirajuns
/

space3

Running

App Files Files Community

space3 / index.html

arirajuns

Add 2 files

76bfa1a verified over 1 year ago

Raw

History Blame Contribute Delete

16.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Pendulum Challenge</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.pendulum-arm {
	transform-origin: top center;
	touch-action: none;
	}
	.target {
	transition: all 0.3s ease;
	touch-action: none;
	}
	.target-hit {
	transform: scale(1.2);
	opacity: 0;
	}
	#game-container {
	background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
	touch-action: none;
	}
	.amplitude-indicator {
	background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	}
	.frequency-indicator {
	background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
	}
	.pendulum-bob {
	box-shadow: 0 0 20px rgba(255,215,0,0.7);
	}
	body {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	}
	.physics-card {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	}
	.physics-card.open {
	max-height: 500px;
	}
	</style>
	</head>
	<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-start p-2">
	<div class="w-full max-w-md">
	<header class="text-center mb-4 sticky top-0 bg-gray-900 z-10 pt-2 pb-2">
	<h1 class="text-2xl font-bold mb-1 text-yellow-300">Pendulum Challenge</h1>
	<p class="text-sm text-gray-300">Swing to hit targets!</p>
	</header>

	<!-- Mobile Controls Info -->
	<div class="bg-blue-900 bg-opacity-50 rounded-lg p-2 mb-3 text-sm flex items-center">
	<i class="fas fa-info-circle mr-2 text-blue-300"></i>
	<span>Drag the gold ball to swing. Hit targets when amplitude matches.</span>
	</div>

	<div class="relative w-full aspect-[3/4] rounded-xl overflow-hidden shadow-2xl mb-3" id="game-container">
	<div id="pendulum" class="absolute top-0 left-1/2 transform -translate-x-1/2">
	<div class="pendulum-arm w-1 h-48 md:h-64 bg-gray-300 mx-auto relative">
	<div class="pendulum-bob absolute bottom-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 rounded-full bg-yellow-500 border-4 border-yellow-600"></div>
	</div>
	</div>
	<div id="targets" class="absolute inset-0"></div>
	<div class="absolute bottom-2 left-2 bg-black bg-opacity-50 p-1 rounded">
	<div class="flex items-center gap-1 text-sm">
	<span class="text-yellow-400"><i class="fas fa-bullseye"></i></span>
	<span id="score">0</span>
	</div>
	</div>
	</div>

	<div class="grid grid-cols-2 gap-2 mb-3">
	<div class="bg-gray-800 p-2 rounded-lg">
	<h3 class="text-sm font-semibold mb-1 text-center">Amplitude</h3>
	<div class="amplitude-indicator h-3 rounded-full overflow-hidden">
	<div id="amplitude-bar" class="h-full bg-blue-500 w-0"></div>
	</div>
	<div class="text-center mt-1 text-xs">
	<span id="amplitude-value">0°</span>
	</div>
	</div>
	<div class="bg-gray-800 p-2 rounded-lg">
	<h3 class="text-sm font-semibold mb-1 text-center">Frequency</h3>
	<div class="frequency-indicator h-3 rounded-full overflow-hidden">
	<div id="frequency-bar" class="h-full bg-blue-400 w-0"></div>
	</div>
	<div class="text-center mt-1 text-xs">
	<span id="frequency-value">0 Hz</span>
	</div>
	</div>
	</div>

	<!-- Collapsible Physics Info -->
	<div class="bg-gray-800 rounded-lg mb-3 overflow-hidden">
	<div class="flex justify-between items-center p-2 cursor-pointer" id="physics-toggle">
	<h2 class="text-lg font-bold text-yellow-300">Physics Info</h2>
	<i class="fas fa-chevron-down transition-transform duration-300" id="physics-chevron"></i>
	</div>
	<div class="physics-card" id="physics-content">
	<div class="p-3 pt-0 space-y-3">
	<div>
	<h3 class="font-semibold">Pendulum Motion</h3>
	<p class="text-xs text-gray-300">Swinging under gravity's influence, demonstrating harmonic motion.</p>
	</div>
	<div>
	<h3 class="font-semibold">Period (T)</h3>
	<p class="text-xs text-gray-300">T = 2π√(L/g)<br>L = length, g = gravity (9.8 m/s²)</p>
	</div>
	<div>
	<h3 class="font-semibold">Amplitude</h3>
	<p class="text-xs text-gray-300">Maximum angle from rest position.</p>
	</div>
	</div>
	</div>
	</div>

	<button id="restart-btn" class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-4 rounded transition duration-300 mb-2">
	<i class="fas fa-redo mr-2"></i> Restart Game
	</button>
	</div>

	<script>
	// Game variables
	let score = 0;
	let amplitude = 0;
	let frequency = 0;
	let pendulumAngle = 0;
	let angularVelocity = 0;
	let isDragging = false;
	let lastTime = 0;
	let pendulumLength = 192; // pixels (shorter for mobile)
	let gravity = 0.4; // pixels per frame squared (slower for mobile)
	let damping = 0.99; // damping factor
	let targets = [];
	let animationId;
	let gameStarted = false;
	let touchStartAngle = 0;

	// DOM elements
	const pendulum = document.getElementById('pendulum');
	const pendulumArm = document.querySelector('.pendulum-arm');
	const pendulumBob = document.querySelector('.pendulum-bob');
	const targetsContainer = document.getElementById('targets');
	const scoreDisplay = document.getElementById('score');
	const amplitudeValue = document.getElementById('amplitude-value');
	const amplitudeBar = document.getElementById('amplitude-bar');
	const frequencyValue = document.getElementById('frequency-value');
	const frequencyBar = document.getElementById('frequency-bar');
	const restartBtn = document.getElementById('restart-btn');
	const gameContainer = document.getElementById('game-container');
	const physicsToggle = document.getElementById('physics-toggle');
	const physicsContent = document.getElementById('physics-content');
	const physicsChevron = document.getElementById('physics-chevron');

	// Initialize game
	function initGame() {
	score = 0;
	scoreDisplay.textContent = score;
	targetsContainer.innerHTML = '';
	targets = [];

	// Create initial targets (fewer and larger for mobile)
	createTarget(30, 30, 100);
	createTarget(45, window.innerWidth * 0.7, 150);
	createTarget(60, window.innerWidth * 0.3, 200);

	// Reset pendulum
	pendulumAngle = 0;
	angularVelocity = 0;
	updatePendulumPosition();
	updatePhysicsDisplays();

	if (!gameStarted) {
	setupEventListeners();
	gameStarted = true;
	}

	startAnimation();
	}

	// Create a target at a specific angle and position
	function createTarget(requiredAmplitude, x, y) {
	const target = document.createElement('div');
	target.className = 'target absolute w-12 h-12 md:w-16 md:h-16 rounded-full bg-red-500 border-4 border-red-700 flex items-center justify-center text-white font-bold cursor-pointer transform -translate-x-1/2 -translate-y-1/2';
	target.style.left = `${x}px`;
	target.style.top = `${y}px`;
	target.textContent = `${requiredAmplitude}°`;
	target.dataset.amplitude = requiredAmplitude;

	// Make targets easier to hit on mobile
	target.addEventListener('click', () => {
	if (Math.abs(amplitude) >= requiredAmplitude * 0.8) {
	hitTarget(target);
	}
	});

	targetsContainer.appendChild(target);
	targets.push({
	element: target,
	x: x,
	y: y,
	requiredAmplitude: requiredAmplitude,
	hit: false
	});

	return target;
	}

	// Handle target hit
	function hitTarget(targetElement) {
	const target = targets.find(t => t.element === targetElement);
	if (target && !target.hit) {
	target.hit = true;
	targetElement.classList.add('target-hit');
	score += Math.floor(target.requiredAmplitude * 1.5);
	scoreDisplay.textContent = score;

	setTimeout(() => {
	targetElement.remove();
	// Create a new target at random position
	const newX = 50 + Math.random() * (gameContainer.offsetWidth - 100);
	const newY = 50 + Math.random() * (gameContainer.offsetHeight - 100);
	const newAmplitude = 20 + Math.floor(Math.random() * 50);
	createTarget(newAmplitude, newX, newY);
	}, 300);
	}
	}

	// Update pendulum position based on angle
	function updatePendulumPosition() {
	pendulumArm.style.transform = `rotate(${pendulumAngle}deg)`;
	}

	// Update physics displays
	function updatePhysicsDisplays() {
	amplitude = Math.abs(pendulumAngle);
	amplitudeValue.textContent = `${amplitude.toFixed(1)}°`;
	amplitudeBar.style.width = `${Math.min(100, amplitude)}%`;

	// Calculate frequency (approximate)
	if (amplitude > 5) {
	const period = 2 * Math.PI * Math.sqrt(pendulumLength / (gravity * 100));
	frequency = 1 / period;
	frequencyValue.textContent = `${frequency.toFixed(3)} Hz`;
	frequencyBar.style.width = `${Math.min(100, frequency * 150)}%`;
	} else {
	frequency = 0;
	frequencyValue.textContent = "0 Hz";
	frequencyBar.style.width = "0%";
	}
	}

	// Physics update
	function updatePhysics(timestamp) {
	if (!lastTime) lastTime = timestamp;
	const deltaTime = (timestamp - lastTime) / 16; // Normalize to ~60fps
	lastTime = timestamp;

	if (!isDragging) {
	// Apply gravity
	const angularAcceleration = (-gravity / pendulumLength) * Math.sin(pendulumAngle * Math.PI / 180);
	angularVelocity += angularAcceleration * deltaTime;
	angularVelocity *= damping;
	pendulumAngle += angularVelocity * deltaTime;

	updatePendulumPosition();
	updatePhysicsDisplays();
	}

	animationId = requestAnimationFrame(updatePhysics);
	}

	// Start animation loop
	function startAnimation() {
	lastTime = 0;
	cancelAnimationFrame(animationId);
	animationId = requestAnimationFrame(updatePhysics);
	}

	// Calculate angle from touch position
	function getAngleFromTouch(touchX, touchY) {
	const rect = gameContainer.getBoundingClientRect();
	const centerX = rect.left + rect.width / 2;
	const centerY = rect.top + 10; // Pivot point

	const deltaX = touchX - centerX;
	const deltaY = touchY - centerY;

	return Math.atan2(deltaX, deltaY) * (180 / Math.PI) - 90;
	}

	// Event listeners setup
	function setupEventListeners() {
	// Touch controls for pendulum
	pendulumBob.addEventListener('touchstart', (e) => {
	e.preventDefault();
	isDragging = true;
	const touch = e.touches[0];
	touchStartAngle = getAngleFromTouch(touch.clientX, touch.clientY) - pendulumAngle;

	// Visual feedback
	pendulumBob.classList.add('scale-110');
	});

	document.addEventListener('touchmove', (e) => {
	if (!isDragging) return;
	e.preventDefault();
	const touch = e.touches[0];
	pendulumAngle = getAngleFromTouch(touch.clientX, touch.clientY) - touchStartAngle;
	angularVelocity = 0;

	updatePendulumPosition();
	updatePhysicsDisplays();
	});

	document.addEventListener('touchend', () => {
	if (isDragging) {
	isDragging = false;
	pendulumBob.classList.remove('scale-110');
	// Give the pendulum a small initial velocity based on release angle
	angularVelocity = -pendulumAngle * 0.015; // Slower for mobile
	}
	});

	// Click targets (also works for touch)
	targetsContainer.addEventListener('click', (e) => {
	if (e.target.classList.contains('target')) {
	const requiredAmplitude = parseFloat(e.target.dataset.amplitude);
	if (Math.abs(amplitude) >= requiredAmplitude * 0.8) {
	hitTarget(e.target);
	}
	}
	});

	// Restart button
	restartBtn.addEventListener('click', initGame);

	// Physics info toggle
	physicsToggle.addEventListener('click', () => {
	physicsContent.classList.toggle('open');
	physicsChevron.classList.toggle('rotate-180');
	});

	// Prevent scrolling when touching the game
	document.addEventListener('touchmove', (e) => {
	if (isDragging) {
	e.preventDefault();
	}
	}, { passive: false });
	}

	// Start the game
	initGame();

	// Handle window resize
	window.addEventListener('resize', () => {
	// Reposition targets on resize
	targets.forEach(target => {
	target.element.style.left = `${target.x}px`;
	target.element.style.top = `${target.y}px`;
	});
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=arirajuns/space3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>