Add some game with javascript

netizen/rickyzakariap/game.js

@@ -0,0 +1,147 @@
+// Menangkap pilihan dari komputer
+function getcompuChoice() {
+  const compu = Math.random();
+  if (compu < 1 / 3) return 'rock';
+  if (compu >= 1 / 3 && compu < 2 / 3) return 'paper';
+  return 'scissor';
+}
+
+// Rules permainan
+let result = null;
+function getResult(compu, player) {
+  if (player == compu) return (result = 'DRAW');
+  if (player == 'rock') return compu == 'scissor' ? (result = 'PLAYER 1 WIN') : (result = 'COM WIN');
+  if (player == 'paper') return compu == 'rock' ? (result = 'PLAYER 1 WIN') : (result = 'COM WIN');
+  if (player == 'scissor') return compu == 'paper' ? (result = 'PLAYER 1 WIN') : (result = 'COM WIN');
+}
+
+/* Game dimulai */
+/* DOM Selector */
+const versus = document.querySelector('.versus h1');
+const resultClass = document.querySelector('.versus div div');
+const textResult = document.querySelector('.versus h5');
+const compuBox = document.querySelectorAll('.greyBox.compuImage');
+const playerBox = document.querySelectorAll('.greyBox.playerImage');
+
+/* Beri delay untuk membuat komputer seolah berpikir dahulu */
+
+function wait() {
+  const start = new Date().getTime();
+  let i = 0;
+
+  setInterval(function () {
+    /* Jalankan fungsi dalam waktu 1s */
+    if (new Date().getTime() - start >= 1000) {
+      clearInterval;
+      return;
+    }
+
+    /* Komputer seolah-olah berpikir dengan bantuan greyBox */
+    compuBox[i++].style.backgroundColor = '#c4c4c4';
+    if (i == compuBox.length) i = 0;
+
+    /* Hilangkan kembali class result saat wait () */
+    resultClass.classList.remove('result');
+
+    /* Tampilkan kembali tulisan VS saat wait () */
+    versus.style.color = 'rgb(189,48,46)';
+  }, 50);
+
+  setTimeout(function () {
+    setInterval(function () {
+      if (new Date().getTime() - start >= 1200) {
+        clearInterval;
+        return;
+      }
+
+      /* Handling agar Menyamarkan greyBox dengan bgColor supaya tidak semuanya memiliki greyBox berwarna abu */
+      compuBox[i++].style.backgroundColor = '#9c835f';
+      if (i == compuBox.length) i = 0;
+    }, 50);
+  }, 50);
+}
+
+/* Menangkap pilihan pemain */
+const player = document.querySelectorAll('.contentImage .player');
+player.forEach(function (choice) {
+  choice.addEventListener('click', function () {
+    /* Samarkan seluruh greyBox pada sisi player saat game dijalankan */
+    for (let i = 0; i < playerBox.length; i++) {
+      playerBox[i].style.backgroundColor = '#9c835f';
+    }
+
+    /* Eventlistener hanya dikerjakan apabila result masih dalam kondisi null */
+    if (result === null) {
+      /* Tangkap pilihan komputer */
+      const compuChoice = getcompuChoice();
+
+      /* Tangkap pilihan pemain */
+      const playerChoice = choice.className.substr(7, 7);
+
+      /* Jalankan Rules permainan untuk mendapatkan hasil */
+      result = getResult(compuChoice, playerChoice);
+
+      /* Berikan greyBox pada pilihan pemain */
+      if (playerChoice == 'rock') {
+        playerBox[0].style.backgroundColor = '#c4c4c4';
+      } else if (playerChoice == 'paper') {
+        playerBox[1].style.backgroundColor = '#c4c4c4';
+      } else {
+        playerBox[2].style.backgroundColor = '#c4c4c4';
+      }
+
+      /* Jalankan fungsi wait agar komputer terlihat berpikir dahulu */
+      wait();
+
+      /* Jalankan seluruh perintah dibawah setelah fungsi wait selesai dijalankan */
+      setTimeout(function () {
+        /* Samarkan tulisan VS dengan background saat hasil ditampilkan */
+        versus.style.color = '#9c835f';
+
+        /* Tampilkan class result */
+        resultClass.classList.add('result');
+
+        /* Tampilkan hasil dalam class result (kotak hijau) */
+        textResult.innerHTML = result;
+        if (result == 'DRAW') {
+          textResult.style.backgroundColor = '#225c0e';
+        } else {
+          textResult.style.backgroundColor = '#4c9654';
+        }
+
+        /* Berikan greyBox pada compu choice */
+        if (compuChoice == 'rock') {
+          compuBox[0].style.backgroundColor = '#c4c4c4';
+        } else if (compuChoice == 'paper') {
+          compuBox[1].style.backgroundColor = '#c4c4c4';
+        } else {
+          compuBox[2].style.backgroundColor = '#c4c4c4';
+        }
+      }, 1200);
+    } else {
+      alert('Click Refresh Button');
+    }
+  });
+});
+
+/* Reset tampilan game dengan tombol refresh */
+const reset = document.querySelector('.refresh');
+reset.addEventListener('click', function () {
+  /* Hapus tulisan hasil dalam result */
+  textResult.innerHTML = '';
+
+  /* Hilangkan kembali class result */
+  resultClass.classList.remove('result');
+
+  /* Hilangkan kembali seluruh greyBox */
+  for (let i = 0; i < compuBox.length; i++) {
+    playerBox[i].style.backgroundColor = '#9c835f';
+    compuBox[i].style.backgroundColor = '#9c835f';
+  }
+
+  /* Tampilkan kembali tulisan VS */
+  versus.style.color = 'rgb(189,48,46)';
+
+  /* Reset kembali result menjadi null agar dapat melakukan permainan kembali */
+  result = null;
+});

netizen/rickyzakariap/index.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans&display=swap" />
+    <link rel="icon" href="../challenge4/assets/logo.png" type="image/svg+xml" />
+
+    <title>Tu-Tas-Ting! | Traditional Games</title>
+  </head>
+
+  <body>
+    <!-- Header -->
+    <div class="align-items-center customHeader" id="header">
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-lg-7 my-2">
+            <div class="d-inline-block mr-3">
+              <a href="#">
+                <svg width="40px" height="40px" viewBox="0 0 16 16" class="bi bi-chevron-left" fill="rgb(114,76,33)" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
+                </svg>
+              </a>
+            </div>
+            <a href="index.html">
+              <div class="d-inline-block mr-3">
+                <img src="assets/logo.png" width="40px" height="40px" class="" alt="logo" />
+              </div>
+            </a>
+            <a href="#">
+              <div class="d-inline-block mx-auto align-middle headerTitle">Rock Paper Scissors</div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- end of header -->
+
+    <!-- content -->
+    <div class="container-fluid bgColor">
+      <div class="container gameContent">
+        <div class="row mb-1">
+          <div class="col-4 col-sm-3 offset-sm-1 d-flex player">
+            <h3 class="m-auto">Player 1</h3>
+          </div>
+          <div class="col-4 col-sm-3 offset-2 offset-sm-4 d-flex computer">
+            <h3 class="m-auto">Com</h3>
+          </div>
+        </div>
+        <div class="row contentImage">
+          <div class="col-4 col-sm-3 offset-sm-1 d-flex">
+            <div class="m-auto greyBox playerImage px-4 py-3"><img src="assets/batu.png" class="player rock" /></div>
+          </div>
+          <div class="col-4 col-sm-3 offset-2 offset-sm-4 d-flex">
+            <div class="m-auto greyBox compuImage px-4 py-3"><img src="assets/batu.png" class="compuRock" /></div>
+          </div>
+        </div>
+
+        <div class="row align-items-center contentImage">
+          <div class="col-4 col-sm-3 offset-sm-1 d-flex">
+            <div class="m-auto greyBox playerImage px-4 py-3"><img src="assets/kertas.png" class="player paper" /></div>
+          </div>
+          <div class="col-2 col-sm-2 offset-sm-1 d-flex p-0 versus">
+            <div class="m-auto p-0">
+              <h1>VS</h1>
+              <div class="align-middle">
+                <h5></h5>
+              </div>
+            </div>
+          </div>
+          <div class="col-4 col-sm-3 offset-sm-1 d-flex">
+            <div class="m-auto greyBox compuImage px-4 py-3"><img src="assets/kertas.png" class="compuPaper" /></div>
+          </div>
+        </div>
+
+        <div class="row contentImage">
+          <div class="col-4 col-sm-3 offset-sm-1 d-flex">
+            <div class="m-auto greyBox playerImage px-4 py-3"><img src="assets/gunting.png" class="player scissor" /></div>
+          </div>
+          <div class="col-4 col-sm-3 offset-2 offset-sm-4 d-flex">
+            <div class="m-auto greyBox compuImage px-4 py-3"><img src="assets/gunting.png" class="compuScissor" /></div>
+          </div>
+        </div>
+
+        <div class="row my-2">
+          <div class="col-2 col-sm-2 offset-4 offset-sm-5 d-flex p-0">
+            <div class="m-auto p-0 reset"><img src="assets/refresh.png" class="refresh" /></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- end -->
+  </body>
+  <script src="game.js"></script>
+
+  <!-- Optional JavaScript -->
+  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
+</html>

netizen/rickyzakariap/style.css

@@ -0,0 +1,104 @@
+body,
+html {
+  scroll-behavior: smooth;
+  text-decoration: none !important;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.customHeader div .d-inline-block {
+  line-height: 2;
+}
+
+.customHeader a .headerTitle {
+  font-size: 16px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #ffc107;
+}
+
+.bgColor {
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  background-color: #9c835f;
+}
+
+.gameContent {
+  position: relative;
+  top: 100px;
+  text-align: center;
+}
+
+.gameContent .row div h3 {
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.gameContent .row.contentImage .col-4 {
+  height: 75px;
+}
+
+.gameContent .row.contentImage img {
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+}
+
+.gameContent .row div.greyBox {
+  border-radius: 15%;
+}
+
+.gameContent .refresh {
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+}
+
+.gameContent .row.contentImage .versus {
+  position: relative;
+  z-index: 1;
+  display: table-cell;
+  vertical-align: middle;
+  width: 100px;
+  height: 100px;
+}
+
+.gameContent .row.contentImage .versus h1 {
+  font-weight: bold;
+  font-size: 40px;
+  color: #bd302f;
+}
+
+.gameContent .row.contentImage .versus .result {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  transform: rotate(-30deg);
+  margin-left: -30px;
+}
+
+.gameContent .row.contentImage .versus .result h5 {
+  display: table-cell;
+  vertical-align: middle;
+  background-color: #4c9654;
+  border-radius: 5%;
+  font-size: 14px;
+  font-weight: bold;
+  letter-spacing: 2px;
+  color: #ffffff;
+  height: 55px;
+  padding: 10px 40px;
+}
+
+.contentImage :hover img {
+  -webkit-transform: scale(1.6);
+  transform: scale(1.6);
+}
+
+.my-2 :hover img {
+  -webkit-transform: scale(1.3);
+  transform: scale(1.3);
+}