RPG Game

HP: 100

XP: 0

body { font-family: sans-serif; margin: 0; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; } #game-container { display: flex; border: 1px solid #ccc; } #game-area { position: relative; width: 400px; height: 400px; background-color: #ddd; display: grid; grid-template-columns: repeat(20, 20px); /* 20x20 grid */ grid-template-rows: repeat(20, 20px); } #player { width: 20px; height: 20px; background-color: blue; } #sword { position: absolute; width: 20px; height: 20px; background-color: rgba(255, 255, 255, 0.5); /* Sword area, transparent white */ left: 20px; /* Default sword position to the right */ } .enemy { width: 20px; height: 20px; background-color: red; } #ui-area { width: 200px; padding: 10px; background-color: #eee; display: flex; flex-direction: column; } #stats, #shop { margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; background-color: white; } #shop-items button { display: block; margin-bottom: 5px; } const player = document.getElementById('player'); const sword = document.getElementById('sword'); const enemies = document.querySelectorAll('.enemy'); const gameArea = document.getElementById('game-area'); const hpDisplay = document.getElementById('hp'); const xpDisplay = document.getElementById('xp'); const shopItems = document.getElementById('shop-items'); const openShopButton = document.getElementById('open-shop'); let playerX = 0; // grid positions let playerY = 0; // grid positions let playerHP = 100; let playerXP = 0; let weaponRange = 1; // Default sword range let currentWeapon = 'sword'; let enemySpeed = 2; // Enemy moves 2 grid units at a time function updatePosition() { player.style.gridColumnStart = playerX + 1; player.style.gridRowStart = playerY + 1; } function checkCollisions() { enemies.forEach(enemy => { if (isCollision(player, enemy)) { playerHP -= 1; hpDisplay.innerText = `HP: ${playerHP}`; } if (isSwordCollision(enemy)) { enemy.remove(); playerXP += 1; // Reduced XP gain, VERY HARD now xpDisplay.innerText = `XP: ${playerXP}`; } }); } function isCollision(rect1, rect2) { const r1 = rect1.getBoundingClientRect(); const r2 = rect2.getBoundingClientRect(); return !(r1.bottom < r2.top || r1.top > r2.bottom || r1.right < r2.left || r1.left > r2.right); } function isSwordCollision(enemyRect) { const enemyGridX = parseInt(enemyRect.style.gridColumnStart) - 1; const enemyGridY = parseInt(enemyRect.style.gridRowStart) - 1; const dx = Math.abs(enemyGridX - playerX); const dy = Math.abs(enemyGridY - playerY); return (dx <= weaponRange && dy === 0) || (dy <= weaponRange && dx === 0); // Basic adjacent range check } document.addEventListener('keydown', (event) => { let newX = playerX; let newY = playerY; switch (event.key) { case 'w': newY -= 1; break; case 's': newY += 1; break; case 'a': newX -= 1; break; case 'd': newX += 1; break; case ' ': // Attack swordAttack(); break; } if (isValidMove(newX, newY)) { playerX = newX; playerY = newY; updatePosition(); checkCollisions(); } }); function isValidMove(x, y) { return x >= 0 && x < 20 && y >= 0 && y < 20; // Assuming 20x20 grid boundaries } function swordAttack() { sword.style.backgroundColor = 'white'; setTimeout(() => { sword.style.backgroundColor = 'rgba(255, 255, 255, 0.5)'; }, 100); enemies.forEach(enemy => { if (isSwordCollision(enemy)) { enemy.remove(); playerXP += 1; // Reduced XP gain, VERY HARD now xpDisplay.innerText = `XP: ${playerXP}`; } }); } openShopButton.addEventListener('click', () => { shopItems.style.display = shopItems.style.display === 'none' ? 'block' : 'none'; }); shopItems.addEventListener('click', (event) => { if (event.target.tagName === 'BUTTON') { const weapon = event.target.dataset.weapon; const range = parseInt(event.target.dataset.range); const cost = parseInt(event.target.dataset.cost); if (playerXP >= cost) { playerXP -= cost; xpDisplay.innerText = `XP: ${playerXP}`; weaponRange = range; currentWeapon = weapon; alert(`Purchased ${weapon} with range ${range}`); shopItems.style.display = 'none'; // Close shop after purchase } else { alert('Not enough XP!'); } } }); // Enemy positioning and movement enemies.forEach(enemy => { let enemyX, enemyY; do { enemyX = Math.floor(Math.random() * 20); enemyY = Math.floor(Math.random() * 20); } while (enemyX === playerX && enemyY === playerY); // Avoid enemy on player start enemy.style.gridColumnStart = enemyX + 1; enemy.style.gridRowStart = enemyY + 1; // Enemy AI to chase player setInterval(() => { let currentEnemyX = parseInt(enemy.style.gridColumnStart) - 1; let currentEnemyY = parseInt(enemy.style.gridRowStart) - 1; let dx = playerX - currentEnemyX; let dy = playerY - currentEnemyY; if (Math.abs(dx) > Math.abs(dy)) { currentEnemyX += Math.sign(dx) * enemySpeed; } else { currentEnemyY += Math.sign(dy) * enemySpeed; } if (isValidMove(currentEnemyX, currentEnemyY)) { // Ensure enemy stays in bounds enemy.style.gridColumnStart = currentEnemyX + 1; enemy.style.gridRowStart = currentEnemyY + 1; } checkCollisions(); // Check for collisions after enemy moves }, 300); // Enemy move interval, adjust for speed }); updatePosition();