Pixel Quest Shop

0

Blue Skin

50 coins

Red Skin

100 coins

Speed Boost

75 coins

/* Existing styles... */ .game-container { display: flex; flex-direction: column; height: 100vh; background-color: #111; } .game-header { display: flex; justify-content: space-between; padding: 10px 20px; background-color: #222; align-items: center; } .player-info { display: flex; align-items: center; gap: 10px; font-size: 18px; } .coin-icon { width: 20px; height: 20px; } #gameCanvas { background-color: #000; display: block; margin: 0 auto; border: 2px solid #333; } .game-controls { display: flex; justify-content: center; gap: 20px; padding: 15px; background-color: #222; } .shop-container { max-width: 800px; margin: 0 auto; padding: 20px; text-align: center; } .shop-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; } .item { background-color: #333; padding: 15px; border-radius: 8px; transition: transform 0.3s; } .item:hover { transform: scale(1.05); } .item img { width: 100px; height: 100px; object-fit: contain; } .buy-btn { background-color: #4CAF50; padding: 8px 15px; margin-top: 10px; } .back-btn { background-color: #f39c12; padding: 10px 20px; font-size: 16px; } /* Animations */ @keyframes coinSpin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } .coin-icon { animation: coinSpin 2s infinite linear; } /* Difficulty selector */ .difficulty-selector select { padding: 5px; background-color: #444; color: white; border: 1px solid #555; border-radius: 4px; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const difficultySelect = document.getElementById('difficulty'); const pauseBtn = document.getElementById('pauseBtn'); canvas.width = 800; canvas.height = 500; // Game state let gameRunning = true; let score = 0; let coins = 0; let difficulty = 'easy'; let gameSpeed = 1; // Player const player = { x: 50, y: canvas.height / 2, width: 30, height: 50, speed: 5, color: '#3498db', items: [] }; // Coins const coinsArray = []; const enemiesArray = []; // Game loop function gameLoop() { if (!gameRunning) return; // Clear canvas ctx.fillStyle = '#111'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Update and draw player drawPlayer(); // Generate coins and enemies if (Math.random() < 0.02) { createCoin(); } if (Math.random() < 0.01) { createEnemy(); } // Update and draw coins updateCoins(); // Update and draw enemies updateEnemies(); // Display score ctx.fillStyle = 'white'; ctx.font = '20px Arial'; ctx.fillText(`Score: ${score}`, 20, 30); requestAnimationFrame(gameLoop); } function drawPlayer() { ctx.fillStyle = player.color; ctx.fillRect(player.x, player.y, player.width, player.height); } function createCoin() { coinsArray.push({ x: canvas.width, y: Math.random() * (canvas.height - 20), width: 20, height: 20, speed: 2 * gameSpeed }); } function createEnemy() { const enemySpeed = difficulty === 'easy' ? 3 : difficulty === 'medium' ? 5 : 7; enemiesArray.push({ x: canvas.width, y: Math.random() * (canvas.height - 30), width: 30, height: 30, speed: enemySpeed * gameSpeed, color: '#e74c3c' }); } function updateCoins() { for (let i = 0; i < coinsArray.length; i++) { const coin = coinsArray[i]; coin.x -= coin.speed; // Draw coin ctx.fillStyle = '#f1c40f'; ctx.beginPath(); ctx.arc(coin.x + coin.width/2, coin.y + coin.height/2, coin.width/2, 0, Math.PI * 2); ctx.fill(); // Check collision with player if ( player.x < coin.x + coin.width && player.x + player.width > coin.x && player.y < coin.y + coin.height && player.y + player.height > coin.y ) { coinsArray.splice(i, 1); score += 10; coins += 1; updatePlayerStats(); continue; } // Remove if off screen if (coin.x + coin.width < 0) { coinsArray.splice(i, 1); } } } function updateEnemies() { for (let i = 0; i < enemiesArray.length; i++) { const enemy = enemiesArray[i]; enemy.x -= enemy.speed; // Draw enemy ctx.fillStyle = enemy.color; ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height); // Check collision with player if ( player.x < enemy.x + enemy.width && player.x + player.width > enemy.x && player.y < enemy.y + enemy.height && player.y + player.height > enemy.y ) { gameOver(); return; } // Remove if off screen if (enemy.x + enemy.width < 0) { enemiesArray.splice(i, 1); } } } function gameOver() { gameRunning = false; ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'white'; ctx.font = '40px Arial'; ctx.textAlign = 'center'; ctx.fillText('Game Over!', canvas.width/2, canvas.height/2); ctx.font = '20px Arial'; ctx.fillText(`Final Score: ${score}`, canvas.width/2, canvas.height/2 + 40); // Save score saveScore(); } function saveScore() { const currentUser = localStorage.getItem('currentUser'); if (currentUser) { const users = JSON.parse(localStorage.getItem('users')) || []; const userIndex = users.findIndex(u => u.username === currentUser); if (userIndex !== -1) { users[userIndex].score = Math.max(users[userIndex].score || 0, score); users[userIndex].coins = (users[userIndex].coins || 0) + coins; localStorage.setItem('users', JSON.stringify(users)); } } } function updatePlayerStats() { const playerNameEl = document.getElementById('playerName'); const coinsEl = document.getElementById('coins'); const currentUser = localStorage.getItem('currentUser'); if (currentUser) { playerNameEl.textContent = currentUser; } coinsEl.textContent = coins; } // Controls window.addEventListener('keydown', (e) => { if (!gameRunning) return; switch(e.key) { case 'ArrowUp': player.y = Math.max(0, player.y - player.speed); break; case 'ArrowDown': player.y = Math.min(canvas.height - player.height, player.y + player.speed); break; } }); difficultySelect.addEventListener('change', (e) => { difficulty = e.target.value; gameSpeed = difficulty === 'easy' ? 1 : difficulty === 'medium' ? 1.5 : 2; }); pauseBtn.addEventListener('click', () => { gameRunning = !gameRunning; pauseBtn.textContent = gameRunning ? 'Pause' : 'Resume'; if (gameRunning) gameLoop(); }); // Initialize updatePlayerStats(); gameLoop(); document.addEventListener('DOMContentLoaded', () => { const currentUser = localStorage.getItem('currentUser'); const users = JSON.parse(localStorage.getItem('users')) || []; const user = users.find(u => u.username === currentUser); if (user) { document.getElementById('shopCoins').textContent = user.coins || 0; } document.querySelectorAll('.buy-btn').forEach(btn => { btn.addEventListener('click', function() { const price = parseInt(this.getAttribute('data-price')); const item = this.getAttribute('data-item'); if (user && user.coins >= price) { user.coins -= price; user.items.push(item); localStorage.setItem('users', JSON.stringify(users)); document.getElementById('shopCoins').textContent = user.coins; alert(`Purchased ${item} successfully!`); } else { alert('Not enough coins!'); } }); }); });