From 9da7df173016fa3c772fb89a68dcbdf7335a590a Mon Sep 17 00:00:00 2001 From: Peniel Mesele Date: Wed, 20 Dec 2023 23:33:10 +0300 Subject: [PATCH] first commit --- ponggame.css | 33 ++++++++ ponggame.html | 18 +++++ ponggame.js | 207 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 258 insertions(+) create mode 100644 ponggame.css create mode 100644 ponggame.html create mode 100644 ponggame.js diff --git a/ponggame.css b/ponggame.css new file mode 100644 index 0000000..ceb79d7 --- /dev/null +++ b/ponggame.css @@ -0,0 +1,33 @@ +#gameContainer { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +#gameBoard { + border: 3px solid; +} + +#scoreText { + font-family: 'Courier New', Courier, monospace; + font-size: 100px; + color: black; +} + +#resetButton{ +font-family: 'Courier New', Courier, monospace; +font-size: 22px; +width: 100px; +height: 50px; +border: 4px solid; +border: 15px; +cursor: pointer; +font-weight: bold ; +background-color: forestgreen; +border-radius: 15px; +} +.title{ + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 30px; + display: flex; +} \ No newline at end of file diff --git a/ponggame.html b/ponggame.html new file mode 100644 index 0000000..2339542 --- /dev/null +++ b/ponggame.html @@ -0,0 +1,18 @@ + + + + + + + Pong Game + + + +
+ +
0 : 0
+ +
+ + + \ No newline at end of file diff --git a/ponggame.js b/ponggame.js new file mode 100644 index 0000000..ee37e95 --- /dev/null +++ b/ponggame.js @@ -0,0 +1,207 @@ +const gameBoard = document.querySelector("#gameBoard"); +const ctx = gameBoard.getContext("2d"); +const scoreText = document.querySelector("#scoreText"); +const resetButton = document.querySelector("#resetButton"); +const gameWidth = gameBoard.width; +const gameHeight = gameBoard.height; +const boardBackground = "forestgreen"; +const paddle1Color = "black"; +const paddle2Color = "lightblack"; +const paddleBorder = "darkgrey"; +const ballColor = "white"; +const ballBoarderColor = "black"; +const ballRadius = 12.5; +const paddleSpeed= 50; +let intervalId; +let ballSpeed = 1; +let ballX = gameWidth / 2; +let ballY = gameHeight / 2; +let ballXDirection = 0; +let ballYDirection = 0; +let player1Score = 0; +let player2Score = 0; +let paddle1 = { + width : 25 , + height : 100 , + x: 0 , + y: 0 +}; +let paddle2 = { + width : 25 , + height : 100 , + x: gameWidth -25 , + y: gameHeight -100 +}; +window.addEventListener("keydown", changeDirection); +resetButton.addEventListener("click", resetGame); + +gameStart(); + + + + +function updateScore(){ + scoreText.textContent = `${player1Score} : ${player2Score}`; +}; + +function resetGame(){ + player1Score = 0; + player2Score = 0; + paddle1 = { + width: 25, + height: 100, + x: 0, + y:0 + }; + paddle2 = { + width: 25, + height: 100, + x: gameWidth - 25, + y: gameHeight - 100 + }; + ballSpeed = 1; + ballX = 0; + ballY = 0; + ballXDirection = 0; + ballYDirection = 0; + updateScore(); + clearInterval(intervalId); + gameStart(); + +}; + +function gameStart(){ + createBall(); + nextTick(); +}; + + +function nextTick(){ + intervalId = setTimeout(()=>{ + clearBoard(); + drawPaddles(); + moveBall(); + drawBall( ballX, ballY); + checkCollision(); + nextTick(); + + }, 10) +}; +function clearBoard(){ + ctx.fillStyle = boardBackground; + ctx.fillRect(0,0,500, 500); +}; + + + +function drawPaddles(){ + ctx.strokeStyle = paddleBorder; + + ctx.fillStyle = paddle1Color; + ctx.fillRect(paddle1.x , paddle1.y , paddle1.width, paddle1.height); + ctx.strokeRect(paddle1.x , paddle1.y , paddle1.width, paddle1.height); + + ctx.fillStyle = paddle2Color; + ctx.fillRect(paddle2.x , paddle2.y , paddle2.width, paddle2.height); + ctx.strokeRect(paddle2.x , paddle2.y , paddle2.width, paddle2.height); +} + + + +function createBall(){ + ballSpeed = 1; + if(Math.round(Math.random()) ==1){ + ballXDirection =1; + } + else{ + ballXDirection= -1; + } + if(Math.round(Math.random()) ==1){ + ballYDirection =1; + } + else{ + ballYDirection= -1; + } + ballX = gameWidth / 2; + ballY = gameHeight/ 2 ; + +}; +function moveBall(){ + ballX +=(ballSpeed * ballXDirection); + ballY +=(ballSpeed * ballYDirection); +}; +function drawBall(ballX, ballY){ + ctx.fillStyle = ballColor; + ctx.strokeStyle = ballBoarderColor; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.arc(ballX,ballY,ballRadius,0,2*Math.PI); + ctx.stroke(); + ctx.fill(); +}; +function checkCollision(){ + if(ballY <= 0 + ballRadius){ + ballYDirection *= -1; + } + if(ballY >= gameHeight - ballRadius){ + ballYDirection *= -1; + } + if(ballX <= 0){ + player2Score += 1; + updateScore(); + createBall(); + return; + } + if(ballX >= gameWidth){ + player1Score += 1; + updateScore(); + createBall(); + return; + } + if(ballX <= (paddle1.x + paddle1.width + ballRadius)){ + if(ballY > paddle1.y && ballY < paddle1.y + paddle1.height){ + ballX = (paddle1.x + paddle1.width) + ballRadius; + ballXDirection *= -1; + ballSpeed +=0.2; + } + } + if(ballX >= (paddle2.x - ballRadius)){ + if(ballY > paddle2.y && ballY < paddle2.y + paddle2.height){ + ballXDirection *= -1; + ballSpeed += 0.2; + } + } +}; + +function changeDirection(event){ + const keyPressed = event.keyCode; + console.log(keyPressed); + const paddle1Up = 87; + const paddle1Down = 83; + const paddle2Up = 38; + const paddle2Down = 40; + + switch(keyPressed){ + case(paddle1Up): + if(paddle1.y > 0){ + paddle1.y -= paddleSpeed; + } + break; + case(paddle1Down): + if(paddle1.y < gameHeight-paddle1.height){ + paddle1.y += paddleSpeed ; + } + break; + case(paddle2Up): + if(paddle2.y>0){ + paddle2.y -= paddleSpeed ; + } + break; + case(paddle2Down): + if(paddle2.y < gameHeight-paddle2.height){ + paddle2.y += paddleSpeed ; + break; + +} +}; +} \ No newline at end of file