How to Make a Simple Ping Pong Game with Javascript

Pingpong js

In this article I will share how to make a game, namely the game ping pong . I got this game script code in Javascript Game Code .

How to make the game?, let's immediately see the following step by step.

Previously you prepared:

-Computer / PC or android phone can also

-Text Editor application

-Sincere Intentions

How to Make a Ping Pong Game:

Here's how to make a ping pong game with the notepad application, just take a good look at it.

Step one : Create an File index.html

Then please create html code like this:

<html></html> 
<head></head> 
<title>Making ping pong game</title> 
<style type="text/css">

//taruh file cssnya here 

</style> 
</div>
<body></body> 
//taruh file htmlnya disini 
<script type="text/javascript">

//js file here

</script>

Second step :
Copy the following html, css, javascript code:

<canvas height="400" id="pong" width="600"></canvas> 
Kode CSS 
body{ 
 background-color: dimgray; 
 } 
 #pong{ 
 border: 2px solid #FFF; 
 position: absolute; 
 margin :auto; 
 top:0; 
 right:0; 
 left:0; 
 bottom:0; 
 } 
Kode JAVASCRIPT 
// 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 ball.x="" computer="" else="" if="" win=""> canvas.width" the user win</0> 
 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);

Third step :
Click Save and click View

Ping Pong Game uses Javascript - Then please save the script code above, and drag the index.html file to the browser and see the results.

If there is an error maybe your code placement is wrong.

Conclusion

That was How to Make a Simple Ping Pong Game with Javascript, hopefully it will be useful and can be a reference.

If you have questions, criticisms and suggestions, please comment below.

Hatman

Hobi mengetik dan memasak serta menyukai teknologi dan tips dan trik yang unik

How to Make a Simple Ping Pong Game with Javascript

0 Response to "How to Make a Simple Ping Pong Game with Javascript "

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel