Membuat game gunting batu kertas dengan javascript

Selamat pagi teman-teman sekalian. Pada tutorial kali ini saya pengen memberikan tutorial membuat game gunting batu kertas dengan javascript.

Saya akan membagikan source codenya kepada teman-teman, sehingga kalian bisa pakai dan bisa memodifikasinya.

Langsung aja ketutorialnya.
1. Buat Struktur folder seperti dibawah ini.
2. Buka text editor kalian (sublime,vs.notepad++ dll).
3. Buat sebuah file index.html, dan pastekan kode dibawah ini

Code:

<html lang="en">
<head>
 <title>Rocks-Pappers-Scissors</title>
 <link href="style.css" rel="stylesheet"></link>
 <style>
  .score{
   border-top: 2px solid white;
   border-bottom: 2px solid white;
   border-right:2px solid #333;
   border-left: 2px solid lightskyblue;
   z-index: 200;
   position: absolute;
   width: 200px;
   height: 70px;
   top:50px;
   left: 300px;
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="judul">
   <h1>
The Battle Begins</h1>
</div>
<div class="role cf">
  <div class="player">
<ul>
<li>
<div class="rockI">
    <img alt="" class="rock" src="img/rock.png" /> 
    </div>
</li>
<li>
<div class="papperI">
<img alt="" class="papper" src="img/papper.png" />
</div>
</li>
<li>
<div class="scissorI">
<img alt="" class="scissor" src="img/scissor.png" />

</div>
</li>
</ul>
<div class="score">
 <div class="labelp">
User</div>
<div class="labelc">
Comp</div>
<div class="scoreP">
   </div>
<div class="scoreC">
</div>
</div>
<div class="info ">
<h3>
</h3>
</div>
<div class="vs">
<h1>
VS</h1>
</div>
</div>
<div class="comp">
 <div class="compopt">
  <img alt="" class="img-computer" src="img/rock.png" />
 </div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Diatas adalah koding dari HTML 5 biasa.

Note : Perhatikan kode yang bercetak tebal, itu adalah nama file dari gambar yang akan digunakan di game ini, pastikan kalian punya gambar dengan nama yang sama, atau untuk menggunakan gambar yang sama dengan gambar yang saya gunakan kalian bisa download disini.

4. Selanjutnya kalian buat satu file lagi dengan nama script.js, lalu buka file script.js dan masukan kode dibawah ini.

Code:

let scoreP =1;
let scoreC=1;
function getComp() {
 let comp = Math.random();
 if(comp <= 0.34) return 'rock';
 if(comp > 0.34 && comp <= 0.64) return 'papper';
 if(comp > 0.64) return 'scissor';
}


function loop() {
 let img = ['rock','papper','scissor'];
 let date = new Date().getTime();
 let i =0;
 setInterval(function(){
  if(new Date().getTime() - date > 1000) {
   clearInterval;
   return;
  }
  imgComp.setAttribute('src','img/'+ img[i++] + '.png');
  if(i == img.length) i=0;
 },100);
}

function result(comp,player) {
 if(player == comp) return 'DRAW';
 if(player == 'rock') return(comp == 'papper') ? 'YOU LOSE' : 'YOU WIN';
 if(player == 'papper') return(comp == 'scissor') ? 'YOU LOSE' : 'YOU WIN';
 if(player == 'scissor') return(comp == 'rock') ? 'YOU LOSE' : 'YOU WIN';
 // console.log(comp,player);
}
const scorePlayer = document.querySelector('.scoreP');
const scoreComp = document.querySelector('.scoreC');
const info = document.querySelector('.info h3');
const imgComp = document.querySelector('.comp .compopt .img-computer');
const procesS = document.querySelectorAll('li img');
procesS.forEach(function(opt) {
 opt.addEventListener('click',function() {
  let player = opt.className;
  let comp = getComp();
  loop();
  setTimeout(function () {
   let result2 = result(comp,player);
   info.innerHTML = result2;
   imgComp.setAttribute('src','img/'+comp+'.png'); 

   if(result2 == 'YOU WIN') {
    scorePlayer.innerHTML = scoreP++;
   }else if(result2 == 'YOU LOSE') {
    scoreComp.innerHTML = scoreC++;
   }

  },1000);

 });
});

Penjelasan kode:

code :

let scoreP =1;

let scoreC=1;

function getComp() {
 let comp = Math.random();
 if(comp <= 0.34) return 'rock';
 if(comp > 0.34 && comp <= 0.64) return 'papper';
 if(comp > 0.64) return 'scissor';
}

Untuk menginisialisasi keadaan score awal dan function getComp() untuk memuat logika atau otak komputer sehingg komputer bisa memilih sendiri pilihan nya dengan menggunakan bilangan random dari 0 sampai 1.

Code:

function loop() {

 let img = ['rock','papper','scissor'];
 let date = new Date().getTime();
 let i =0;
 setInterval(function(){
  if(new Date().getTime() - date > 1000) {
   clearInterval;
   return;
  }
  imgComp.setAttribute('src','img/'+ img[i++] + '.png');
  if(i == img.length) i=0;
 },100);
}

function result(comp,player) {
 if(player == comp) return 'DRAW';
 if(player == 'rock') return(comp == 'papper') ? 'YOU LOSE' : 'YOU WIN';
 if(player == 'papper') return(comp == 'scissor') ? 'YOU LOSE' : 'YOU WIN';
 if(player == 'scissor') return(comp == 'rock') ? 'YOU LOSE' : 'YOU WIN';
 // console.log(comp,player);
}

Funcion loop() digunakan untuk melakukan sebuah animasi dari game, dimana gambar akan berputar sendiri seakan-akan komputer berfikir sejenak. Function result() Untuk rule atau peraturan dari game ini, dimana kita akan menentukan kapan pilihan kita kalah dan kapan kita menang begitu juga dengan komputer.

Code :

const scorePlayer = document.querySelector('.scoreP');
const scoreComp = document.querySelector('.scoreC');
const info = document.querySelector('.info h3');
const imgComp = document.querySelector('.comp .compopt .img-computer');
const procesS = document.querySelectorAll('li img');
procesS.forEach(function(opt) {
 opt.addEventListener('click',function() {
  let player = opt.className;
  let comp = getComp();
  loop();
  setTimeout(function () {
   let result2 = result(comp,player);
   info.innerHTML = result2;
   imgComp.setAttribute('src','img/'+comp+'.png'); 

   if(result2 == 'YOU WIN') {
    scorePlayer.innerHTML = scoreP++;
   }else if(result2 == 'YOU LOSE') {
    scoreComp.innerHTML = scoreC++;
   }

  },1000);

 });
});

Membuat game gunting batu kertas dengan javascript

screenshoot game

Sebagai implementasi dari semua fungsi yang telah dibuat.
Semoga bermanfaat teman-teman sekalian.

Membuat game gunting batu kertas dengan javascript

Penjelasan kode:

Formulir Kontak