#gameContainer { position: relative; width: 800px; height: 600px; border: 2px solid black; overflow: hidden; } #worldMap { width: 100%; height: 100%; background-image: url('world_map.jpg'); background-size: cover; } #player { position: absolute; width: 50px; height: 50px; background-color: red; border-radius: 50%; } document.addEventListener('DOMContentLoaded', function() { const player = document.getElementById('player'); const gameContainer = document.getElementById('gameContainer'); // Initial player position let playerX = 400; let playerY = 300; // Update player position function updatePlayerPosition() { player.style.left = playerX + 'px'; player.style.top = playerY + 'px'; } // Move player with arrow keys document.addEventListener('keydown', function(event) { const speed = 10; switch(event.key) { case 'ArrowUp': playerY = Math.max(0, playerY - speed); break; case 'ArrowDown': playerY = Math.min(gameContainer.clientHeight - player.clientHeight, playerY + speed); break; case 'ArrowLeft': playerX = Math.max(0, playerX - speed); break; case 'ArrowRight': playerX = Math.min(gameContainer.clientWidth - player.clientWidth, playerX + speed); break; } updatePlayerPosition(); }); });