Spaces:

akhaliq
/

soccergame

Running

App Files Files Community

akhaliq HF Staff commited on Mar 28

Commit

f4028dc

verified ·

1 Parent(s): 48593b6

Update index.html

Browse files

Files changed (1) hide show

index.html +401 -19

index.html CHANGED Viewed

@@ -1,19 +1,401 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pro Penalty Shootout</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Arial', sans-serif;
+            background: #000;
+        }
+        #container { position: relative; }
+        #ui {
+            position: absolute;
+            top: 20px;
+            width: 100%;
+            text-align: center;
+            color: white;
+            font-size: 24px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
+        }
+        #message {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-size: 72px;
+            font-weight: bold;
+            text-shadow: 0 0 20px #000;
+            opacity: 0;
+            transition: opacity 0.3s;
+            pointer-events: none;
+        }
+        #controls {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            color: white;
+            background: rgba(0,0,0,0.7);
+            padding: 15px;
+            border-radius: 10px;
+            font-size: 18px;
+            line-height: 1.6;
+        }
+        #start-screen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.9);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            z-index: 100;
+        }
+        #start-screen h1 {
+            font-size: 48px;
+            color: #FFD700;
+            margin-bottom: 30px;
+            text-shadow: 0 0 10px #FFD700;
+        }
+        button {
+            padding: 15px 30px;
+            font-size: 18px;
+            background: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin: 10px;
+            transition: all 0.3s;
+        }
+        button:hover {
+            background: #45a049;
+            transform: scale(1.05);
+        }
+        #power-bar {
+            position: absolute;
+            bottom: 100px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 200px;
+            height: 20px;
+            background: rgba(255,255,255,0.2);
+            border-radius: 10px;
+            overflow: hidden;
+            display: none;
+        }
+        #power-level {
+            height: 100%;
+            width: 0%;
+            background: linear-gradient(to right, #4CAF50, #FFD700, #FF5722);
+        }
+    </style>
+</head>
+<body>
+    <div id="container">
+        <div id="ui">
+            <span id="goals">0</span> / <span id="shots">0</span>
+        </div>
+        <div id="message"></div>
+        <div id="power-bar"><div id="power-level"></div></div>
+        <div id="controls">
+            <strong>CONTROLS:</strong><br>
+            SPACE - Power up shot<br>
+            LEFT/RIGHT - Aim<br>
+            Release SPACE - Shoot
+        </div>
+        <div id="start-screen">
+            <h1>PRO PENALTY SHOOTOUT</h1>
+            <button id="start-btn">START GAME</button>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
+    <script>
+        // Setup
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
+        camera.position.set(0, 4, 12);
+        camera.lookAt(0, 1, 0);
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMap.enabled = true;
+        document.getElementById('container').appendChild(renderer.domElement);
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0x404040);
+        scene.add(ambientLight);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(5, 10, 7);
+        directionalLight.castShadow = true;
+        scene.add(directionalLight);
+        // Field
+        const field = new THREE.Mesh(
+            new THREE.PlaneGeometry(40, 60),
+            new THREE.MeshStandardMaterial({ color: 0x3CB371 })
+        );
+        field.rotation.x = -Math.PI/2;
+        field.receiveShadow = true;
+        scene.add(field);
+        // Goal (more visible)
+        const goalWidth = 7.32;
+        const goalHeight = 2.44;
+        const postMaterial = new THREE.MeshStandardMaterial({
+            color: 0xffffff,
+            metalness: 0.5
+        });
+        // Posts
+        const leftPost = new THREE.Mesh(
+            new THREE.BoxGeometry(0.5, goalHeight, 0.5),
+            postMaterial
+        );
+        leftPost.position.set(-goalWidth/2, goalHeight/2, -30);
+        leftPost.castShadow = true;
+        scene.add(leftPost);
+        const rightPost = new THREE.Mesh(
+            new THREE.BoxGeometry(0.5, goalHeight, 0.5),
+            postMaterial
+        );
+        rightPost.position.set(goalWidth/2, goalHeight/2, -30);
+        rightPost.castShadow = true;
+        scene.add(rightPost);
+        const crossbar = new THREE.Mesh(
+            new THREE.BoxGeometry(goalWidth, 0.5, 0.5),
+            postMaterial
+        );
+        crossbar.position.set(0, goalHeight, -30);
+        crossbar.castShadow = true;
+        scene.add(crossbar);
+        // Net
+        const net = new THREE.Mesh(
+            new THREE.BoxGeometry(goalWidth, goalHeight, 2),
+            new THREE.MeshBasicMaterial({
+                wireframe: true,
+                color: 0xffffff,
+                transparent: true,
+                opacity: 0.7
+            })
+        );
+        net.position.set(0, goalHeight/2, -31);
+        scene.add(net);
+        // Ball
+        const ballGeometry = new THREE.SphereGeometry(0.4, 32, 32);
+        const ballMaterial = new THREE.MeshStandardMaterial({
+            color: 0xffffff,
+            roughness: 0.2,
+            metalness: 0.5
+        });
+        const ball = new THREE.Mesh(ballGeometry, ballMaterial);
+        ball.position.set(0, 0.4, 0);
+        ball.castShadow = true;
+        scene.add(ball);
+        // Goalkeeper (more visible)
+        function createGoalkeeper() {
+            const group = new THREE.Group();
+            // Blue jersey
+            const body = new THREE.Mesh(
+                new THREE.BoxGeometry(1, 1.8, 0.4),
+                new THREE.MeshStandardMaterial({ color: 0x1E90FF })
+            );
+            body.position.y = 0.9;
+            group.add(body);
+            // Yellow head
+            const head = new THREE.Mesh(
+                new THREE.SphereGeometry(0.3),
+                new THREE.MeshStandardMaterial({ color: 0xFFD700 })
+            );
+            head.position.y = 1.6;
+            group.add(head);
+            // Arms (in save position)
+            const leftArm = new THREE.Mesh(
+                new THREE.BoxGeometry(0.2, 0.8, 0.2),
+                body.material
+            );
+            leftArm.position.set(-0.7, 1.3, 0);
+            leftArm.rotation.z = Math.PI/3;
+            group.add(leftArm);
+            const rightArm = new THREE.Mesh(
+                new THREE.BoxGeometry(0.2, 0.8, 0.2),
+                body.material
+            );
+            rightArm.position.set(0.7, 1.3, 0);
+            rightArm.rotation.z = -Math.PI/3;
+            group.add(rightArm);
+            group.position.z = -29;
+            return group;
+        }
+        const goalkeeper = createGoalkeeper();
+        scene.add(goalkeeper);
+        // Game state
+        let shots = 0, goals = 0;
+        const maxShots = 5;
+        let power = 0;
+        let isPowering = false;
+        let isShooting = false;
+        let aimDirection = 0;
+        const clock = new THREE.Clock();
+        // Controls
+        const keys = {
+            Space: false,
+            ArrowLeft: false,
+            ArrowRight: false
+        };
+        window.addEventListener('keydown', (e) => {
+            if (e.code in keys) {
+                keys[e.code] = true;
+                if (e.code === 'Space' && !isPowering && !isShooting && shots < maxShots) {
+                    isPowering = true;
+                    document.getElementById('power-bar').style.display = 'block';
+                }
+            }
+        });
+        window.addEventListener('keyup', (e) => {
+            if (e.code in keys) {
+                keys[e.code] = false;
+                if (e.code === 'Space' && isPowering && !isShooting) {
+                    shootBall();
+                }
+            }
+        });
+        // Start game
+        document.getElementById('start-btn').addEventListener('click', () => {
+            document.getElementById('start-screen').style.display = 'none';
+        });
+        // Power meter
+        function updatePower() {
+            if (isPowering) {
+                power = Math.min(power + 2, 100);
+                document.getElementById('power-level').style.width = `${power}%`;
+            }
+        }
+        // Shooting
+        function shootBall() {
+            isPowering = false;
+            isShooting = true;
+            shots++;
+            document.getElementById('shots').textContent = shots;
+            document.getElementById('power-bar').style.display = 'none';
+            // Determine target based on aim
+            const targetX = aimDirection * 4;
+            const targetY = goalHeight/2;
+            const speed = 0.5 + (power/100) * 1.5; // Faster ball movement
+            let lastTime = performance.now();
+            function animateBall() {
+                const now = performance.now();
+                const delta = (now - lastTime) / 16; // Normalize to ~60fps
+                lastTime = now;
+                // Move ball forward and adjust curve
+                ball.position.z -= speed * delta;
+                ball.position.x += (targetX - ball.position.x) * 0.03 * delta;
+                ball.position.y = 0.4 + Math.sin(ball.position.z * 0.2) * 3 * (power/100);
+                // Collision with goalkeeper
+                const keeperX = goalkeeper.position.x;
+                if (Math.abs(ball.position.x - keeperX) < 1.2 && ball.position.z < -27) {
+                    endShot(false);
+                    return;
+                }
+                // Goal check
+                if (ball.position.z <= -30) {
+                    const isGoal = Math.abs(ball.position.x) < goalWidth/2 && ball.position.y < goalHeight;
+                    if (isGoal) {
+                        goals++;
+                        document.getElementById('goals').textContent = goals;
+                        showMessage("GOAL!");
+                    } else {
+                        showMessage("MISSED!");
+                    }
+                    endShot(isGoal);
+                    return;
+                }
+                requestAnimationFrame(animateBall);
+            }
+            animateBall();
+            power = 0;
+        }
+        function endShot(scored) {
+            isShooting = false;
+            setTimeout(() => {
+                ball.position.set(0, 0.4, 0);
+                if (shots >= maxShots) {
+                    setTimeout(() => {
+                        showMessage(`FINAL SCORE: ${goals}/${maxShots}`);
+                    }, 500);
+                }
+            }, 1000);
+        }
+        function showMessage(text) {
+            const message = document.getElementById('message');
+            message.textContent = text;
+            message.style.opacity = 1;
+            setTimeout(() => message.style.opacity = 0, 1500);
+        }
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            // Goalkeeper movement
+            const time = clock.getElapsedTime();
+            goalkeeper.position.x = Math.sin(time * 1.5) * 3;
+            // Handle aim input
+            if (isPowering) {
+                if (keys.ArrowLeft) aimDirection = Math.max(aimDirection - 0.05, -1);
+                if (keys.ArrowRight) aimDirection = Math.min(aimDirection + 0.05, 1);
+                updatePower();
+            }
+            renderer.render(scene, camera);
+        }
+        // Window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        animate();
+    </script>
+</body>
+</html>