diff --git a/Games/Color_Swap/index.html b/Games/Color_Swap/index.html new file mode 100644 index 0000000000..3d78f88730 --- /dev/null +++ b/Games/Color_Swap/index.html @@ -0,0 +1,22 @@ + + + + + + Color Swap + + + +
+ +
Score: 0
+
Game Over! You scored points!
+
+ + + + + + + + diff --git a/Games/Color_Swap/script.js b/Games/Color_Swap/script.js new file mode 100644 index 0000000000..cdfb02b194 --- /dev/null +++ b/Games/Color_Swap/script.js @@ -0,0 +1,140 @@ +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); +const scoreDisplay = document.getElementById('score'); +const gameOverMessage = document.getElementById('gameOverMessage'); +const finalScore = document.getElementById('finalScore'); +const startButton = document.getElementById('startButton'); + +const canvasWidth = canvas.width; +const canvasHeight = canvas.height; +const characterSize = 20; +const obstacleWidth = 60; +const obstacleHeight = 20; +const colors = ['red', 'blue', 'green', 'yellow']; + +let characterX = canvasWidth / 2 - characterSize / 2; +let characterY = canvasHeight - characterSize - 10; +let characterColor = colors[Math.floor(Math.random() * colors.length)]; +let obstacles = []; +let score = 0; +let gameInterval, obstacleInterval; +let gameActive = false; + +document.addEventListener('keydown', moveCharacter); + +function moveCharacter(event) { + if (!gameActive) return; + + switch (event.key) { + case 'ArrowLeft': + characterX -= 20; + if (characterX < 0) characterX = 0; + break; + case 'ArrowRight': + characterX += 20; + if (characterX > canvasWidth - characterSize) characterX = canvasWidth - characterSize; + break; + case 'ArrowUp': + characterY -= 20; + if (characterY < 0) characterY = 0; + break; + case 'ArrowDown': + characterY += 20; + if (characterY > canvasHeight - characterSize) characterY = canvasHeight - characterSize; + break; + } +} + +function createObstacle() { + const x = Math.random() * (canvasWidth - obstacleWidth); + const y = -obstacleHeight; + const color = colors[Math.floor(Math.random() * colors.length)]; + obstacles.push({ x, y, color }); +} + +function updateGame() { + if (!gameActive) return; + + ctx.clearRect(0, 0, canvasWidth, canvasHeight); + + // Draw character + ctx.fillStyle = characterColor; + ctx.fillRect(characterX, characterY, characterSize, characterSize); + + // Draw and move obstacles + for (let i = 0; i < obstacles.length; i++) { + const obstacle = obstacles[i]; + obstacle.y += 2; + + if (obstacle.y > canvasHeight) { + obstacles.splice(i, 1); + i--; + continue; + } + + ctx.fillStyle = obstacle.color; + ctx.fillRect(obstacle.x, obstacle.y, obstacleWidth, obstacleHeight); + + // Check collision + if ( + characterX < obstacle.x + obstacleWidth && + characterX + characterSize > obstacle.x && + characterY < obstacle.y + obstacleHeight && + characterY + characterSize > obstacle.y + ) { + if (characterColor === obstacle.color) { + score++; + scoreDisplay.innerText = `Score: ${score}`; + obstacles.splice(i, 1); + i--; + } else { + gameOver(); + return; + } + } + } + + // Change character color randomly + if (Math.random() < 0.01) { + characterColor = colors[Math.floor(Math.random() * colors.length)]; + } +} + +function startGame() { + score = 0; + characterX = canvasWidth / 2 - characterSize / 2; + characterY = canvasHeight - characterSize - 10; + characterColor = colors[Math.floor(Math.random() * colors.length)]; + obstacles = []; + scoreDisplay.innerText = `Score: ${score}`; + gameActive = true; + gameOverMessage.style.display = 'none'; + + clearInterval(gameInterval); + clearInterval(obstacleInterval); + + gameInterval = setInterval(updateGame, 20); + obstacleInterval = setInterval(createObstacle, 1000); +} + +function gameOver() { + gameActive = false; + clearInterval(gameInterval); + clearInterval(obstacleInterval); + + finalScore.innerText = score; + gameOverMessage.style.display = 'block'; + + setTimeout(() => { + gameOverMessage.style.display = 'none'; + startGame(); + }, 3000); +} + +startButton.addEventListener('click', () => { + startButton.style.display = 'none'; + startGame(); +}); + + + diff --git a/Games/Color_Swap/styles.css b/Games/Color_Swap/styles.css new file mode 100644 index 0000000000..a50538b5bf --- /dev/null +++ b/Games/Color_Swap/styles.css @@ -0,0 +1,76 @@ +body { + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #000; + font-family: 'Arial', sans-serif; + color: #0f0; +} + +#gameContainer { + position: relative; + width: 400px; + height: 600px; + border: 2px solid #0f0; + border-radius: 15px; + background-color: #111; + box-shadow: 0px 0px 20px #0f0; + display: flex; + justify-content: center; + align-items: center; +} + +#gameCanvas { + display: block; + border-radius: 15px 15px 0 0; + background-color: #222; + box-shadow: inset 0px 0px 10px #0f0; +} + +#score { + position: absolute; + top: 10px; + left: 10px; + font-size: 20px; + color: #0f0; + text-shadow: 0px 0px 5px #0f0; +} + +#startButton { + margin-top: 20px; + padding: 10px 20px; + background-color: #111; + color: #0f0; + border: 2px solid #0f0; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + box-shadow: 0px 0px 10px #0f0; +} + +#startButton:hover { + background-color: #0f0; + color: #111; + box-shadow: 0px 0px 20px #0f0; +} + +#gameOverMessage { + display: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 20px; + background-color: #111; + color: #0f0; + border: 2px solid #0f0; + border-radius: 10px; + font-size: 20px; + text-align: center; + box-shadow: 0px 0px 20px #0f0; + z-index: 10; +} +