diff --git a/Games/Soccer/README.md b/Games/Soccer/README.md new file mode 100644 index 0000000000..7cf796cc35 --- /dev/null +++ b/Games/Soccer/README.md @@ -0,0 +1,38 @@ +# **Soccer** + + +## **Description 📃** +It is a two player soccer game where the player with maximum number of goals is declared the winner. + + +
+ +## **Functionalities 🎮** + +Player must use the arrow keys and the a/s/d/w keys to move your player and aim a goal. The player with higher number of goals in the set time limit is declared as the winner. Enjoy a strategic and fun-filled challenge with dynamic movement of the players! + +
+ +## **How to play? 🕹ī¸** + +1. Start the game on your preferred platform. +2. Click on the start button to start the game. +3. Each player's goal is to aim a goal. Player with maximum goal is the winner. +4. Click on play again to play again. + +
+ +## **Installation** +1. Clone or download the repository. +2. Navigate to the downloaded repository. +3. Open index.html with live server. + + + + +
+ +## **Screenshots 📸** + +
+Game Screenshot diff --git a/Games/Soccer/index.html b/Games/Soccer/index.html new file mode 100644 index 0000000000..76c7716c77 --- /dev/null +++ b/Games/Soccer/index.html @@ -0,0 +1,24 @@ + + + + + + Soccer Penalty Shootout + + + +
+
+

Instructions

+

Player 1 uses keys W/A/S/D to move

+

Player 2 uses Arrow keys to move

+

The player with the most goals in 3 minutes wins!

+ +
+ + + +
+ + + diff --git a/Games/Soccer/script.js b/Games/Soccer/script.js new file mode 100644 index 0000000000..ad91e61b63 --- /dev/null +++ b/Games/Soccer/script.js @@ -0,0 +1,464 @@ +var canvas = document.getElementById("canvas"); +var c = canvas.getContext("2d"); +var out = document.getElementById("out"); +var timerDisplay = document.getElementById("timer"); +var instructions = document.getElementById("instructions"); +var startButton = document.getElementById("startButton"); + +window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; + +var player1 = new Player(100,250); +var player2 = new Player(600,250); +var ball = new Ball(350,250); +var wDown = false; +var sDown = false; +var aDown = false; +var dDown = false; +var upDown = false; +var downDown = false; +var leftDown = false; +var rightDown = false; +var timeLeft = 180; // 3 minutes in seconds +var gameInterval; + +function startGame(){ + instructions.style.display = 'none'; + canvas.style.display = 'block'; + out.style.display = 'block'; + timerDisplay.style.display = 'block'; + + gameInterval = setInterval(function(){ + timeLeft--; + updateTimer(); + if (timeLeft <= 0) { + clearInterval(gameInterval); + endGame(); + } + }, 1000); + requestAnimationFrame(start); +} + +startButton.addEventListener("click", startGame); + +function start(){ + clear(); + renderBackground(); + renderGates(); + checkKeyboardStatus(); + checkPlayersBounds(); + checkBallBounds(); + checkPlayers_BallCollision(); + movePlayers(); + moveBall(); + renderPlayers(); + renderBall(); + + out.innerHTML = "Player 1 Score: " + player1.score + "
Player 2 Score: " + player2.score; + requestAnimationFrame(start); +} + +function updateTimer() { + var minutes = Math.floor(timeLeft / 60); + var seconds = timeLeft % 60; + timerDisplay.innerHTML = "Time Left: " + minutes + ":" + (seconds < 10 ? "0" : "") + seconds; +} + +function endGame() { + var winner; + if (player1.score > player2.score) { + winner = "Player 1 Wins!"; + } else if (player2.score > player1.score) { + winner = "Player 2 Wins!"; + } else { + winner = "It's a Draw!"; + } + alert(winner); + resetGame(); +} + +function resetGame() { + player1 = new Player(100,250); + player2 = new Player(600,250); + ball = new Ball(350,250); + timeLeft = 180; + updateTimer(); + clearInterval(gameInterval); + instructions.style.display = 'block'; + canvas.style.display = 'none'; + out.style.display = 'none'; + timerDisplay.style.display = 'none'; +} + +function Ball(x,y){ + this.x = x; + this.y = y; + this.xVel = 0; + this.yVel = 0; + this.decel = 0.1; + this.size = 5; +} + +function Player(x,y){ + this.x = x; + this.y = y; + this.size = 20; + this.xVel = 0; + this.yVel = 0; + this.score = 0; + this.accel = 0.55; + this.decel = 0.55; + this.maxSpeed = 3; +} + +function reset(){ + var score1 = player1.score; + var score2 = player2.score; + player1 = new Player(100,250); + player1.score = score1; + player2 = new Player(600,250); + player2.score = score2; + ball = new Ball(350,250); + wDown = false; + sDown = false; + aDown = false; + dDown = false; + upDown = false; + downDown = false; + leftDown = false; + rightDown = false; +} + +function movePlayers(){ + player1.x += player1.xVel; + player1.y += player1.yVel; + player2.x += player2.xVel; + player2.y += player2.yVel; +} + +function checkPlayers_BallCollision(){ + var p1_ball_distance = getDistance(player1.x,player1.y,ball.x,ball.y) - player1.size - ball.size; + if(p1_ball_distance < 0){ + collide(ball,player1); + } + var p2_ball_distance = getDistance(player2.x,player2.y,ball.x,ball.y) - player2.size - ball.size; + if(p2_ball_distance < 0){ + collide(ball,player2); + } +} + +function collide(cir1,cir2){ + var dx = (cir1.x - cir2.x) / (cir1.size); + var dy = (cir1.y - cir2.y) / (cir1.size); + cir2.xVel = -dx; + cir2.yVel = -dy; + cir1.xVel = dx; + cir1.yVel = dy; +} + +function getDistance(x1,y1,x2,y2){ + return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2)); +} + +function moveBall(){ + if(ball.xVel !== 0){ + if(ball.xVel > 0){ + ball.xVel -= ball.decel; + if(ball.xVel < 0) ball.xVel = 0; + } else { + ball.xVel += ball.decel; + if(ball.xVel > 0) ball.xVel = 0; + } + } + if(ball.yVel !== 0){ + if(ball.yVel > 0){ + ball.yVel -= ball.decel; + if(ball.yVel < 0) ball.yVel = 0; + } else { + ball.yVel += ball.decel; + if(ball.yVel > 0) ball.yVel = 0; + } + } + ball.x += ball.xVel; + ball.y += ball.yVel; +} + +function checkBallBounds(){ + if(ball.x + ball.size > canvas.width){ + if(ball.y > 150 && ball.y < 350){ + player1.score++; + reset(); + return; + } + ball.x = canvas.width - ball.size; + ball.xVel *= -1.5; + } + if(ball.x - ball.size < 0){ + if(ball.y > 150 && ball.y < 350){ + player2.score++; + reset(); + return; + } + ball.x = 0 + ball.size; + ball.xVel *= -1.5; + } + if(ball.y + ball.size > canvas.height){ + ball.y = canvas.height - ball.size; + ball.yVel *= -1.5; + } + if(ball.y - ball.size < 0){ + ball.y = 0 + ball.size; + ball.yVel *= -1.5; + } +} + +function checkPlayersBounds(){ + if(player1.x + player1.size > canvas.width){ + player1.x = canvas.width - player1.size; + player1.xVel *= -0.5; + } + if(player1.x - player1.size < 0){ + player1.x = 0 + player1.size; + player1.xVel *= -0.5; + } + if(player1.y + player1.size > canvas.height){ + player1.y = canvas.height - player1.size; + player1.yVel *= -0.5; + } + if(player1.y - player1.size < 0){ + player1.y = 0 + player1.size; + player1.yVel *= -0.5; + } + if(player2.x + player2.size > canvas.width){ + player2.x = canvas.width - player2.size; + player2.xVel *= -0.5; + } + if(player2.x - player2.size < 0){ + player2.x = 0 + player2.size; + player2.xVel *= -0.5; + } + if(player2.y + player2.size > canvas.height){ + player2.y = canvas.height - player2.size; + player2.yVel *= -0.5; + } + if(player2.y - player2.size < 0){ + player2.y = 0 + player2.size; + player2.yVel *= -0.5; + } +} + +function checkKeyboardStatus(){ + if(wDown){ + if(player1.yVel > -player1.maxSpeed){ + player1.yVel -= player1.accel; + } else { + player1.yVel = -player1.maxSpeed; + } + } else { + if(player1.yVel < 0){ + player1.yVel += player1.decel; + if(player1.yVel > 0) player1.yVel = 0; + } + } + if(sDown){ + if(player1.yVel < player1.maxSpeed){ + player1.yVel += player1.accel; + } else { + player1.yVel = player1.maxSpeed; + } + } else { + if(player1.yVel > 0){ + player1.yVel -= player1.decel; + if(player1.yVel < 0) player1.yVel = 0; + } + } + if(aDown){ + if(player1.xVel > -player1.maxSpeed){ + player1.xVel -= player1.accel; + } else { + player1.xVel = -player1.maxSpeed; + } + } else { + if(player1.xVel < 0){ + player1.xVel += player1.decel; + if(player1.xVel > 0) player1.xVel = 0; + } + } + if(dDown){ + if(player1.xVel < player1.maxSpeed){ + player1.xVel += player1.accel; + } else { + player1.xVel = player1.maxSpeed; + } + } else { + if(player1.xVel > 0){ + player1.xVel -= player1.decel; + if(player1.xVel < 0) player1.xVel = 0; + } + } + + //PLAYER 2 + + if(upDown){ + if(player2.yVel > -player2.maxSpeed){ + player2.yVel -= player2.accel; + } else { + player2.yVel = -player2.maxSpeed; + } + } else { + if(player2.yVel < 0){ + player2.yVel += player2.decel; + if(player2.yVel > 0) player2.yVel = 0; + } + } + if(downDown){ + if(player2.yVel < player2.maxSpeed){ + player2.yVel += player2.accel; + } else { + player2.yVel = player2.maxSpeed; + } + } else { + if(player2.yVel > 0){ + player2.yVel -= player2.decel; + if(player2.yVel < 0) player2.yVel = 0; + } + } + if(leftDown){ + if(player2.xVel > -player2.maxSpeed){ + player2.xVel -= player2.accel; + } else { + player2.xVel = -player2.maxSpeed; + } + } else { + if(player2.xVel < 0){ + player2.xVel += player2.decel; + if(player2.xVel > 0) player2.xVel = 0; + } + } + if(rightDown){ + if(player2.xVel < player2.maxSpeed){ + player2.xVel += player2.accel; + } else { + player2.xVel = player2.maxSpeed; + } + } else { + if(player2.xVel > 0){ + player2.xVel -= player2.decel; + if(player2.xVel < 0) player2.xVel = 0; + } + } +} + +document.onkeyup = function(e){ + if(e.keyCode === 87){ + wDown = false; + } + if(e.keyCode === 65){ + aDown = false; + } + if(e.keyCode === 68){ + dDown = false; + } + if(e.keyCode === 83){ + sDown = false; + } + if(e.keyCode === 38){ + upDown = false; + } + if(e.keyCode === 37){ + leftDown = false; + } + if(e.keyCode === 40){ + downDown = false; + } + if(e.keyCode === 39){ + rightDown = false; + } +} + +document.onkeydown = function(e){ + if(e.keyCode === 87){ + wDown = true; + } + if(e.keyCode === 65){ + aDown = true; + } + if(e.keyCode === 68){ + dDown = true; + } + if(e.keyCode === 83){ + sDown = true; + } + if(e.keyCode === 38){ + upDown = true; + } + if(e.keyCode === 37){ + leftDown = true; + } + if(e.keyCode === 40){ + downDown = true; + } + if(e.keyCode === 39){ + rightDown = true; + } +} + +function renderBall(){ + c.save(); + c.beginPath(); + c.fillStyle = "black"; + c.arc(ball.x,ball.y,ball.size,0,Math.PI*2); + c.fill(); + c.closePath(); + c.restore(); +} + +function renderPlayers(){ + c.save(); + c.fillStyle = "red"; + c.beginPath(); + c.arc(player1.x,player1.y,player1.size,0,Math.PI*2); + c.fill(); + c.closePath(); + c.beginPath(); + c.fillStyle = "blue"; + c.arc(player2.x,player2.y,player2.size,0,Math.PI*2); + c.fill(); + c.closePath(); + c.restore(); +} + +function renderGates(){ + c.save(); + c.beginPath(); + c.moveTo(0,150); + c.lineTo(0,350); + c.strokeStyle = "red"; + c.lineWidth = 10; + c.stroke(); + c.closePath(); + c.beginPath(); + c.moveTo(canvas.width,150); + c.lineTo(canvas.width,350); + c.strokeStyle = "blue"; + c.lineWidth = 10; + c.stroke(); + c.closePath(); + c.restore(); +} + +function renderBackground(){ + c.save(); + c.fillStyle = "#66aa66"; + c.fillRect(0,0,canvas.width,canvas.height); + c.strokeStyle = "rgba(255,255,255,0.6)"; + c.beginPath(); + c.arc(canvas.width/2,canvas.height/2,150,0,Math.PI*2); + c.closePath(); + c.lineWidth = 10; + c.stroke(); + c.restore(); +} + +function clear(){ + c.clearRect(0,0,canvas.width,canvas.height); +} diff --git a/Games/Soccer/style.css b/Games/Soccer/style.css new file mode 100644 index 0000000000..af2b68fc9f --- /dev/null +++ b/Games/Soccer/style.css @@ -0,0 +1,41 @@ +body{ + background-image: url('https://wallpapers.com/images/hd/plain-green-background-vjb4wrgir58bpssc.jpg'); + margin: 10px; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + font-family: Arial, sans-serif; +} + +.game-container { + text-align: center; + background-color: #ffffff; + padding: 20px; + border: 2px solid #000000; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); +} + +#instructions { + margin-bottom: 20px; +} + +#out { + color: black; + font-size: 24px; + font-weight: bold; + margin-top: 20px; +} + +canvas { + background-color: white; + border: 2px solid black; + margin-top: 20px; +} + +#timer { + font-size: 24px; + font-weight: bold; + margin-top: 20px; +} diff --git a/README.md b/README.md index fc1073d1f9..2fa2b1eb94 100644 --- a/README.md +++ b/README.md @@ -251,7 +251,7 @@ This repository also provides one such platforms where contributers come over an | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner) | | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon) | -| [Tower Stack](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Stack) | +| [Tower Stack](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Stack) | [Soccer](https://github.com/kunjgit/GameZone/tree/main/Games/Soccer) | | [TriHand_Tactics](https://github.com/kunjgit/GameZone/tree/main/Games/TriHand_Tactics) | | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian) | | [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall) | diff --git a/assets/images/Soccer.png b/assets/images/Soccer.png new file mode 100644 index 0000000000..b9b19aa4a1 Binary files /dev/null and b/assets/images/Soccer.png differ diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json index d5d2d47bf6..0b139faa80 100644 --- a/assets/js/gamesData.json +++ b/assets/js/gamesData.json @@ -2102,11 +2102,25 @@ "gameTitle": "Guess_The_Song", "gameUrl": "Guess_The_Song", "thumbnailUrl": "Guess_The_Song.png" -},"417":{ + } +},"408":{ "gameTitle": "Brick Buster", "gameUrl": "Brick Buster", "thumbnailUrl": "Brick.png" - } + }, + "417":{ + "gameTitle": "Soccer", + "gameUrl": "Soccer", + "thumbnailUrl": "Soccer" +}, +"409":{"gameTitle": "Pen_Pointer_Fight", +"gameUrl": "PenPointerFight", +"thumbnailUrl": "PenPointerFight.png" +}, +"418":{ +"gameTitle": "MathQuiz", +"gameUrl": "MathQuiz", +"thumbnailUrl": "MathQuiz.png" +} } - diff --git a/assets/js/index.js b/assets/js/index.js index 86f599b40f..6bf16f73ff 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -4,7 +4,7 @@ const generateLiTags = (gamesData, searchText = "") => { const liTags = []; searchText = searchText.trim().toLowerCase(); // Trim whitespace and convert to lowercase - for (let tagNumber = 1; tagNumber <= 417; tagNumber++) { + for (let tagNumber = 1; tagNumber <= 418; tagNumber++) { const gameData = gamesData[tagNumber.toString()]; if (gameData) {