Hugging Face's logo

Spaces:
isatis
/
test
Running

App Files Community
test / index.html
isatis's picture
isatis
Add 2 files
4f331af verified
raw
history blame contribute delete
15.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Medieval Pong: Siege of the Castle</title>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
body {
 margin: 0;
 padding: 0;
 background-color: #111;
 overflow: hidden;
 font-family: 'MedievalSharp', cursive;
 color: #d4af37;
 text-align: center;
 }
#game-container {
 position: relative;
 width: 800px;
 height: 500px;
 margin: 20px auto;
 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500"><rect width="800" height="500" fill="%23101010"/><rect x="50" y="100" width="700" height="300" fill="%23222" stroke="%23d4af37" stroke-width="2"/><rect x="300" y="150" width="200" height="200" fill="%23333" stroke="%23d4af37" stroke-width="2"/><rect x="350" y="200" width="100" height="150" fill="%23555" stroke="%23d4af37" stroke-width="2"/><rect x="375" y="200" width="50" height="30" fill="%23d4af37"/><polygon points="400,50 450,150 350,150" fill="%23777" stroke="%23d4af37" stroke-width="2"/><circle cx="400" cy="250" r="10" fill="%23d4af37"/><line x1="400" y1="260" x2="400" y2="350" stroke="%23d4af37" stroke-width="2"/><line x1="370" y1="290" x2="430" y2="290" stroke="%23d4af37" stroke-width="2"/></svg>');
 border: 3px solid #d4af37;
 box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
 }
#scoreboard {
 display: flex;
 justify-content: space-between;
 padding: 10px 50px;
 font-size: 24px;
 text-shadow: 2px 2px 4px #000;
 }
.paddle {
 position: absolute;
 width: 20px;
 height: 100px;
 background: linear-gradient(to bottom, #8B0000, #B22222, #8B0000);
 border: 2px solid #d4af37;
 border-radius: 5px;
 box-shadow: 0 0 15px #FF4500;
 }
#left-paddle {
 left: 30px;
 top: 200px;
 }
#right-paddle {
 right: 30px;
 top: 200px;
 }
.flame {
 position: absolute;
 width: 10px;
 height: 20px;
 background: radial-gradient(ellipse at center, #FF8C00 0%, #FF4500 50%, transparent 70%);
 border-radius: 50%;
 animation: flicker 0.3s infinite alternate;
 }
@keyframes flicker {
 0% { opacity: 0.7; transform: scaleY(0.9); }
 100% { opacity: 1; transform: scaleY(1.1); }
 }
#ball {
 position: absolute;
 width: 20px;
 height: 20px;
 background: radial-gradient(circle at 30% 30%, #FFF, #FFD700, #B22222);
 border-radius: 50%;
 box-shadow: 0 0 10px #FF4500;
 }
.explosion {
 position: absolute;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(255,69,0,0.8) 0%, rgba(255,140,0,0.6) 40%, rgba(255,215,0,0) 70%);
 animation: explode 0.5s forwards;
 pointer-events: none;
 }
@keyframes explode {
 0% { transform: scale(0.1); opacity: 1; }
 100% { transform: scale(2); opacity: 0; }
 }
.particle {
 position: absolute;
 width: 6px;
 height: 6px;
 background-color: #FF8C00;
 border-radius: 50%;
 animation: particle-fly 1s forwards;
 pointer-events: none;
 }
@keyframes particle-fly {
 0% { transform: translate(0, 0); opacity: 1; }
 100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
 }
#start-screen, #game-over {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.7);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 z-index: 10;
 }
#game-over {
 display: none;
 }
h1 {
 font-size: 48px;
 margin-bottom: 20px;
 text-shadow: 3px 3px 5px #000;
 }
button {
 padding: 15px 30px;
 font-family: 'MedievalSharp', cursive;
 font-size: 20px;
 background: linear-gradient(to bottom, #8B0000, #B22222);
 color: #d4af37;
 border: 2px solid #d4af37;
 border-radius: 5px;
 cursor: pointer;
 transition: all 0.3s;
 }
button:hover {
 transform: scale(1.05);
 box-shadow: 0 0 15px #FF4500;
 }
#instructions {
 margin-top: 20px;
 font-size: 18px;
 }
 </style>
</head>
<body>
 <div id="game-container">
 <div id="scoreboard">
 <div id="player-score">Player: 0</div>
 <div id="ai-score">AI: 0</div>
 </div>
<div id="left-paddle" class="paddle"></div>
 <div id="right-paddle" class="paddle"></div>
 <div id="ball"></div>
<div id="start-screen">
 <h1>Medieval Pong: Siege of the Castle</h1>
 <button id="start-button">Begin the Siege!</button>
 <div id="instructions">
 Defend your castle! Use W/S keys to move your flaming paddle.<br>
 Each hit creates an explosive impact. First to 5 wins!
 </div>
 </div>
<div id="game-over">
 <h1 id="result-message">Victory!</h1>
 <button id="restart-button">Fight Again!</button>
 </div>
 </div>
<script>
 // Game elements
 const gameContainer = document.getElementById('game-container');
 const leftPaddle = document.getElementById('left-paddle');
 const rightPaddle = document.getElementById('right-paddle');
 const ball = document.getElementById('ball');
 const playerScoreDisplay = document.getElementById('player-score');
 const aiScoreDisplay = document.getElementById('ai-score');
 const startScreen = document.getElementById('start-screen');
 const gameOverScreen = document.getElementById('game-over');
 const resultMessage = document.getElementById('result-message');
 const startButton = document.getElementById('start-button');
 const restartButton = document.getElementById('restart-button');
// Game state
 let gameRunning = false;
 let playerScore = 0;
 let aiScore = 0;
 let ballX = 400;
 let ballY = 250;
 let ballSpeedX = 4;
 let ballSpeedY = 4;
 let leftPaddleY = 200;
 let rightPaddleY = 200;
 const paddleHeight = 100;
 const paddleWidth = 20;
 const ballSize = 20;
 const gameWidth = 800;
 const gameHeight = 500;
// Key states
 const keys = {
 w: false,
 s: false
 };
// Add flame effects to paddles
 function addFlames() {
 // Left paddle flames
 for (let i = 0; i < 3; i++) {
 const flame = document.createElement('div');
 flame.className = 'flame';
 flame.style.left = '-10px';
 flame.style.top = `${20 + i * 30}px`;
 leftPaddle.appendChild(flame);
 }
// Right paddle flames
 for (let i = 0; i < 3; i++) {
 const flame = document.createElement('div');
 flame.className = 'flame';
 flame.style.right = '-10px';
 flame.style.top = `${20 + i * 30}px`;
 rightPaddle.appendChild(flame);
 }
 }
// Create explosion effect
 function createExplosion(x, y) {
 const explosion = document.createElement('div');
 explosion.className = 'explosion';
 explosion.style.left = `${x - 20}px`;
 explosion.style.top = `${y - 20}px`;
 gameContainer.appendChild(explosion);
// Create particles
 for (let i = 0; i < 10; i++) {
 const particle = document.createElement('div');
 particle.className = 'particle';
 particle.style.left = `${x - 3}px`;
 particle.style.top = `${y - 3}px`;
// Random direction for particles
 const angle = Math.random() * Math.PI * 2;
 const speed = 2 + Math.random() * 5;
 const tx = Math.cos(angle) * speed * 30;
 const ty = Math.sin(angle) * speed * 30;
particle.style.setProperty('--tx', `${tx}px`);
 particle.style.setProperty('--ty', `${ty}px`);
gameContainer.appendChild(particle);
// Remove particles after animation
 setTimeout(() => {
 particle.remove();
 }, 1000);
 }
// Remove explosion after animation
 setTimeout(() => {
 explosion.remove();
 }, 500);
 }
// Update game state
 function update() {
 if (!gameRunning) return;
// Move player paddle
 if (keys.w && leftPaddleY > 0) {
 leftPaddleY -= 5;
 }
 if (keys.s && leftPaddleY < gameHeight - paddleHeight) {
 leftPaddleY += 5;
 }
// Simple AI for right paddle
 const paddleCenter = rightPaddleY + paddleHeight / 2;
 if (paddleCenter < ballY - 10) {
 rightPaddleY += 4;
 } else if (paddleCenter > ballY + 10) {
 rightPaddleY -= 4;
 }
// Keep AI paddle in bounds
 if (rightPaddleY < 0) rightPaddleY = 0;
 if (rightPaddleY > gameHeight - paddleHeight) rightPaddleY = gameHeight - paddleHeight;
// Update paddle positions
 leftPaddle.style.top = `${leftPaddleY}px`;
 rightPaddle.style.top = `${rightPaddleY}px`;
// Move ball
 ballX += ballSpeedX;
 ballY += ballSpeedY;
// Ball collision with top and bottom
 if (ballY <= 0 || ballY >= gameHeight - ballSize) {
 ballSpeedY = -ballSpeedY;
 createExplosion(ballX, ballY <= 0 ? ballSize : gameHeight - ballSize);
 }
// Ball collision with paddles
 if (
 ballX <= 30 + paddleWidth &&
ballY + ballSize >= leftPaddleY &&
ballY <= leftPaddleY + paddleHeight
 ) {
 ballSpeedX = -ballSpeedX * 1.1; // Increase speed slightly
 ballSpeedY += (ballY - (leftPaddleY + paddleHeight / 2)) * 0.05; // Add angle based on hit position
 createExplosion(30 + paddleWidth, ballY);
 }
if (
 ballX >= gameWidth - 30 - paddleWidth - ballSize &&
ballY + ballSize >= rightPaddleY &&
ballY <= rightPaddleY + paddleHeight
 ) {
 ballSpeedX = -ballSpeedX * 1.1; // Increase speed slightly
 ballSpeedY += (ballY - (rightPaddleY + paddleHeight / 2)) * 0.05; // Add angle based on hit position
 createExplosion(gameWidth - 30 - paddleWidth, ballY);
 }
// Ball out of bounds (score)
 if (ballX < 0) {
 aiScore++;
 aiScoreDisplay.textContent = `AI: ${aiScore}`;
 resetBall();
 if (aiScore >= 5) endGame(false);
 }
if (ballX > gameWidth) {
 playerScore++;
 playerScoreDisplay.textContent = `Player: ${playerScore}`;
 resetBall();
 if (playerScore >= 5) endGame(true);
 }
// Update ball position
 ball.style.left = `${ballX}px`;
 ball.style.top = `${ballY}px`;
// Continue animation
 requestAnimationFrame(update);
 }
// Reset ball to center
 function resetBall() {
 ballX = gameWidth / 2 - ballSize / 2;
 ballY = gameHeight / 2 - ballSize / 2;
 ballSpeedX = (Math.random() > 0.5 ? 1 : -1) * 4;
 ballSpeedY = (Math.random() * 4 - 2);
// Show ball at center
 ball.style.left = `${ballX}px`;
 ball.style.top = `${ballY}px`;
// Pause for a moment
 gameRunning = false;
 setTimeout(() => {
 gameRunning = true;
 update();
 }, 1000);
 }
// End game
 function endGame(playerWon) {
 gameRunning = false;
 resultMessage.textContent = playerWon ? "Victory! The Castle Stands!" : "Defeat! The Castle Burns!";
 gameOverScreen.style.display = "flex";
 }
// Start game
 function startGame() {
 playerScore = 0;
 aiScore = 0;
 playerScoreDisplay.textContent = "Player: 0";
 aiScoreDisplay.textContent = "AI: 0";
 startScreen.style.display = "none";
 gameOverScreen.style.display = "none";
 resetBall();
 gameRunning = true;
 update();
 }
// Event listeners
 document.addEventListener('keydown', (e) => {
 if (e.key.toLowerCase() === 'w') keys.w = true;
 if (e.key.toLowerCase() === 's') keys.s = true;
 });
document.addEventListener('keyup', (e) => {
 if (e.key.toLowerCase() === 'w') keys.w = false;
 if (e.key.toLowerCase() === 's') keys.s = false;
 });
startButton.addEventListener('click', startGame);
 restartButton.addEventListener('click', startGame);
// Initialize
 addFlames();
 </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
</html>