Hugging Face's logo

Spaces:
arirajuns
/
space3
Running

App Files Community
space3 / index.html
arirajuns's picture
arirajuns
Add 2 files
76bfa1a verified
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>