Spaces:

FR1Eyad
/

undefined

Running

App Files Files Community

undefined / game.html

FR1Eyad

redesign the game into another style

cafa739 verified 8 months ago

raw

history blame contribute delete

19.9 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pyramid Builder Adventure - Game</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

	body {
	font-family: 'Poppins', sans-serif;
	background-color: #1a1a2e;
	color: #e6e6e6;
	overflow: hidden;
	}
	.game-container {
	perspective: 1000px;
	position: relative;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	}
	/* Modern minimalist blocks */
	.block {
	background: #fff;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	transition: all 0.2s ease;
	}
	.block:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
	}
	.block:active {
	cursor: grabbing;
	transform: scale(0.95);
	}
	.block-dragged {
	position: absolute;
	pointer-events: none;
	z-index: 100;
	transform: rotate(5deg);
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	}
	/* Construction zone */
	.construction-zone {
	background: #f0f4f8;
	border-top: 2px dashed #cbd5e0;
	}

	.pyramid-block {
	background: #4fd1c5;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
	}
	/* Particle effects */
	.particle {
	position: absolute;
	background-color: #4fd1c5;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0.8;
	}
	/* UI styles */
	.game-ui {
	background-color: white;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	border-radius: 12px;
	}
	.btn-game {
	transition: all 0.2s ease;
	color: #4a5568;
	}

	.btn-game:hover {
	transform: scale(1.1);
	background-color: #e6fffa;
	color: #2c5282;
	}
	</style>
	</head>
	<body>
	<div class="game-container">
	<!-- Game UI -->
	<div class="absolute top-4 left-4 z-10 game-ui rounded-lg p-3 flex items-center">
	<span id="blocks-counter" class="font-bold text-gray-700">Blocks: 0/10</span>
	</div>
	<div class="absolute top-4 right-4 z-10 flex space-x-2">
	<button id="pause-btn" class="game-ui p-2 rounded-lg btn-game">
	<i data-feather="pause" class="text-gray-700"></i>
	</button>
	<button id="restart-btn" class="game-ui p-2 rounded-lg btn-game">
	<i data-feather="refresh-cw" class="text-gray-700"></i>
	</button>
	<button id="home-btn" class="game-ui p-2 rounded-lg btn-game">
	<i data-feather="home" class="text-gray-700"></i>
	</button>
	<button id="sound-btn" class="game-ui p-2 rounded-lg btn-game">
	<i data-feather="volume-2" class="text-gray-700"></i>
	</button>
	<button id="language-btn" class="game-ui p-2 rounded-lg btn-game">
	<img src="https://flagcdn.com/w20/gb.png" class="w-5 h-5">
	</button>
	</div>
	<!-- Game Layout -->
	<div class="absolute inset-0 flex flex-col">
	<!-- Top Area - Blocks to Collect -->
	<div id="blocks-area" class="h-1/2 p-6 flex flex-wrap justify-center gap-6 content-start bg-white">
	<!-- Blocks will be generated here -->
	</div>

	<!-- Bottom Area - Pyramid Construction -->
	<div id="construction-area" class="h-1/2 relative construction-zone flex items-end justify-center">
	<div id="pyramid-base" class="w-64 h-8 bg-teal-100 rounded-sm"></div>
	<!-- Pyramid levels will be built here -->
	</div>
	</div>
	<!-- Game Overlay (for pause menu, etc) -->
	<div id="game-overlay" class="absolute inset-0 bg-white bg-opacity-90 hidden flex-col items-center justify-center z-20">
	<h2 id="pause-title" class="text-4xl font-bold mb-8 text-gray-800">Game Paused</h2>
	<button id="resume-btn" class="px-8 py-3 bg-teal-500 text-white rounded-full text-xl font-semibold mb-4 hover:bg-teal-600 transition">
	Resume Game
	</button>
	<button id="menu-btn" class="px-8 py-3 bg-gray-200 text-gray-800 rounded-full text-xl font-semibold hover:bg-gray-300 transition">
	Back to Menu
	</button>
	</div>
	<!-- Language Selector (hidden by default) -->
	<div id="language-selector" class="absolute top-16 right-4 z-30 bg-white rounded-xl shadow-lg p-2 hidden">
	<div class="flex flex-col space-y-1">
	<button class="language-option flex items-center px-4 py-3 rounded-lg hover:bg-teal-50 transition" data-lang="en">
	<img src="https://flagcdn.com/w20/gb.png" class="w-5 h-5 mr-2"> English
	</button>
	<button class="language-option flex items-center px-4 py-3 rounded-lg hover:bg-teal-50 transition" data-lang="ar">
	<img src="https://flagcdn.com/w20/sa.png" class="w-5 h-5 mr-2"> العربية
	</button>
	</div>
	</div>
	</div>

	<script>
	feather.replace();
	// Game state
	const gameState = {
	blocksStacked: 0,
	isPaused: false,
	isMuted: false,
	language: 'en',
	heldBlock: null,
	blocksInRow: {0: 0} // Tracks blocks placed in each row
	};
	// Language translations
	const translations = {
	en: {
	blocks: "Blocks",
	pause: "Pause",
	resume: "Resume",
	gamePaused: "Game Paused",
	backToMenu: "Back to Menu",
	gameComplete: "Pyramid Complete!",
	restart: "Restart"
	},
	ar: {
	blocks: "الكتل",
	pause: "إيقاف مؤقت",
	resume: "استئناف",
	gamePaused: "اللعبة متوقفة",
	backToMenu: "العودة إلى القائمة",
	gameComplete: "اكتمل الهرم!",
	restart: "إعادة التشغيل"
	}
	};
	// DOM elements
	const blocksCounter = document.getElementById('blocks-counter');
	const pauseBtn = document.getElementById('pause-btn');
	const restartBtn = document.getElementById('restart-btn');
	const homeBtn = document.getElementById('home-btn');
	const soundBtn = document.getElementById('sound-btn');
	const languageBtn = document.getElementById('language-btn');
	const player = document.getElementById('player');
	const stonesContainer = document.getElementById('stones-container');
	const pyramidArea = document.getElementById('pyramid-area');
	const collectedStones = document.getElementById('collected-stones');
	const gameOverlay = document.getElementById('game-overlay');
	const pauseTitle = document.getElementById('pause-title');
	const resumeBtn = document.getElementById('resume-btn');
	const menuBtn = document.getElementById('menu-btn');
	const languageSelector = document.getElementById('language-selector');
	// Initialize game
	function initGame() {
	updateLanguage(gameState.language);
	generateBlocks();
	setupEventListeners();

	// Track mouse position
	document.addEventListener('mousemove', (e) => {
	if (gameState.heldBlock) {
	gameState.heldBlock.style.left = `${e.clientX - 30}px`;
	gameState.heldBlock.style.top = `${e.clientY - 30}px`;
	}
	});
	}
	// Create initial blocks
	function generateBlocks() {
	const blocksArea = document.getElementById('blocks-area');
	blocksArea.innerHTML = '';

	for (let i = 0; i < 10; i++) {
	const block = document.createElement('div');
	block.className = 'block w-14 h-14 bg-white rounded-md cursor-grab flex items-center justify-center';
	block.innerHTML = '<div class="w-10 h-10 bg-teal-100 rounded-sm"></div>';
	block.style.position = 'relative';
	block.style.transform = `rotate(${Math.random() * 6 - 3}deg)`;
	block.dataset.id = `block-${i}`;
	block.addEventListener('mousedown', startDrag);
	blocksArea.appendChild(block);
	}
	}

	// Start dragging a block
	function startDrag(e) {
	if (gameState.isPaused) return;

	const block = e.target;
	gameState.draggedBlock = block;

	// Calculate initial positions
	gameState.dragStartX = e.clientX;
	gameState.dragStartY = e.clientY;
	gameState.blockStartX = block.getBoundingClientRect().left;
	gameState.blockStartY = block.getBoundingClientRect().top;

	// Style the dragged block
	block.style.position = 'fixed';
	block.style.zIndex = '100';
	block.style.transform = 'rotate(5deg)';
	block.style.filter = 'drop-shadow(0 0 5px rgba(0,0,0,0.5))';
	block.style.left = `${gameState.blockStartX}px`;
	block.style.top = `${gameState.blockStartY}px`;

	document.addEventListener('mousemove', dragBlock);
	document.addEventListener('mouseup', stopDrag);

	e.preventDefault();
	}

	// Drag block movement
	function dragBlock(e) {
	if (!gameState.draggedBlock) return;

	const block = gameState.draggedBlock;
	const dx = e.clientX - gameState.dragStartX;
	const dy = e.clientY - gameState.dragStartY;

	block.style.left = `${gameState.blockStartX + dx}px`;
	block.style.top = `${gameState.blockStartY + dy}px`;
	}

	// Stop dragging and drop block
	function stopDrag(e) {
	if (!gameState.draggedBlock) return;

	const block = gameState.draggedBlock;
	const constructionArea = document.getElementById('construction-area');
	const areaRect = constructionArea.getBoundingClientRect();

	// Check if dropped in construction area
	if (e.clientX >= areaRect.left && e.clientX <= areaRect.right &&
	e.clientY >= areaRect.top && e.clientY <= areaRect.bottom) {

	placeInPyramid(block);
	} else {
	// Return to original position
	block.style.position = 'relative';
	block.style.left = 'auto';
	block.style.top = 'auto';
	block.style.zIndex = 'auto';
	block.style.transform = '';
	block.style.filter = '';

	// Move back to blocks area
	document.getElementById('blocks-area').appendChild(block);
	}

	document.removeEventListener('mousemove', dragBlock);
	document.removeEventListener('mouseup', stopDrag);
	gameState.draggedBlock = null;
	}
	}
	// Place block in pyramid
	function placeInPyramid(block) {
	if (gameState.isPaused) return;

	// Calculate pyramid row
	const baseWidth = 5; // Base has 5 blocks
	const row = Math.floor(Math.sqrt(gameState.blocksStacked * 2));
	const blocksInRow = baseWidth - row;

	// Only place block if there's space in the row
	if (blocksInRow > 0) {
	block.className = 'pyramid-block w-14 h-14 rounded-md shadow-sm absolute flex items-center justify-center';
	block.innerHTML = '<div class="w-12 h-12 bg-teal-400 rounded-sm"></div>';
	block.style.position = 'absolute';
	block.style.cursor = 'default';
	// Calculate position in row
	const rowY = 14 + (row * 14); // Each row is 14px higher
	const spacing = (320 - (blocksInRow * 56)) / (blocksInRow + 1);
	const blockX = spacing + ((gameState.blocksInRow[row] \|\| 0) * (56 + spacing));
	block.style.bottom = `${rowY}px`;
	block.style.left = `${blockX}px`;

	document.getElementById('construction-area').appendChild(block);

	// Update counts
	gameState.blocksStacked++;
	gameState.blocksInRow[row] = (gameState.blocksInRow[row] \|\| 0) + 1;

	// Check if row is complete
	if (gameState.blocksInRow[row] >= blocksInRow) {
	gameState.blocksInRow[row + 1] = 0;
	}

	updateUI();

	// Check for win condition
	if (gameState.blocksStacked >= 10) {
	pauseGame();
	pauseTitle.textContent = translations[gameState.language].gameComplete;
	}

	// Create particles
	createParticles(block);
	} else {
	// Return to blocks area if no space
	block.style.position = 'relative';
	block.style.left = 'auto';
	block.style.top = 'auto';
	block.style.zIndex = 'auto';
	block.style.transform = '';
	block.style.filter = '';

	document.getElementById('blocks-area').appendChild(block);
	}
	}
	// Create particle effects
	function createParticles(element) {
	const rect = element.getBoundingClientRect();
	const centerX = rect.left + rect.width / 2;
	const centerY = rect.top + rect.height / 2;

	for (let i = 0; i < 15; i++) {
	const particle = document.createElement('div');
	particle.className = 'particle';

	const size = Math.random() * 5 + 2;
	particle.style.width = `${size}px`;
	particle.style.height = `${size}px`;

	const angle = Math.random() * Math.PI * 2;
	const distance = Math.random() * 30 + 10;
	const duration = Math.random() * 1 + 0.5;

	particle.style.left = `${centerX}px`;
	particle.style.top = `${centerY}px`;

	document.body.appendChild(particle);

	setTimeout(() => {
	particle.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;
	particle.style.opacity = '0';
	}, 10);

	setTimeout(() => {
	particle.remove();
	}, duration * 1000);
	}
	}

	// Pause/resume game
	function pauseGame() {
	gameState.isPaused = true;
	gameOverlay.classList.remove('hidden');
	pauseBtn.innerHTML = `<i data-feather="play"></i>`;
	feather.replace();
	}

	function resumeGame() {
	gameState.isPaused = false;
	gameOverlay.classList.add('hidden');
	pauseBtn.innerHTML = `<i data-feather="pause"></i>`;
	feather.replace();
	}

	// Toggle sound
	function toggleSound() {
	gameState.isMuted = !gameState.isMuted;
	soundBtn.innerHTML = `<i data-feather="${gameState.isMuted ? 'volume-x' : 'volume-2'}"></i>`;
	feather.replace();
	}

	// Update UI language
	function updateLanguage(lang) {
	gameState.language = lang;
	document.documentElement.lang = lang;
	document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';

	const texts = translations[lang];

	// Update UI text
	blocksCounter.textContent = `${texts.blocks}: ${gameState.blocksStacked}/10`;
	pauseBtn.innerHTML = `<i data-feather="pause"></i>`;
	restartBtn.innerHTML = `<i data-feather="refresh-cw"></i>`;
	pauseTitle.textContent = texts.gamePaused;
	resumeBtn.textContent = texts.resume;
	menuBtn.textContent = texts.backToMenu;

	// Update flag icon
	languageBtn.innerHTML = `<img src="https://flagcdn.com/w20/${lang === 'en' ? 'gb' : 'sa'}.png" class="w-5 h-5">`;

	feather.replace();
	}

	// Update UI elements
	function updateUI() {
	blocksCounter.textContent = `${translations[gameState.language].blocks}: ${gameState.blocksStacked}/10`;
	}
	// Setup event listeners
	function setupEventListeners() {
	pauseBtn.addEventListener('click', () => {
	if (gameState.isPaused) {
	resumeGame();
	} else {
	pauseGame();
	}
	});
	restartBtn.addEventListener('click', () => {
	// Reset game state
	gameState.blocksStacked = 0;
	gameState.isPaused = false;

	// Clear UI
	// Clear pyramid
	document.getElementById('construction-area').innerHTML =
	'<div id="pyramid-base" class="w-64 h-8 bg-yellow-800 rounded-sm"></div>';

	// Reset game state
	gameState.blocksInRow = {0: 0};

	// Regenerate blocks
	generateBlocks();
	// Update UI
	updateUI();
	gameOverlay.classList.add('hidden');
	pauseBtn.innerHTML = `<i data-feather="pause"></i>`;
	feather.replace();
	});

	soundBtn.addEventListener('click', toggleSound);

	languageBtn.addEventListener('click', () => {
	languageSelector.classList.toggle('hidden');
	});

	resumeBtn.addEventListener('click', resumeGame);
	menuBtn.addEventListener('click', () => {
	window.location.href = 'index.html';
	});

	homeBtn.addEventListener('click', () => {
	window.location.href = 'index.html';
	});
	// Language selection
	document.querySelectorAll('.language-option').forEach(option => {
	option.addEventListener('click', () => {
	updateLanguage(option.dataset.lang);
	languageSelector.classList.add('hidden');
	});
	});

	// Keyboard controls
	}

	// Initialize the game
	initGame();
	</script>
	</body>
	</html>