Hugging Face's logo

Spaces:
FR1Eyad
/
undefined
Running

App Files Community
undefined / game.html
FR1Eyad's picture
FR1Eyad
redesign the game into another style
cafa739 verified
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>