Cara Membuat Game Ping Pong Dengan JavaScript

Oleh Xlight 10 Nov, 2021 Posting Komentar

Hallo sobat Pada artikel saya kali ini akan membahas tentang cara membuat Game Ping Pong dengan javascript. Langsung saja cara membuatnya

Cara Membuat Game Ping Pong dengan Javascript :

Pertama" kalian siapkan bahan² berikut ini:

• Aplikasi text editor; Notepad, acode, dll. Untuk apa? Untuk kalian edit" nantinya seperti menambah title nama anda atau sebagainya

• Niat yang tulus

• Jaringan seluler/Wifi. Tentunya:v

Jika sudah kalian siapkan bahan"nya silahkan kalian salin semua script di bawah ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
     <style>
         body 
{
    margin:0; padding:5px;
    background-color:#262626;
    user-select:none;    
    font-family: 'Sarabun', sans-serif;
    
    }

body:after
{     display:none; 
      content: url(https://dl-web.dropbox.com/s/9smc0vzt2oe6jfl/Ping%20Pong%20music%202.mp3?dl=0);
}
i
{    color:red; 
    margin:0px 2px 0px 2px;   
}

.tab, #status
{
    position:absolute ;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
    background-color:white;
    border-radius:10px;
    z-index:1; 
    width:95%;  height:75vh;
    padding:10px;
    box-sizing:border-box ;
    transition-duration:150ms;
}
img
{
    display:inline-block ;
    position:relative ;
    height:80px; width:80px;
    border-radius:10px;
    top:20px;
}
h3
{   
    display:inline-block ;
    color:dimgray;
    font-family: 'Press Start 2P', cursive;
    font-size:20px; margin:2px;
}
#info
{
    display:block ;
    position:relative;
    font-family: 'Sarabun', sans-serif;  margin:15px; margin-top:25px;
}
#easy, #hard , #impossible
{
    display:block ;
    position:relative ;
    padding:12px;
    font-family: 'Press Start 2P', cursive;
    background-color:#efefef;
    border:3px dashed #262626;
    font-size:15px;
    text-align:center;
    margin:10px; 
}

#status
{
    font-family: 'Press Start 2P', cursive;
    height:200px;
    visibility:hidden;
    transition-duration:100ms;
}

#result
{
    font-size:30px;
    margin:20px 10px 10px 10px;
}
button
{
    padding:20px;
    position:relative;
    outline:none;
    border:3px dashed #262626;
    border-radius:10px;
    background-color:green;
    color:white;
    font-family: 'Press Start 2P', cursive;
    font-size:18px;
    margin:8px; margin-top:25px;
    box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.3);
}
button:active {
    transform:scale(0.85);
    box-shadow:0px 0px 0px gray;
}

#canvas
{
    position:absolute ;    
    margin:auto;
    top:0;  left:0;
    bottom:0; right:0;
    background-color:dimgray;
    border:4px solid white;
    box-sizing:border-box;
    z-index:1;
    
}

#container
{   display:block;
    position:fixed;
    height:100vh; width:100vw;
    background-color:#262626;
    z-index:5;
}
#load
{
    font-size:18px;
    color:white;
    margin:auto; text-align:center;
    font-family: 'Aleo', serif;   
    user-select:none;
    z-index:10;
}

#loader
{
    display:block ;
    position:relative ;
    height:110px; width:110px;
    border-radius:50%;
    margin:auto; 
    margin-top:40%;
    background-image:-webkit-linear-gradient(left,#14ffe9,#ffeb3b,#ff00e0);
    animation:animate 0.5s linear infinite;
    border:7px solid white;
    user-select:none;
}
#loader:after
{
    content:'';
    position:absolute;
    margin:15px;
    height:80px; width:80px;
    border-radius:50%;
    background-color:#262626;
    opacity:0.9;
}
#loader > span
{
    display:block ;
    position:absolute ;
    height:100%; width:100%;
    border-radius:50%;
    margin:auto; 
    background-image:-webkit-linear-gradient(left,#14ffe9,#ffeb3b,#ff00e0);
}

#loader > span:nth-child(1)
{
    filter:blur(5px);
}
#loader > span:nth-child(2)
{
    filter:blur(10px);
}
#loader > span:nth-child(3)
{
    filter:blur(25px);
}
#loader > span:nth-child(4)
{
    filter:blur(45px);
}

@keyframes animate
{
    100%
    {
        transform:rotate(360deg);
    }
}

@keyframes pop
{
    0%
    { transform:scale(0.8); }
    34%
    { transform:scale(1); }
    66%
    { transform:scale(0.9); }
    100%
    { transform:scale(1); }
    
}

</style>
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scallable=no">
     
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="xlight">
    
 <title>🏓Ping pong[ 🎮 Game Yusup/Xlight ]</title>
        
       <link href="https://fonts.googleapis.com/css?family=Press+Start+2P|Sarabun" rel="stylesheet">
        
    </head>
    <body onload="document.getElementById('container').style.visibility='hidden',document.getElementsByClassName('tab')[0].style.animation='pop .27s ease'" 
    >
    
    <canvas id="canvas"></canvas>   
    
     
    <div id="container">
    <div id="loader"    >
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <br><br><br>
    <div id="load">Mohon Ditunggu Ngab...</div>
    </div>
 
 
    <div class="tab">
        <div id="logo" >
         <img src="https://dl.dropbox.com/s/vx5k1c8spw8tbkt/ping_pong_logo.png?dl=0" alt="Logo" /> <h3>Ping Pong</h3>
        </div>
        
        <div id="info"><b>ⓘ</b> First player to score 10 points wins .</div>
        
        <div class="level">
        
            <div id="easy" onclick="eas()">
                Beginner
            </div>
            <div id="hard" onclick="har()">
                Medium
            </div>
            <div id="impossible" onclick="imp()">
               <i class="fas fa-skull"></i> Impossible <i class="fas fa-skull"></i>
            </div>
        </div>
    </div>
    
    <div id="status">
        <center>
       <div id="result" >
         You Win   
        </div>     
        </center>
        <center>
         <button onclick="again()">main lagi tolol
</button>    
        </center>
       
    </div>
    
       
<audio id="music" autoplay loop>
    <source src="https://dl-web.dropbox.com/s/9smc0vzt2oe6jfl/Ping%20Pong%20music%202.mp3?dl=0" 
    type = "audio/mp3">

</audio>

</audio>

</audio> 
     <script>
         
var aiLevel = 0.03;
var run ;

// 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();
}

//to draw net
function drawNet()  {
    
    for(let i = 0; i<19;i ++)
    {
        drawRect(net.x + 15*i, net.y, net.width, net.height, net.color);
        
    }
}

//to draw text i.e points
function drawText(text,x,y)  {

ctx.fillStyle = "#FFF";
    ctx.font = "30px Sarabun";
    ctx.fillText(text, x, y);
}
 
// when ai or user scores, we reset the ball
function resetBall(){

ball.x = canvas.width/2;
    ball.y = canvas.height/2;
    ball.speed = 7.5;
    ball.dy=-ball.dy;
}

// collision detection
function collision(b,p,dir){
    
    p.top = p.y - dir*p.height;
    p.left = p.x - p.width/5;
    p.right = p.x + p.width + 20 ;
    
    b.top = b.y + dir*b.r;
    b.left = b.x - b.r ;
    b.right = b.x + b.r ;
    
    
var hitX = b.left > p.left && b.right < p.right;
    var hitY = false;
    if(dir === 1){
        hitY = b.dy > 0 && b.y >= p.top;
    }
    if(dir === -1){
        hitY = b.dy < 0 && b.y <= p.top + p.width/7;
    }
    
    return hitY && hitX;

}

//mousemove eventListener controls
window.addEventListener("mousemove",function(evt) {

user.x = evt.x - user.width ;
   evt.preventDefault();
   
   });
        
//touchmove eventListener controls
canvas.addEventListener("touchmove", function(e){
        var rect = canvas.getBoundingClientRect();
        var root = document.documentElement;
        var touch = e.changedTouches[0];
        var touchX = parseInt(touch.clientX) - rect.top - root.scrollTop ;
        e.preventDefault();
        user.x = touchX - (user.width/2);});
        
        
        
           
//keyboard controls
window.addEventListener("keydown",
function(e) {
  console.log(e);
  //arrow left
  if (e.key == "ArrowLeft") {
       user.x-=10;
  } //arrow right
  else if (e.key =="ArrowRight")  {    
       user.x+=10;
  }
});

//to update everything
function update () {
    
    //to change points
    if( ball.y - ball.r < 0 ) {
        user.point++;
        resetBall();

}else if( ball.y + ball.r >h ){
        ai.point++;
        resetBall();
    }
        
    //moving the ball
    ball.x += ball.dx;
    ball.y += ball.dy;    
  
   //to bounce off the ball from the edge  
   if(ball.x - ball.r - 2 < 0 || ball.x + ball.r + 2> w){
        ball.dx = -ball.dx;
    }
  
    // we check if the paddle hit the user or the ai paddle
  var player = (ball.y + ball.r < h/2)?ai:user;
   var dir =  (ball.y + ball.r < h/2)?-1:1;
   
     //After collision effect
     if(collision(ball,player,dir)&&(ball.x+ball.r+2<w)&&(ball.x-ball.r-2>0))
     {
       
      // we check where the ball hits the paddle
      let collidePoint =ball.x - (player.x+player.width/2);
      collidePoint = collidePoint / (player.width/2);

//angle  
        let angleRad = -(Math.PI/4) * collidePoint;

ball.dy = -dir*ball.speed * Math.cos(angleRad);

ball.dx = -dir*dir*ball.speed * Math.sin(angleRad);
        
        // speed up the ball everytime a paddle hits it.
        if(ball.speed<ball.maxSpeed)
        {  ball.speed += 0.63; }
}     
     //simple ai
      ai.x += (ball.x - (ai.x + ai.width/2))*aiLevel;   
              
}
    
//to draw everything
function render() {
    
    //clear previous builda
    ctx.clearRect(0,0,w,h);
    //the net
    drawNet();    
    //the ball
    drawArc(ball.x, ball.y, ball.r, ball.color);
    
    //user paddle
    drawRect(user.x, user.y, user.width, user.height, user.color);
    //ai paddle
    drawRect(ai.x, ai.y, ai.width, ai.height, ai.color); 
    
    //points
    drawText(ai.point,20,h/2-20);
    drawText(user.point,w-35,h/2 +45);  
}

//actual game
function game() {

render();  update();
    if(ai.point == 10)
    {   
        change('Mampus Kalah');  
        lose.volume=1;
        lose.play()   ;          
    }
    else if(user.point == 10)
    {
        change('Luh Menang Ngab');
        win.volume=1;
        win.play();
    }    
}

function change(txt)
{
        clearInterval(run);
        ai.point=0; user.point=0;
        music.pause();
        render();
        
document.getElementById("result").innerHTML= txt ;   document.getElementById('status').style.visibility='visible'; 
document.getElementById('status').style.transform='scale(1)'; 
document.getElementById('status').style.animation='pop .27s ease' ;     
        
}
run = setInterval(game,1000/fps);

}

function again()
{
document.getElementById('status').style.transform='scale(0)'; 
document.getElementById('status').style.animation='' ;  
    document.getElementsByClassName('tab')[0].style.transform='scale(1)';  
document.getElementsByClassName('tab')[0].style.animation='pop .27s ease' ;
  
}

//levels
function eas() {
    aiLevel = 0.035;    
    document.getElementById("easy").style.backgroundColor="cyan";
document.getElementById("hard").style.backgroundColor="#efefef";
document.getElementById("impossible").style.backgroundColor="#efefef";
    win.play();lose.play();
    init();
}
function har() {
    aiLevel = 0.065;
        document.getElementById("easy").style.backgroundColor="#efefef";
document.getElementById("hard").style.backgroundColor="cyan";
document.getElementById("impossible").style.backgroundColor="#efefef";
     win.play();lose.play();
     init();
    
}
function imp() {
    aiLevel = 0.4;
       document.getElementById("easy").style.backgroundColor="#efefef";
document.getElementById("hard").style.backgroundColor="#efefef";
document.getElementById("impossible").style.backgroundColor="cyan";

win.play();lose.play();
    init();
}

</script>
    </body>
</html>

Selanjutnya kalian buka aplikasi text editor klean -> Buat folder baru -> Tempel/Pastekan scriptnya -> Dan save game ping pong.html ea

selanjutnya kalian lihat hasilnya.

Atau kalian juga bisa Langsung Download buat kalian yang males untuk salin scriptnya kurang baik apa lagi saya>_<

Penutup

Sekian Tutorial saya kali ini Semoga Bermanfaat See you

Xlight Hanya Untuk Bersenang-Senang

Blog Xlight

Cara Membuat Game Ping Pong Dengan JavaScript

Cara Membuat Game Ping Pong dengan Javascript :

Penutup

Tidak ada komentar untuk "Cara Membuat Game Ping Pong Dengan JavaScript"

Posting Komentar