diff --git a/SinglePlayer - Games/Shadow clone/index.html b/SinglePlayer - Games/Shadow clone/index.html new file mode 100644 index 00000000..980d971e --- /dev/null +++ b/SinglePlayer - Games/Shadow clone/index.html @@ -0,0 +1,17 @@ + + + + + + Shadow Clone + + + +
+
+
+ + + + + diff --git a/SinglePlayer - Games/Shadow clone/script.js b/SinglePlayer - Games/Shadow clone/script.js new file mode 100644 index 00000000..e87e9cc7 --- /dev/null +++ b/SinglePlayer - Games/Shadow clone/script.js @@ -0,0 +1,63 @@ +document.addEventListener('DOMContentLoaded', () => { + const player = document.getElementById('player'); + const gameContainer = document.getElementById('game-container'); + const cloneButton = document.getElementById('clone-button'); + const resetButton = document.getElementById('reset-button'); + let clones = []; + + let playerPosition = { x: 10, y: 10 }; + let moveDistance = 10; + + function updatePlayerPosition() { + player.style.left = playerPosition.x + 'px'; + player.style.top = playerPosition.y + 'px'; + } + + function createClone() { + const clone = document.createElement('div'); + clone.classList.add('clone'); + clone.style.left = playerPosition.x + 'px'; + clone.style.top = playerPosition.y + 'px'; + gameContainer.appendChild(clone); + clones.push(clone); + } + + function resetGame() { + playerPosition = { x: 10, y: 10 }; + updatePlayerPosition(); + clones.forEach(clone => gameContainer.removeChild(clone)); + clones = []; + } + + function movePlayer(e) { + switch (e.key) { + case 'ArrowUp': + if (playerPosition.y - moveDistance >= 0) { + playerPosition.y -= moveDistance; + } + break; + case 'ArrowDown': + if (playerPosition.y + moveDistance <= gameContainer.clientHeight - player.clientHeight) { + playerPosition.y += moveDistance; + } + break; + case 'ArrowLeft': + if (playerPosition.x - moveDistance >= 0) { + playerPosition.x -= moveDistance; + } + break; + case 'ArrowRight': + if (playerPosition.x + moveDistance <= gameContainer.clientWidth - player.clientWidth) { + playerPosition.x += moveDistance; + } + break; + } + updatePlayerPosition(); + } + + document.addEventListener('keydown', movePlayer); + cloneButton.addEventListener('click', createClone); + resetButton.addEventListener('click', resetGame); + + updatePlayerPosition(); +}); diff --git a/SinglePlayer - Games/Shadow clone/styles.css b/SinglePlayer - Games/Shadow clone/styles.css new file mode 100644 index 00000000..ae6bfa62 --- /dev/null +++ b/SinglePlayer - Games/Shadow clone/styles.css @@ -0,0 +1,45 @@ +body { + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + background-color: #282c34; + color: white; + font-family: Arial, sans-serif; +} + +#game-container { + position: relative; + width: 500px; + height: 500px; + background-color: #444; + border: 2px solid #fff; + margin-top: 20px; +} + +#player, .clone { + position: absolute; + width: 20px; + height: 20px; + background-color: #61dafb; +} + +#clone-button, #reset-button { + margin: 10px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; +} + +#clone-button { + background-color: #61dafb; + border: none; + color: #282c34; +} + +#reset-button { + background-color: #ff6f61; + border: none; + color: #fff; +}