diff --git a/Games/Pong/README.md b/Games/Pong/README.md new file mode 100644 index 0000000000..c2919cb014 --- /dev/null +++ b/Games/Pong/README.md @@ -0,0 +1,30 @@ +# **Game_Name** + +Pong + +
+ +## **Description 📃** +- Pong is a classic arcade game that simulates table tennis. Players control paddles on either side of the screen, moving them vertically to hit a ball back and forth. + + +## **functionalities 🎮** +- Start: to start the game +- Restart: to restart the game +- Difficulty: choose difficulty level between easy/medium/hard + +
+ +## **How to play? 🕹ī¸** +- Click the Start button +- Use the up and down arrow keys to move your paddle. +- Score 5 points to win +- First to reach 5 points wins! + +
+ +## **Screenshots 📸** + +
+[image](/Games/Pong/assets/images/Pong.png) + diff --git a/Games/Pong/assets/images/Pong.png b/Games/Pong/assets/images/Pong.png new file mode 100644 index 0000000000..add46421f4 Binary files /dev/null and b/Games/Pong/assets/images/Pong.png differ diff --git a/Games/Pong/index.html b/Games/Pong/index.html new file mode 100644 index 0000000000..d90358e73a --- /dev/null +++ b/Games/Pong/index.html @@ -0,0 +1,39 @@ + + + + + + Pong Game + + + +
+
+ + + + +
+
+

How to Play

+

Use the up and down arrow keys to move your paddle.

+

Score 5 points to win.

+

First to reach 5 points wins!

+
+ +
+ + + + +
+
+
+ + + + diff --git a/Games/Pong/script.js b/Games/Pong/script.js new file mode 100644 index 0000000000..e1ec04d04f --- /dev/null +++ b/Games/Pong/script.js @@ -0,0 +1,257 @@ +const canvas = document.getElementById('pongCanvas'); +const context = canvas.getContext('2d'); + +const paddleWidth = 10, paddleHeight = 100; +const ballRadius = 10; +let upArrowPressed = false, downArrowPressed = false; +let gamePaused = true; + +const player = { + x: 0, + y: canvas.height / 2 - paddleHeight / 2, + width: paddleWidth, + height: paddleHeight, + color: '#fff', + score: 0 +}; + +const computer = { + x: canvas.width - paddleWidth, + y: canvas.height / 2 - paddleHeight / 2, + width: paddleWidth, + height: paddleHeight, + color: '#fff', + score: 0 +}; + +const ball = { + x: canvas.width / 2, + y: canvas.height / 2, + radius: ballRadius, + speed: 5, + velocityX: 5, + velocityY: 5, + color: '#05EDFF' +}; + +let difficultyLevel = 'easy'; // Default difficulty level + +function drawRect(x, y, w, h, color) { + context.fillStyle = color; + context.fillRect(x, y, w, h); +} + +function drawCircle(x, y, r, color) { + context.fillStyle = color; + context.beginPath(); + context.arc(x, y, r, 0, Math.PI * 2, false); + context.closePath(); + context.fill(); +} + +function drawText(text, x, y, color, font = '35px Arial') { + context.fillStyle = color; + context.font = font; + context.fillText(text, x, y); +} + +function render() { + drawRect(0, 0, canvas.width, canvas.height, '#000'); + + drawText(player.score, canvas.width / 4, canvas.height / 5, '#fff'); + drawText(computer.score, 3 * canvas.width / 4, canvas.height / 5, '#fff'); + + drawRect(player.x, player.y, player.width, player.height, player.color); + drawRect(computer.x, computer.y, computer.width, computer.height, computer.color); + + drawCircle(ball.x, ball.y, ball.radius, ball.color); +} + +function movePaddles() { + if (upArrowPressed && player.y > 0) { + player.y -= 8; + } else if (downArrowPressed && (player.y < canvas.height - player.height)) { + player.y += 8; + } + + + let computerSpeed = 6; + switch (difficultyLevel) { + case 'easy': + computerSpeed = 6; + break; + case 'medium': + computerSpeed = 8; + break; + case 'hard': + computerSpeed = 10; + break; + default: + computerSpeed = 6; + } + + let computerY = computer.y + computer.height / 2; + if (ball.y < computerY - 10) { + computer.y -= computerSpeed; + } else if (ball.y > computerY + 10) { + computer.y += computerSpeed; + } + if (computer.y < 0) { + computer.y = 0; + } else if (computer.y + computer.height > canvas.height) { + computer.y = canvas.height - computer.height; + } +} + +function update() { + if (!gamePaused) { + movePaddles(); + + ball.x += ball.velocityX; + ball.y += ball.velocityY; + + // Adjust ball speed based on difficulty level + switch (difficultyLevel) { + case 'easy': + ball.speed = 7; + break; + case 'medium': + ball.speed = 10; + break; + case 'hard': + ball.speed = 15; + break; + default: + ball.speed = 7; + } + + if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) { + ball.velocityY = -ball.velocityY; + } + + let playerPaddle = (ball.x < canvas.width / 2) ? player : computer; + + if (collision(ball, playerPaddle)) { + let collidePoint = (ball.y - (playerPaddle.y + playerPaddle.height / 2)); + collidePoint = collidePoint / (playerPaddle.height / 2); + + let angleRad = collidePoint * (Math.PI / 4); + + let direction = (ball.x < canvas.width / 2) ? 1 : -1; + ball.velocityX = direction * ball.speed * Math.cos(angleRad); + ball.velocityY = ball.speed * Math.sin(angleRad); + + ball.speed += 0.5; + } + + if (ball.x - ball.radius < 0) { + computer.score++; + if (computer.score >= 5) { + endGame(computer); + } else { + resetBall(); + } + } else if (ball.x + ball.radius > canvas.width) { + player.score++; + if (player.score >= 5) { + endGame(player); + } else { + resetBall(); + } + } + } +} + +function collision(b, p) { + b.top = b.y - b.radius; + b.bottom = b.y + b.radius; + b.left = b.x - b.radius; + b.right = b.x + b.radius; + + p.top = p.y; + p.bottom = p.y + p.height; + p.left = p.x; + p.right = p.x + p.width; + + return b.right > p.left && b.bottom > p.top && b.left < p.right && b.top < p.bottom; +} + +function resetBall() { + ball.x = canvas.width / 2; + ball.y = canvas.height / 2; + ball.speed = 5; + ball.velocityX = -ball.velocityX; +} + +function startGame() { + gamePaused = false; + document.getElementById('startButton').disabled = true; + document.getElementById('restartButton').disabled = false; +} + +function restartGame() { + gamePaused = true; + player.score = 0; + computer.score = 0; + resetBall(); + document.getElementById('startButton').disabled = false; + document.getElementById('restartButton').disabled = true; + + const resultDiv = document.querySelector('.result'); + resultDiv.innerHTML = ''; +} + +function endGame(winner) { + gamePaused = true; + + document.getElementById('startButton').disabled = true; + document.getElementById('restartButton').disabled = false; + + // Display winner + const resultDiv = document.querySelector('.result'); + resultDiv.innerHTML = ` +
+

Game Over

+

${winner === player ? 'Player' : 'Computer'} Wins!

 +

Press Restart to Play Again

+
+ `; +} + +function handleDifficultyChange() { + difficultyLevel = document.getElementById('difficulty').value; +} + +function gameLoop() { + update(); + render(); +} + +setInterval(gameLoop, 1000 / 60); + +window.addEventListener('keydown', (event) => { + switch (event.keyCode) { + case 38: + upArrowPressed = true; + break; + case 40: + downArrowPressed = true; + break; + } +}); + +window.addEventListener('keyup', (event) => { + switch (event.keyCode) { + case 38: + upArrowPressed = false; + break; + case 40: + downArrowPressed = false; + break; + } +}); + +document.getElementById('startButton').addEventListener('click', startGame); +document.getElementById('restartButton').addEventListener('click', restartGame); +document.getElementById('difficulty').addEventListener('change', handleDifficultyChange); + diff --git a/Games/Pong/styles.css b/Games/Pong/styles.css new file mode 100644 index 0000000000..5c86abb28e --- /dev/null +++ b/Games/Pong/styles.css @@ -0,0 +1,84 @@ +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background: #000; + font-family: Arial, sans-serif; +} + +canvas { + border: 1px solid #fff; +} +.container{ + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.result{ + color: white; + margin-top: -200px; + text-align: center; + margin-bottom: 100px; +} +.result span{ + color: yellow; + text-transform: uppercase; + font-weight: bold; +} +.game-info { + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + flex-direction: column; +} + +.instructions { + background-color: rgba(255, 255, 255, 0.8); + border: 1px solid #ccc; + border-radius: 4px; + width: 200px; + text-align: left; + font-size: 14px; + padding: 10px; + margin-bottom: 20px; +} + +.controls { + text-align: center; +} + +.controls button { + font-size: 18px; + margin: 0 10px; + padding: 10px 20px; + cursor: pointer; + background-color: #007BFF; + color: #fff; + border: none; + border-radius: 4px; + outline: none; + transition: background-color 0.3s ease; +} + +.controls button:hover { + background-color: #0056b3; +} + +.controls label { + margin-right: 10px; + font-size: 16px; +} + +.controls select { + font-size: 16px; + padding: 8px; + border-radius: 4px; + outline: none; +} diff --git a/README.md b/README.md index 3d0f1d2cb3..5bac3dd1a3 100644 --- a/README.md +++ b/README.md @@ -201,6 +201,7 @@ This repository also provides one such platforms where contributers come over an | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall) | | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [DoraemonRun ](https://github.com/kunjgit/GameZone/tree/main/Games/DoraemonRun) | | [Memory_Cards_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Cards_Game) | +| [Typing_Speed_Test2](https://github.com/kunjgit/GameZone/tree/main/Games/Typing_Speed_Test2) | [Tic Tac Toe Responsive ](https://github.com/kunjgit/GameZone/tree/main/Games/Tic_tac_toe_responsive) | [Minesweeper Easy ](https://github.com/kunjgit/GameZone/tree/main/Games/MineSweeper_Easy) | [Pong](https://github.com/kunjgit/GameZone/tree/main/Games/Pong) | | [Technical_Mind_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Technical_Mind_Game) | [Slide_Master_Puzzle](https://github.com/kunjgit/GameZone/tree/Main/Games/Slide_Master_Puzz)| | | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [Letter_Sleuth](https://github.com/swetha5157/GameZone/tree/main/Games/Letter_Sleuth) diff --git a/assets/images/Pong.png b/assets/images/Pong.png new file mode 100644 index 0000000000..add46421f4 Binary files /dev/null and b/assets/images/Pong.png differ