Spaces:

Halile258
/

squid-game

Running

App Files Files Community

squid-game / index.html

Halile258

Crée-moi une application de jeux vidéo inspirer du Squid game - Initial Deployment

877b464 verified 12 months ago

Raw

History Blame Contribute Delete

26.1 kB

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Squid Game - Application de Jeux</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Noto+Sans:wght@300;400;600&display=swap');

	:root {
	--squid-pink: #ff006e;
	--squid-green: #06ffa5;
	--squid-dark: #0a0a0a;
	--squid-gray: #1a1a1a;
	--neon-glow: 0 0 20px var(--squid-pink);
	}

	body {
	font-family: 'Noto Sans', sans-serif;
	background: var(--squid-dark);
	color: white;
	overflow-x: hidden;
	}

	.orbitron {
	font-family: 'Orbitron', monospace;
	}

	.neon-text {
	color: var(--squid-pink);
	text-shadow: var(--neon-glow);
	animation: pulse 2s ease-in-out infinite alternate;
	}

	@keyframes pulse {
	from { opacity: 0.8; }
	to { opacity: 1; }
	}

	.glass-morphism {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.game-card {
	transition: all 0.3s ease;
	transform: translateY(0);
	}

	.game-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(255, 0, 110, 0.3);
	}

	.play-button {
	background: linear-gradient(45deg, var(--squid-pink), var(--squid-green));
	transition: all 0.3s ease;
	}

	.play-button:hover {
	transform: scale(1.05);
	box-shadow: 0 0 30px var(--squid-pink);
	}

	.modal {
	backdrop-filter: blur(20px);
	background: rgba(0, 0, 0, 0.8);
	}

	.player-count {
	animation: countUp 1s ease-out;
	}

	@keyframes countUp {
	from { transform: scale(0.5); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
	}

	.marble {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, white, #ddd);
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	}

	.red-light {
	background: #dc2626;
	animation: redPulse 1s ease-in-out infinite;
	}

	@keyframes redPulse {
	0%, 100% { opacity: 0.8; }
	50% { opacity: 1; }
	}

	.green-light {
	background: #16a34a;
	animation: greenPulse 1s ease-in-out infinite;
	}

	@keyframes greenPulse {
	0%, 100% { opacity: 0.8; }
	50% { opacity: 1; }
	}
	</style>
	</head>
	<body class="bg-black min-h-screen">
	<!-- Navigation -->
	<nav class="fixed top-0 w-full z-50 glass-morphism">
	<div class="container mx-auto px-6 py-4">
	<div class="flex justify-between items-center">
	<h1 class="text-2xl orbitron font-bold neon-text">SQUID GAME</h1>
	<div class="flex items-center space-x-4">
	<span class="text-sm">Points: <span id="playerPoints" class="text-green-400 font-bold">0</span></span>
	<button id="settingsBtn" class="text-white hover:text-pink-500 transition">
	<i class="fas fa-cog text-xl"></i>
	</button>
	</div>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<section class="pt-24 pb-12 px-6">
	<div class="container mx-auto text-center">
	<h2 class="text-6xl md:text-8xl orbitron font-black mb-6">
	<span class="neon-text">SQUID</span>
	<span class="text-white">GAME</span>
	</h2>
	<p class="text-xl text-gray-300 mb-8">Choisissez votre destin - gagnez ou mourrez</p>

	<!-- Live Player Counter -->
	<div class="inline-block glass-morphism rounded-full px-8 py-4 mb-8">
	<i class="fas fa-users text-pink-500 mr-2"></i>
	<span class="text-lg">Joueurs en ligne: </span>
	<span id="liveCounter" class="text-2xl font-bold text-green-400 player-count">1,234</span>
	</div>
	</div>
	</section>

	<!-- Games Grid -->
	<section class="container mx-auto px-6 pb-12">
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Red Light Green Light -->
	<div class="game-card glass-morphism rounded-xl p-6">
	<div class="relative mb-4">
	<div class="w-full h-48 bg-gradient-to-br from-red-500 to-green-500 rounded-lg flex items-center justify-center">
	<div class="flex space-x-4">
	<div class="red-light w-16 h-16 rounded-full"></div>
	<div class="green-light w-16 h-16 rounded-full"></div>
	</div>
	</div>
	<div class="absolute top-2 right-2 bg-black bg-opacity-50 rounded-full px-3 py-1">
	<span class="text-sm">Joueurs: 456</span>
	</div>
	</div>
	<h3 class="text-xl font-bold mb-2">Feu Rouge Feu Vert</h3>
	<p class="text-gray-400 text-sm mb-4">Bougez quand le feu est vert, arrêtez quand il est rouge. Simple non?</p>
	<button onclick="openGame('red-green')" class="w-full play-button text-white py-3 rounded-lg font-bold">
	Jouer (100 pts)
	</button>
	</div>

	<!-- Honeycomb -->
	<div class="game-card glass-morphism rounded-xl p-6">
	<div class="relative mb-4">
	<div class="w-full h-48 bg-gradient-to-br from-amber-400 to-amber-600 rounded-lg flex items-center justify-center">
	<div class="w-32 h-32 border-8 border-amber-800 rounded-full flex items-center justify-center">
	<span class="text-4xl">🐝</span>
	</div>
	</div>
	</div>
	<h3 class="text-xl font-bold mb-2">Miel ou Mort</h3>
	<p class="text-gray-400 text-sm mb-4">Découpez la forme dans le miel sans la casser. Un faux mouvement et c'est fini.</p>
	<button onclick="openGame('honeycomb')" class="w-full play-button text-white py-3 rounded-lg font-bold">
	Jouer (150 pts)
	</button>
	</div>

	<!-- Tug of War -->
	<div class="game-card glass-morphism rounded-xl p-6">
	<div class="relative mb-4">
	<div class="w-full h-48 bg-gradient-to-br from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
	<div class="flex items-center space-x-8">
	<i class="fas fa-users text-6xl"></i>
	<i class="fas fa-minus text-4xl"></i>
	<i class="fas fa-users text-6xl"></i>
	</div>
	</div>
	</div>
	<h3 class="text-xl font-bold mb-2">Combat de Traction</h3>
	<p class="text-gray-400 text-sm mb-4">La force brute contre la stratégie. Qui tombera dans le vide?</p>
	<button onclick="openGame('tug-war')" class="w-full play-button text-white py-3 rounded-lg font-bold">
	Jouer (200 pts)
	</button>
	</div>

	<!-- Marbles -->
	<div class="game-card glass-morphism rounded-xl p-6">
	<div class="relative mb-4">
	<div class="w-full h-48 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg flex items-center justify-center">
	<div class="grid grid-cols-4 gap-2">
	<div class="marble"></div>
	<div class="marble" style="background: radial-gradient(circle at 30% 30%, #ff6b6b, #ff5252)"></div>
	<div class="marble" style="background: radial-gradient(circle at 30% 30%, #4ecdc4, #45b7aa)"></div>
	<div class="marble" style="background: radial-gradient(circle at 30% 30%, #ffd93d, #ffc107)"></div>
	</div>
	</div>
	</div>
	<h3 class="text-xl font-bold mb-2">Billes de la Mort</h3>
	<p class="text-gray-400 text-sm mb-4">Gagnez les billes de votre adversaire ou perdez les vôtres. Chaque bille compte.</p>
	<button onclick="openGame('marbles')" class="w-full play-button text-white py-3 rounded-lg font-bold">
	Jouer (250 pts)
	</button>
	</div>

	<!-- Glass Bridge -->
	<div class="game-card glass-morphism rounded-xl p-6">
	<div class="relative mb-4">
	<div class="w-full h-48 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center">
	<div class="grid grid-cols-5 gap-1">
	<div class="w-8 h-8 bg-white opacity-60 rounded"></div>
	<div class="w-8 h-8 bg-white opacity-60 rounded"></div>
	<div class="w-8 h-8 bg-red-500 rounded"></div>
	<div class="w-8 h-8 bg-white opacity-60 rounded"></div>
	<div class="w-8 h-8 bg-red-500 rounded"></div>
	</div>
	</div>
	</div>
	<h3 class="text-xl font-bold mb-2">Pont de Verre</h3>
	<p class="text-gray-400 text-sm mb-4">Choisissez le bon chemin ou tombez dans le vide. La chance décide de tout.</p>
	<button onclick="openGame('glass-bridge')" class="w-full play-button text-white py-3 rounded-lg font-bold">
	Jouer (300 pts)
	</button>
	</div>

	<!-- Squid Game -->
	<div class="game-card glass-morphism rounded-xl p-6">
	<div class="relative mb-4">
	<div class="w-full h-48 bg-gradient-to-br from-pink-500 to-red-500 rounded-lg flex items-center justify-center">
	<div class="w-32 h-32 border-4 border-white rounded-lg"></div>
	</div>
	</div>
	<h3 class="text-xl font-bold mb-2">Le Jeu du Calamar</h3>
	<p class="text-gray-400 text-sm mb-4">Le jeu final. Tout ou rien. Gagnez 45.6 milliards ou perdez tout.</p>
	<button onclick="openGame('squid-game')" class="w-full play-button text-white py-3 rounded-lg font-bold">
	Jouer (500 pts)
	</button>
	</div>
	</div>
	</section>

	<!-- Game Modal -->
	<div id="gameModal" class="fixed inset-0 modal hidden z-50">
	<div class="flex items-center justify-center min-h-screen p-4">
	<div class="glass-morphism rounded-xl max-w-2xl w-full p-8">
	<div class="flex justify-between items-center mb-6">
	<h2 id="modalTitle" class="text-3xl font-bold neon-text"></h2>
	<button onclick="closeModal()" class="text-gray-400 hover:text-white text-2xl">
	<i class="fas fa-times"></i>
	</button>
	</div>
	<div id="gameContent" class="text-center">
	<!-- Game content will be inserted here -->
	</div>
	</div>
	</div>
	</div>

	<!-- Leaderboard -->
	<section class="container mx-auto px-6 py-12">
	<h2 class="text-3xl font-bold text-center mb-8">Classement Mondial</h2>
	<div class="glass-morphism rounded-xl p-6">
	<div class="overflow-x-auto">
	<table class="w-full">
	<thead>
	<tr class="text-left">
	<th class="pb-4">Rang</th>
	<th class="pb-4">Joueur</th>
	<th class="pb-4">Points</th>
	<th class="pb-4">Jeux Gagnés</th>
	</tr>
	</thead>
	<tbody id="leaderboardBody">
	<!-- Dynamic content -->
	</tbody>
	</table>
	</div>
	</div>
	</section>

	<script>
	// Game state
	let playerPoints = 0;
	let currentGame = null;

	// Initialize
	document.addEventListener('DOMContentLoaded', function() {
	updateLiveCounter();
	populateLeaderboard();
	animateCounters();
	});

	// Live counter animation
	function updateLiveCounter() {
	const counter = document.getElementById('liveCounter');
	const baseCount = 1000;
	const variation = Math.floor(Math.random() * 500);
	const newCount = baseCount + variation;
	counter.textContent = newCount.toLocaleString();
	setTimeout(updateLiveCounter, 3000);
	}

	// Animate counters on load
	function animateCounters() {
	animateValue('playerPoints', 0, 1250, 2000);
	}

	function animateValue(id, start, end, duration) {
	const element = document.getElementById(id);
	const range = end - start;
	const increment = end > start ? 1 : -1;
	const stepTime = Math.abs(Math.floor(duration / range));
	let current = start;

	const timer = setInterval(() => {
	current += increment;
	element.textContent = current.toLocaleString();
	if (current === end) clearInterval(timer);
	}, stepTime);
	}

	// Open game modal
	function openGame(gameType) {
	currentGame = gameType;
	const modal = document.getElementById('gameModal');
	const title = document.getElementById('modalTitle');
	const content = document.getElementById('gameContent');

	switch(gameType) {
	case 'red-green':
	title.textContent = 'Feu Rouge Feu Vert';
	content.innerHTML = `
	<div class="mb-6">
	<p class="text-lg mb-4">Règles: Avancez quand le feu est vert, arrêtez quand il est rouge.</p>
	<div class="flex justify-center space-x-8 mb-6">
	<div id="redLight" class="w-20 h-20 bg-red-600 rounded-full opacity-50"></div>
	<div id="greenLight" class="w-20 h-20 bg-green-600 rounded-full opacity-50"></div>
	</div>
	<button onclick="startRedGreenGame()" class="play-button px-8 py-3 rounded-lg font-bold">
	Commencer
	</button>
	</div>
	`;
	break;

	case 'honeycomb':
	title.textContent = 'Miel ou Mort';
	content.innerHTML = `
	<div class="mb-6">
	<p class="text-lg mb-4">Choisissez votre forme et découpez-la avec précision.</p>
	<div class="grid grid-cols-3 gap-4 mb-6">
	<button onclick="selectShape('circle')" class="p-4 border-2 border-white rounded-lg hover:border-pink-500">
	<div class="w-16 h-16 border-4 border-amber-800 rounded-full mx-auto"></div>
	<p class="mt-2">Cercle</p>
	</button>
	<button onclick="selectShape('triangle')" class="p-4 border-2 border-white rounded-lg hover:border-pink-500">
	<div class="w-16 h-16 border-4 border-amber-800" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)"></div>
	<p class="mt-2">Triangle</p>
	</button>
	<button onclick="selectShape('star')" class="p-4 border-2 border-white rounded-lg hover:border-pink-500">
	<div class="w-16 h-16 border-4 border-amber-800" style="clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"></div>
	<p class="mt-2">Étoile</p>
	</button>
	</div>
	</div>
	`;
	break;

	case 'marbles':
	title.textContent = 'Billes de la Mort';
	content.innerHTML = `
	<div class="mb-6">
	<p class="text-lg mb-4">Pariez vos billes contre l\'IA. Gagnez ou perdez tout.</p>
	<div class="flex justify-center space-x-8 mb-6">
	<div>
	<h4 class="mb-2">Vos billes: <span id="playerMarbles">10</span></h4>
	<div class="flex space-x-2">
	<div class="marble"></div>
	<div class="marble"></div>
	<div class="marble"></div>
	</div>
	</div>
	<div>
	<h4 class="mb-2">Billes IA: <span id="cpuMarbles">10</span></h4>
	<div class="flex space-x-2">
	<div class="marble" style="background: radial-gradient(circle at 30% 30%, #ff6b6b, #ff5252)"></div>
	<div class="marble" style="background: radial-gradient(circle at 30% 30%, #ff6b6b, #ff5252)"></div>
	<div class="marble" style="background: radial-gradient(circle at 30% 30%, #ff6b6b, #ff5252)"></div>
	</div>
	</div>
	</div>
	<button onclick="startMarblesGame()" class="play-button px-8 py-3 rounded-lg font-bold">
	Parier 1 bille
	</button>
	</div>
	`;
	break;

	default:
	title.textContent = 'Fonctionnalité à venir';
	content.innerHTML = '<p>Ce jeu sera bientôt disponible.</p>';
	}

	modal.classList.remove('hidden');
	}

	// Close modal
	function closeModal() {
	document.getElementById('gameModal').classList.add('hidden');
	}

	// Red Green Light game
	function startRedGreenGame() {
	let score = 0;
	let isGreen = false;
	let gameActive = true;

	const redLight = document.getElementById('redLight');
	const greenLight = document.getElementById('greenLight');
	const content = document.getElementById('gameContent');

	content.innerHTML = `
	<div class="mb-6">
	<p class="text-2xl mb-4">Score: <span id="gameScore">0</span></p>
	<button id="moveBtn" class="w-full py-4 bg-green-600 text-white rounded-lg mb-4">
	AVANCER
	</button>
	<p class="text-sm text-gray-400">Cliquez sur AVANCER quand le feu est vert</p>
	</div>
	`;

	const gameInterval = setInterval(() => {
	isGreen = !isGreen;

	if (isGreen) {
	redLight.style.opacity = '0.3';
	greenLight.style.opacity = '1';
	document.getElementById('moveBtn').disabled = false;
	} else {
	redLight.style.opacity = '1';
	greenLight.style.opacity = '0.3';
	document.getElementById('moveBtn').disabled = true;

	// Check if player was moving
	if (gameActive) {
	clearInterval(gameInterval);
	gameActive = false;
	endRedGreenGame(score);
	}
	}
	}, 2000);

	document.getElementById('moveBtn').addEventListener('click', () => {
	if (isGreen && gameActive) {
	score += 10;
	document.getElementById('gameScore').textContent = score;
	}
	});
	}

	function endRedGreenGame(score) {
	const points = Math.floor(score / 10);
	addPoints(points);
	document.getElementById('gameContent').innerHTML = `
	<h3 class="text-2xl mb-4">Partie terminée!</h3>
	<p class="text-xl mb-4">Score final: ${score}</p>
	<p class="text-lg mb-6">Points gagnés: +${points}</p>
	<button onclick="closeModal()" class="play-button px-8 py-3 rounded-lg font-bold">
	Fermer
	</button>
	`;
	}

	// Marbles game
	function startMarblesGame() {
	let playerMarbles = parseInt(document.getElementById('playerMarbles').textContent);
	let cpuMarbles = parseInt(document.getElementById('cpuMarbles').textContent);

	const result = Math.random() > 0.5;

	if (result) {
	playerMarbles += 1;
	cpuMarbles -= 1;
	} else {
	playerMarbles -= 1;
	cpuMarbles += 1;
	}

	document.getElementById('playerMarbles').textContent = playerMarbles;
	document.getElementById('cpuMarbles').textContent = cpuMarbles;

	if (playerMarbles <= 0) {
	document.getElementById('gameContent').innerHTML = `
	<h3 class="text-2xl mb-4 text-red-500">Vous avez perdu toutes vos billes!</h3>
	<button onclick="closeModal()" class="play-button px-8 py-3 rounded-lg font-bold">
	Rejouer
	</button>
	`;
	} else if (cpuMarbles <= 0) {
	addPoints(250);
	document.getElementById('gameContent').innerHTML = `
	<h3 class="text-2xl mb-4 text-green-500">Victoire! Vous avez toutes les billes!</h3>
	<p class="mb-6">+250 points!</p>
	<button onclick="closeModal()" class="play-button px-8 py-3 rounded-lg font-bold">
	Continuer
	</button>
	`;
	}
	}

	// Add points
	function addPoints(points) {
	playerPoints += points;
	document.getElementById('playerPoints').textContent = playerPoints.toLocaleString();
	}

	// Populate leaderboard
	function populateLeaderboard() {
	const leaderboard = [
	{ name: "Joueur_456", points: 45600, wins: 6 },
	{ name: "Front_Man", points: 32100, wins: 5 },
	{ name: "Gi-Hun", points: 28500, wins: 4 },
	{ name: "Sae-Byeok", points: 23400, wins: 4 },
	{ name: "Sang-Woo", points: 19800, wins: 3 }
	];

	const tbody = document.getElementById('leaderboardBody');
	tbody.innerHTML = leaderboard.map((player, index) => `
	<tr class="border-t border-gray-700">
	<td class="py-4">${index + 1}</td>
	<td class="py-4 font-bold">${player.name}</td>
	<td class="py-4 text-green-400">${player.points.toLocaleString()}</td>
	<td class="py-4">${player.wins}</td>
	</tr>
	`).join('');
	}

	// Close modal on outside click
	document.addEventListener('click', (e) => {
	const modal = document.getElementById('gameModal');
	if (e.target === modal) {
	closeModal();
	}
	});
	</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=Halile258/squid-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>