Spaces:

Rausda6
/

3d-spherical-pong-arena

Running

create a fully playable PONG game but in 3D, computer vs. player, where the play area is a sphere, and the bars from 2D game are here a spherical quadrilateral so square like surface . use W & S and Q&E to control the panel , the mouse to rotate the sphere

5c6379d verified about 1 month ago

raw

history blame contribute delete

2.55 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>3D Spherical Pong Arena</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	</head>
	<body class="bg-gray-900 text-white overflow-hidden">
	<div id="gameContainer" class="relative w-full h-screen">
	<canvas id="gameCanvas" class="absolute top-0 left-0 w-full h-full"></canvas>
	<!-- Game UI Overlay -->
	<div id="uiOverlay" class="absolute top-0 left-0 w-full h-full pointer-events-none">
	<!-- Score Display -->
	<div class="flex justify-between items-center p-6">
	<div class="text-3xl font-bold">
	<span id="playerScore">0</span>
	</div>
	<div class="text-3xl font-bold">
	<span id="computerScore">0</span>
	</div>
	</div>

	<!-- Game Controls -->
	<div class="absolute bottom-6 left-0 right-0 flex justify-center space-x-4">
	<button id="startBtn" class="px-6 py-3 bg-blue-600 rounded-lg font-bold pointer-events-auto hover:bg-blue-700 transition-colors">
	Start Game
	</button>
	<button id="resetBtn" class="px-6 py-3 bg-red-600 rounded-lg font-bold pointer-events-auto hover:bg-red-700 transition-colors">
	Reset
	</button>
	</div>

	<!-- Instructions -->
	<div class="absolute bottom-24 left-0 right-0 text-center">
	<p class="text-xl">W/S: Move Paddle \| Q/E: Rotate Sphere \| Mouse: Rotate View</p>
	</div>
	</div>
	<!-- Game Over Screen -->
	<div id="gameOverScreen" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-80 flex flex-col items-center justify-center hidden">
	<h2 id="winnerText" class="text-5xl font-bold mb-6"></h2>
	<button id="playAgainBtn" class="px-8 py-4 bg-green-600 rounded-lg text-2xl font-bold hover:bg-green-700 transition-colors">
	Play Again
	</button>
	</div>
	</div>

	<script src="script.js"></script>
	<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
	</body>
	</html>