diff --git a/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/index.html b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/index.html new file mode 100644 index 0000000000..981a098462 --- /dev/null +++ b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/index.html @@ -0,0 +1,14 @@ + + + + + + + Pong_Game + + + + + + + \ No newline at end of file diff --git a/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/main.js b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/main.js new file mode 100644 index 0000000000..b2efcde15b --- /dev/null +++ b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/main.js @@ -0,0 +1,208 @@ +// select canvas element +const canvas = document.getElementById("pong"); + +// getContext of canvas = methods and properties to draw and do a lot of thing to the canvas +const ctx = canvas.getContext('2d'); + +// load sounds +let hit = new Audio(); +let wall = new Audio(); +let userScore = new Audio(); +let comScore = new Audio(); + +hit.src = "sounds/hit.mp3"; +wall.src = "sounds/wall.mp3"; +comScore.src = "sounds/comScore.mp3"; +userScore.src = "sounds/userScore.mp3"; + +// Ball object +const ball = { + x : canvas.width/2, + y : canvas.height/2, + radius : 10, + velocityX : 5, + velocityY : 5, + speed : 7, + color : "WHITE" +} + +// User Paddle +const user = { + x : 0, // left side of canvas + y : (canvas.height - 100)/2, // -100 the height of paddle + width : 10, + height : 100, + score : 0, + color : "WHITE" +} + +// COM Paddle +const com = { + x : canvas.width - 10, // - width of paddle + y : (canvas.height - 100)/2, // -100 the height of paddle + width : 10, + height : 100, + score : 0, + color : "WHITE" +} + +// NET +const net = { + x : (canvas.width - 2)/2, + y : 0, + height : 10, + width : 2, + color : "WHITE" +} + +// draw a rectangle, will be used to draw paddles +function drawRect(x, y, w, h, color){ + ctx.fillStyle = color; + ctx.fillRect(x, y, w, h); +} + +// draw circle, will be used to draw the ball +function drawArc(x, y, r, color){ + ctx.fillStyle = color; + ctx.beginPath(); + ctx.arc(x,y,r,0,Math.PI*2,true); + ctx.closePath(); + ctx.fill(); +} + +// listening to the mouse +canvas.addEventListener("mousemove", getMousePos); + +function getMousePos(evt){ + let rect = canvas.getBoundingClientRect(); + + user.y = evt.clientY - rect.top - user.height/2; +} + +// when COM or USER scores, we reset the ball +function resetBall(){ + ball.x = canvas.width/2; + ball.y = canvas.height/2; + ball.velocityX = -ball.velocityX; + ball.speed = 7; +} + +// draw the net +function drawNet(){ + for(let i = 0; i <= canvas.height; i+=15){ + drawRect(net.x, net.y + i, net.width, net.height, net.color); + } +} + +// draw text +function drawText(text,x,y){ + ctx.fillStyle = "#FFF"; + ctx.font = "75px fantasy"; + ctx.fillText(text, x, y); +} + +// collision detection +function collision(b,p){ + p.top = p.y; + p.bottom = p.y + p.height; + p.left = p.x; + p.right = p.x + p.width; + + b.top = b.y - b.radius; + b.bottom = b.y + b.radius; + b.left = b.x - b.radius; + b.right = b.x + b.radius; + + return p.left < b.right && p.top < b.bottom && p.right > b.left && p.bottom > b.top; +} + +// update function, the function that does all calculations +function update(){ + + // change the score of players, if the ball goes to the left "ball.x<0" computer win, else if "ball.x > canvas.width" the user win + if( ball.x - ball.radius < 0 ){ + com.score++; + comScore.play(); + resetBall(); + }else if( ball.x + ball.radius > canvas.width){ + user.score++; + userScore.play(); + resetBall(); + } + + // the ball has a velocity + ball.x += ball.velocityX; + ball.y += ball.velocityY; + + // computer plays for itself, and we must be able to beat it + // simple AI + com.y += ((ball.y - (com.y + com.height/2)))*0.1; + + // when the ball collides with bottom and top walls we inverse the y velocity. + if(ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height){ + ball.velocityY = -ball.velocityY; + wall.play(); + } + + // we check if the paddle hit the user or the com paddle + let player = (ball.x + ball.radius < canvas.width/2) ? user : com; + + // if the ball hits a paddle + if(collision(ball,player)){ + // play sound + hit.play(); + // we check where the ball hits the paddle + let collidePoint = (ball.y - (player.y + player.height/2)); + // normalize the value of collidePoint, we need to get numbers between -1 and 1. + // -player.height/2 < collide Point < player.height/2 + collidePoint = collidePoint / (player.height/2); + + // when the ball hits the top of a paddle we want the ball, to take a -45degees angle + // when the ball hits the center of the paddle we want the ball to take a 0degrees angle + // when the ball hits the bottom of the paddle we want the ball to take a 45degrees + // Math.PI/4 = 45degrees + let angleRad = (Math.PI/4) * collidePoint; + + // change the X and Y velocity direction + let direction = (ball.x + ball.radius < canvas.width/2) ? 1 : -1; + ball.velocityX = direction * ball.speed * Math.cos(angleRad); + ball.velocityY = ball.speed * Math.sin(angleRad); + + // speed up the ball everytime a paddle hits it. + ball.speed += 0.1; + } +} + +// render function, the function that does al the drawing +function render(){ + + // clear the canvas + drawRect(0, 0, canvas.width, canvas.height, "#000"); + + // draw the user score to the left + drawText(user.score,canvas.width/4,canvas.height/5); + + // draw the COM score to the right + drawText(com.score,3*canvas.width/4,canvas.height/5); + + // draw the net + drawNet(); + + // draw the user's paddle + drawRect(user.x, user.y, user.width, user.height, user.color); + + // draw the COM's paddle + drawRect(com.x, com.y, com.width, com.height, com.color); + + // draw the ball + drawArc(ball.x, ball.y, ball.radius, ball.color); +} +function game(){ + update(); + render(); +} +// number of frames per second +let framePerSecond = 50; + +//call the game function 50 times every 1 Sec +let loop = setInterval(game,1000/framePerSecond); diff --git a/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/sounds/sounds_comScore.mp3 b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/sounds/sounds_comScore.mp3 new file mode 100644 index 0000000000..b6a6ad15e2 Binary files /dev/null and b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/sounds/sounds_comScore.mp3 differ diff --git a/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/sounds/sounds_hit.mp3 b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/sounds/sounds_hit.mp3 new file mode 100644 index 0000000000..612a512ffc Binary files /dev/null and b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/sounds/sounds_hit.mp3 differ diff --git a/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/sounds/sounds_userScore.mp3 b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/sounds/sounds_userScore.mp3 new file mode 100644 index 0000000000..7e54924288 Binary files /dev/null and b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/sounds/sounds_userScore.mp3 differ diff --git a/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/sounds/sounds_wall.mp3 b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/sounds/sounds_wall.mp3 new file mode 100644 index 0000000000..120dc33a83 Binary files /dev/null and b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/sounds/sounds_wall.mp3 differ diff --git a/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/styles.css b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/styles.css new file mode 100644 index 0000000000..9ea83ea31a --- /dev/null +++ b/Program's_Contributed_By_Contributors/JavaScript_Programs/Pong_Game/styles.css @@ -0,0 +1,11 @@ +/* background-color: dimgray; */ + +#pong{ + border: 2px solid #FFF; + position: absolute; + margin :auto; + top:0; + right:0; + left:0; + bottom:0; +} \ No newline at end of file