MEMBUAT GAME DENGAN JAVASCRIPT

A. Game Tebak Angka

Permainan ini merupakan sejenis permainan untuk menebak angka yang sudah ditetapkan oleh sistem. User hanya memperkirakan angka berapa yang ditetapkan oleh sistem, jika angka yang ditebak terlalu kecil dari angka yang ditetapkan system maka akan “Tebakan Anda terlalu kecil, coba lagi.”, begitu pula sebaliknya

Setelah sama, maka akan muncul pesan “Selamat! Anda menebak angka yang benar”

Berikut script yang digunakan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Tebak Angka Dengan java dan html</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
 
    <h3>GAME TEBAK ANGKA</h3>
	<hr>
	<p>Coba tebak angka berapa yang disimpan dalam komputer <br>Masukkan angka antara 1 dan 100:</p>
 
    <input type="text" id="masukan">
 
    <button onclick="periksaInputan()">Tebak!</button>
 
    <p id="pesan"></p>
 
</body>
<script>
    // buat angka random dan simpan dalam variabel angkaRandom
    const angkaRandom = Math.floor(Math.random() * 100) + 1;
 
    // menyimpan element id masukan dan pesan dalam variabel
    const masukan = document.getElementById('masukan');
    const pesan = document.getElementById('pesan');
 
    // menghitung jumlah tebakan
    let percobaan = 0;
 
    // Function untuk memeriksa masukan pengguna
    function periksaInputan() {
        // menambah jumlah masukan percobaan
        percobaan++;
 
        // menyimpan masukan angka dari user
        const masukan_user = parseInt(masukan.value);
 
        if (masukan_user === angkaRandom) {
            // membuat isi pesan
            pesan.textContent = `Selamat! Anda menebak angka yang benar (${angkaRandom}) dengan ${percobaan} tebakan.`;
            // mengubah warna pesan menjadi hijau
            pesan.style.color = 'green';
            // menonaktifkan form input
            masukan.disabled = true;
        } else if (masukan_user < angkaRandom) {
            // membuat isi pesan
            pesan.textContent = 'Tebakan Anda terlalu kecil, coba lagi.';
            // mengubah warna pesan menjadi hijau
            pesan.style.color = 'red';
        } else if (masukan_user > angkaRandom) {
            // membuat isi pesan
            pesan.textContent = 'Tebakan Anda terlalu tinggi, coba lagi.';
            // mengubah warna pesan menjadi hijau
            pesan.style.color = 'red';
        }
 
        // kosongkan form masukan
        masukan.value = '';
        // fokus pada form masukan
        masukan.focus();
    }
</script>
</html>

<!DOCTYPE html>

<head>

<title>Game Tebak Angka Dengan java dan html</title>

<style>

body {

font-family: Arial, sans-serif;

}

</style>

</head>

<body>

<h3>GAME TEBAK ANGKA</h3>

<hr>

<p>Coba tebak angka berapa yang disimpan dalam komputer <br>Masukkan angka antara 1 dan 100:</p>

<button onclick="periksaInputan()">Tebak!</button>

</body>

// buat angka random dan simpan dalam variabel angkaRandom

const angkaRandom = Math.floor(Math.random() * 100) + 1;

// menyimpan element id masukan dan pesan dalam variabel

const masukan = document.getElementById('masukan');

const pesan = document.getElementById('pesan');

// menghitung jumlah tebakan

let percobaan = 0;

// Function untuk memeriksa masukan pengguna

function periksaInputan() {

// menambah jumlah masukan percobaan

percobaan++;

// menyimpan masukan angka dari user

const masukan_user = parseInt(masukan.value);

if (masukan_user === angkaRandom) {

// membuat isi pesan

pesan.textContent = `Selamat! Anda menebak angka yang benar (${angkaRandom}) dengan ${percobaan} tebakan.`;

// mengubah warna pesan menjadi hijau

pesan.style.color = 'green';

// menonaktifkan form input

masukan.disabled = true;

} else if (masukan_user < angkaRandom) {

// membuat isi pesan

pesan.textContent = 'Tebakan Anda terlalu kecil, coba lagi.';

// mengubah warna pesan menjadi hijau

pesan.style.color = 'red';

} else if (masukan_user > angkaRandom) {

// membuat isi pesan

pesan.textContent = 'Tebakan Anda terlalu tinggi, coba lagi.';

// mengubah warna pesan menjadi hijau

pesan.style.color = 'red';

}

// kosongkan form masukan

masukan.value = '';

// fokus pada form masukan

masukan.focus();

}

</script>

</html>

Contoh Demo Game

B. Game Tic Tac Toe

Game ini merupakan game permainan antara dua pemain yang terdiri dari sembilan kotak. Setiap pemain memilih gerakan mereka dengan O atau X dan menandai kotak mereka di setiap kesempatan. Pemain yang berhasil membuat tanda dalam satu baris, baik secara diagonal, horizontal, atau vertikal akan menang. Tantangan bagi pemain lain adalah memblokir permainan lawannya dan juga untuk membuat rantai. Pemenangnya jika yang berhasil membuat baris diagonal, horisontal maupun vertikal.

Buatlah Folder dengan nama Game Tic Tac Toe, masukkan ketiga code dibawah ini kedalam folder Game Tic Tac Toe,

index.html

<!DOCTYPE html>
<!-- Games TIC TOC TUE -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Game Tic Tac Toe</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <!-- select box -->
  <div class="select-box">
    <header>Tic Tac Toe</header>
    <div class="content">
      <div class="title">Pilih anda akan menggunakan yang mana...?</div>
      <div class="options">
        <button class="playerX">Player (X)</button>
        <button class="playerO">Player (O)</button>
      </div>
      <div class="credit">Didownload dari <a href="https://www.syaiflash.com" target="_blank">syaiflash.com</a></div>
    </div>
  </div> 

  <!-- playboard section -->
  <div class="play-board">
    <div class="details">
      <div class="players">
        <span class="Xturn">X memilih</span>
        <span class="Oturn">O memilih</span>
        <div class="slider"></div>
      </div>
    </div>
    <div class="play-area">
      <section>
        <span class="box1"></span>
        <span class="box2"></span>
        <span class="box3"></span>
      </section>
      <section>
        <span class="box4"></span>
        <span class="box5"></span>
        <span class="box6"></span>
      </section>
      <section>
        <span class="box7"></span>
        <span class="box8"></span>
        <span class="box9"></span>
      </section>
    </div>
  </div>

  <!-- result box -->
  <div class="result-box">
    <div class="won-text"></div>
    <div class="btn"><button>Ulang</button></div>
  </div>

  <script src="script.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<div class="title">Pilih anda akan menggunakan yang mana...?</div>

<button class="playerX">Player (X)</button>

<button class="playerO">Player (O)</button>

</div>

<div class="credit">Didownload dari <a href="https://www.syaiflash.com" target="_blank">syaiflash.com</a></div>

</div>

<span class="Xturn">X memilih</span>

<span class="Oturn">O memilih</span>

</div>

</section>

</section>

</section>

</div>

<div class="btn"><button>Ulang</button></div>

</div>

</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
::selection{
  color: #fff;
  background:#56baed;
}
body{
  background:#56baed;
}
.select-box, .play-board, .result-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.select-box{
  background: #fff;
  padding: 20px 25px 25px;
  border-radius: 5px;
  max-width: 400px;
  width: 100%;
}
.select-box.hide{
  opacity: 0;
  pointer-events: none;
}
.select-box header{
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid lightgrey;
}
.select-box .title{
  font-size: 22px;
  font-weight: 500;
  margin: 20px 0;
}
.select-box .options{
  display: flex;
  width: 100%;
}
.options button{
  width: 100%;
  font-size: 20px;
  font-weight: 500;
  padding: 10px 0;
  border: none;
  background: #56baed;
  border-radius: 5px;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.options button:hover,
.btn button:hover{
  transform: scale(0.96);
}
.options button.playerX{
  margin-right: 5px;
}
.options button.playerO{
  margin-left: 5px;
}
.select-box .credit{
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
}
.select-box .credit a{
  color: #56baed;
  text-decoration: none;
}
.select-box .credit a:hover{
  text-decoration: underline;
}

.play-board{
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
}
.play-board.show{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.play-board .details{
  padding: 7px;
  border-radius: 5px;
  background: #fff;
}
.play-board .players{
  width: 100%;
  display: flex;
  position: relative;
  justify-content: space-between;
}
.players span{
  position: relative;
  z-index: 2;
  color: #56baed;
  font-size: 20px;
  font-weight: 500;
  padding: 10px 0;
  width: 100%;
  text-align: center;
  cursor: default;
  user-select: none;
  transition: all 0.3 ease;
}
.players.active span:first-child{
  color: #fff;
}
.players.active span:last-child{
  color: #56baed;
}
.players span:first-child{
  color: #fff;
}
.players .slider{
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #56baed;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.players.active .slider{
  left: 50%;
}
.players.active span:first-child{
  color: #56baed;
}
.players.active span:nth-child(2){
  color: #fff;
}
.players.active .slider{
  left: 50%;
}
.play-area{
  margin-top: 20px;
}
.play-area section{
  display: flex;
  margin-bottom: 1px;
}
.play-area section span{
  display: block;
  height: 90px;
  width: 90px;
  margin: 2px;
  color: #56baed;
  font-size: 40px;
  line-height: 80px;
  text-align: center;
  border-radius: 5px;
  background: #fff;
}

.result-box{
  padding: 25px 20px;
  border-radius: 5px;
  max-width: 400px;
  width: 100%;
  opacity: 0;
  text-align: center;
  background: #fff;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
}
.result-box.show{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.result-box .won-text{
  font-size: 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
}
.result-box .won-text p{
  font-weight: 600;
  margin: 0 5px;
}
.result-box .btn{
  width: 100%;
  margin-top: 25px;
  display: flex;
  justify-content: center;
}
.btn button{
  font-size: 18px;
  font-weight: 500;
  padding: 8px 20px;
  border: none;
  background: #56baed;
  border-radius: 5px;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

::selection{

color: #fff;

background:#56baed;

}

body{

background:#56baed;

}

.select-box, .play-board, .result-box{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

transition: all 0.3s ease;

}

.select-box{

background: #fff;

padding: 20px 25px 25px;

border-radius: 5px;

max-width: 400px;

width: 100%;

}

.select-box.hide{

opacity: 0;

pointer-events: none;

}

.select-box header{

font-size: 30px;

font-weight: 600;

padding-bottom: 10px;

border-bottom: 1px solid lightgrey;

}

.select-box .title{

font-size: 22px;

font-weight: 500;

margin: 20px 0;

}

.select-box .options{

display: flex;

width: 100%;

}

.options button{

width: 100%;

font-size: 20px;

font-weight: 500;

padding: 10px 0;

border: none;

background: #56baed;

border-radius: 5px;

color: #fff;

outline: none;

cursor: pointer;

transition: all 0.3s ease;

}

.options button:hover,

.btn button:hover{

transform: scale(0.96);

}

.options button.playerX{

margin-right: 5px;

}

.options button.playerO{

margin-left: 5px;

}

.select-box .credit{

text-align: center;

margin-top: 20px;

font-size: 18px;

font-weight: 500;

}

.select-box .credit a{

color: #56baed;

text-decoration: none;

}

.select-box .credit a:hover{

text-decoration: underline;

}

.play-board{

opacity: 0;

pointer-events: none;

transform: translate(-50%, -50%) scale(0.9);

}

.play-board.show{

opacity: 1;

pointer-events: auto;

transform: translate(-50%, -50%) scale(1);

}

.play-board .details{

padding: 7px;

border-radius: 5px;

background: #fff;

}

.play-board .players{

width: 100%;

display: flex;

position: relative;

justify-content: space-between;

}

.players span{

position: relative;

z-index: 2;

color: #56baed;

font-size: 20px;

font-weight: 500;

padding: 10px 0;

width: 100%;

text-align: center;

cursor: default;

user-select: none;

transition: all 0.3 ease;

}

.players.active span:first-child{

color: #fff;

}

.players.active span:last-child{

color: #56baed;

}

.players span:first-child{

color: #fff;

}

.players .slider{

position: absolute;

top: 0;

left: 0;

width: 50%;

height: 100%;

background: #56baed;

border-radius: 5px;

transition: all 0.3s ease;

}

.players.active .slider{

left: 50%;

}

.players.active span:first-child{

color: #56baed;

}

.players.active span:nth-child(2){

color: #fff;

}

.players.active .slider{

left: 50%;

}

.play-area{

margin-top: 20px;

}

.play-area section{

display: flex;

margin-bottom: 1px;

}

.play-area section span{

display: block;

height: 90px;

width: 90px;

margin: 2px;

color: #56baed;

font-size: 40px;

line-height: 80px;

text-align: center;

border-radius: 5px;

background: #fff;

}

.result-box{

padding: 25px 20px;

border-radius: 5px;

max-width: 400px;

width: 100%;

opacity: 0;

text-align: center;

background: #fff;

pointer-events: none;

transform: translate(-50%, -50%) scale(0.9);

}

.result-box.show{

opacity: 1;

pointer-events: auto;

transform: translate(-50%, -50%) scale(1);

}

.result-box .won-text{

font-size: 30px;

font-weight: 500;

display: flex;

justify-content: center;

}

.result-box .won-text p{

font-weight: 600;

margin: 0 5px;

}

.result-box .btn{

width: 100%;

margin-top: 25px;

display: flex;

justify-content: center;

}

.btn button{

font-size: 18px;

font-weight: 500;

padding: 8px 20px;

border: none;

background: #56baed;

border-radius: 5px;

color: #fff;

outline: none;

cursor: pointer;

transition: all 0.3s ease;

}

script.js

//I've tried to explain each JavaScript line with comments....Hope you'll understand

//selecting all required elements
const selectBox = document.querySelector(".select-box"),
selectBtnX = selectBox.querySelector(".options .playerX"),
selectBtnO = selectBox.querySelector(".options .playerO"),
playBoard = document.querySelector(".play-board"),
players = document.querySelector(".players"),
allBox = document.querySelectorAll("section span"),
resultBox = document.querySelector(".result-box"),
wonText = resultBox.querySelector(".won-text"),
replayBtn = resultBox.querySelector("button");

window.onload = ()=>{ //once window loaded
    for (let i = 0; i < allBox.length; i++) { //add onclick attribute in all available span
       allBox[i].setAttribute("onclick", "clickedBox(this)");
    }
}

selectBtnX.onclick = ()=>{
    selectBox.classList.add("hide"); //hide select box
    playBoard.classList.add("show"); //show the playboard section
}

selectBtnO.onclick = ()=>{ 
    selectBox.classList.add("hide"); //hide select box
    playBoard.classList.add("show"); //show the playboard section
    players.setAttribute("class", "players active player"); //set class attribute in players with players active player values
}

let playerXIcon = "fas fa-times"; //class name of fontawesome cross icon
let playerOIcon = "far fa-circle"; //class name of fontawesome circle icon
let playerSign = "X"; //this is a global variable beacuse we've used this variable inside multiple functions
let runBot = true; //this also a global variable with boolen value..we used this variable to stop the bot once match won by someone or drawn

// user click function
function clickedBox(element){
    if(players.classList.contains("player")){
        playerSign = "O"; //if player choose (O) then change playerSign to O
        element.innerHTML = `<i class="{playerOIcon}"></i>`; //adding circle icon tag inside user clicked element/box
        players.classList.remove("active"); ///add active class in players
        element.setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign
    }else{
        element.innerHTML = `<i class="${playerXIcon}"></i>`; //adding cross icon tag inside user clicked element/box
        element.setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign
        players.classList.add("active"); ///add active class in players
    }
    selectWinner(); //calling selectWinner function
    element.style.pointerEvents = "none"; //once user select any box then that box can'be clicked again
    playBoard.style.pointerEvents = "none"; //add pointerEvents none to playboard so user can't immediately click on any other box until bot select
    let randomTimeDelay = ((Math.random() * 1000) + 200).toFixed(); //generating random number so bot will randomly delay to select unselected box
    setTimeout(()=>{
        bot(runBot); //calling bot function
    }, randomTimeDelay); //passing random delay value
}

// bot auto select function
function bot(){
    let array = []; //creating empty array...we'll store unclicked boxes index
    if(runBot){ //if runBot is true
        playerSign = "O"; //change the playerSign to O so if player has chosen X then bot will O
        for (let i = 0; i < allBox.length; i++) {
            if(allBox[i].childElementCount == 0){ //if the box/span has no children means <i> tag
                array.push(i); //inserting unclicked boxes number/index inside array
            }
        }
        let randomBox = array[Math.floor(Math.random() * array.length)]; //getting random index from array so bot will select random unselected box
        if(array.length > 0){ //if array length is greater than 0
            if(players.classList.contains("player")){ 
                playerSign = "X"; //if player has chosen O then bot will X
                allBox[randomBox].innerHTML = `<i class="{playerXIcon}"></i>`; //adding cross icon tag inside bot selected element
                allBox[randomBox].setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign
                players.classList.add("active"); ///add active class in players
            }else{
                allBox[randomBox].innerHTML = `<i class="{playerOIcon}"></i>`; //adding circle icon tag inside bot selected element
                players.classList.remove("active"); //remove active class in players
                allBox[randomBox].setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign
            }
            selectWinner(); //calling selectWinner function
        }
        allBox[randomBox].style.pointerEvents = "none"; //once bot select any box then user can't click on that box
        playBoard.style.pointerEvents = "auto"; //add pointerEvents auto in playboard so user can again click on box
        playerSign = "X"; //if player has chosen X then bot will be O right then we change the playerSign again to X so user will X because above we have changed the playerSign to O for bot
    }
}

function getIdVal(classname){
    return document.querySelector(".box" + classname).id; //return id value
}
function checkIdSign(val1, val2, val3, sign){ //checking all id value is equal to sign (X or O) or not if yes then return true
    if(getIdVal(val1) == sign && getIdVal(val2) == sign && getIdVal(val3) == sign){
        return true;
    }
}
function selectWinner(){ //if the one of following winning combination match then select the winner
    if(checkIdSign(1,2,3,playerSign) || checkIdSign(4,5,6, playerSign) || checkIdSign(7,8,9, playerSign) || checkIdSign(1,4,7, playerSign) || checkIdSign(2,5,8, playerSign) || checkIdSign(3,6,9, playerSign) || checkIdSign(1,5,9, playerSign) || checkIdSign(3,5,7, playerSign)){
        runBot = false; //passing the false boolen value to runBot so bot won't run again
        bot(runBot); //calling bot function
        setTimeout(()=>{ //after match won by someone then hide the playboard and show the result box after 700ms
            resultBox.classList.add("show");
            playBoard.classList.remove("show");
        }, 700); //1s = 1000ms
        wonText.innerHTML = `Player <p>{playerSign}</p> won the game!`; //displaying winning text with passing playerSign (X or O)
    }else{ //if all boxes/element have id value and still no one win then draw the match
        if(getIdVal(1) != "" && getIdVal(2) != "" && getIdVal(3) != "" && getIdVal(4) != "" && getIdVal(5) != "" && getIdVal(6) != "" && getIdVal(7) != "" && getIdVal(8) != "" && getIdVal(9) != ""){
            runBot = false; //passing the false boolen value to runBot so bot won't run again
            bot(runBot); //calling bot function
            setTimeout(()=>{ //after match drawn then hide the playboard and show the result box after 700ms
                resultBox.classList.add("show");
                playBoard.classList.remove("show");
            }, 700); //1s = 1000ms
            wonText.textContent = "Match has been drawn!"; //displaying draw match text
        }
    }
}

replayBtn.onclick = ()=>{
    window.location.reload(); //reload the current page on replay button click
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

//I've tried to explain each JavaScript line with comments....Hope you'll understand

//selecting all required elements

const selectBox = document.querySelector(".select-box"),

selectBtnX = selectBox.querySelector(".options .playerX"),

selectBtnO = selectBox.querySelector(".options .playerO"),

playBoard = document.querySelector(".play-board"),

players = document.querySelector(".players"),

allBox = document.querySelectorAll("section span"),

resultBox = document.querySelector(".result-box"),

wonText = resultBox.querySelector(".won-text"),

replayBtn = resultBox.querySelector("button");

window.onload = ()=>{ //once window loaded

for (let i = 0; i < allBox.length; i++) { //add onclick attribute in all available span

allBox[i].setAttribute("onclick", "clickedBox(this)");

}

selectBtnX.onclick = ()=>{

selectBox.classList.add("hide"); //hide select box

playBoard.classList.add("show"); //show the playboard section

}

selectBtnO.onclick = ()=>{

selectBox.classList.add("hide"); //hide select box

playBoard.classList.add("show"); //show the playboard section

players.setAttribute("class", "players active player"); //set class attribute in players with players active player values

}

let playerXIcon = "fas fa-times"; //class name of fontawesome cross icon

let playerOIcon = "far fa-circle"; //class name of fontawesome circle icon

let playerSign = "X"; //this is a global variable beacuse we've used this variable inside multiple functions

let runBot = true; //this also a global variable with boolen value..we used this variable to stop the bot once match won by someone or drawn

// user click function

function clickedBox(element){

if(players.classList.contains("player")){

playerSign = "O"; //if player choose (O) then change playerSign to O

element.innerHTML = `<i class="{playerOIcon}"></i>`; //adding circle icon tag inside user clicked element/box

players.classList.remove("active"); ///add active class in players

element.setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign

}else{

element.innerHTML = `<i class="${playerXIcon}"></i>`; //adding cross icon tag inside user clicked element/box

element.setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign

players.classList.add("active"); ///add active class in players

}

selectWinner(); //calling selectWinner function

element.style.pointerEvents = "none"; //once user select any box then that box can'be clicked again

playBoard.style.pointerEvents = "none"; //add pointerEvents none to playboard so user can't immediately click on any other box until bot select

let randomTimeDelay = ((Math.random() * 1000) + 200).toFixed(); //generating random number so bot will randomly delay to select unselected box

setTimeout(()=>{

bot(runBot); //calling bot function

}, randomTimeDelay); //passing random delay value

}

// bot auto select function

function bot(){

let array = []; //creating empty array...we'll store unclicked boxes index

if(runBot){ //if runBot is true

playerSign = "O"; //change the playerSign to O so if player has chosen X then bot will O

for (let i = 0; i < allBox.length; i++) {

if(allBox[i].childElementCount == 0){ //if the box/span has no children means <i> tag

array.push(i); //inserting unclicked boxes number/index inside array

}

let randomBox = array[Math.floor(Math.random() * array.length)]; //getting random index from array so bot will select random unselected box

if(array.length > 0){ //if array length is greater than 0

if(players.classList.contains("player")){

playerSign = "X"; //if player has chosen O then bot will X

allBox[randomBox].innerHTML = `<i class="{playerXIcon}"></i>`; //adding cross icon tag inside bot selected element

allBox[randomBox].setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign

players.classList.add("active"); ///add active class in players

}else{

allBox[randomBox].innerHTML = `<i class="{playerOIcon}"></i>`; //adding circle icon tag inside bot selected element

players.classList.remove("active"); //remove active class in players

allBox[randomBox].setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign

}

selectWinner(); //calling selectWinner function

}

allBox[randomBox].style.pointerEvents = "none"; //once bot select any box then user can't click on that box

playBoard.style.pointerEvents = "auto"; //add pointerEvents auto in playboard so user can again click on box

playerSign = "X"; //if player has chosen X then bot will be O right then we change the playerSign again to X so user will X because above we have changed the playerSign to O for bot

}

function getIdVal(classname){

return document.querySelector(".box" + classname).id; //return id value

}

function checkIdSign(val1, val2, val3, sign){ //checking all id value is equal to sign (X or O) or not if yes then return true

if(getIdVal(val1) == sign && getIdVal(val2) == sign && getIdVal(val3) == sign){

return true;

}

function selectWinner(){ //if the one of following winning combination match then select the winner

if(checkIdSign(1,2,3,playerSign) || checkIdSign(4,5,6, playerSign) || checkIdSign(7,8,9, playerSign) || checkIdSign(1,4,7, playerSign) || checkIdSign(2,5,8, playerSign) || checkIdSign(3,6,9, playerSign) || checkIdSign(1,5,9, playerSign) || checkIdSign(3,5,7, playerSign)){

runBot = false; //passing the false boolen value to runBot so bot won't run again

bot(runBot); //calling bot function

setTimeout(()=>{ //after match won by someone then hide the playboard and show the result box after 700ms

resultBox.classList.add("show");

playBoard.classList.remove("show");

}, 700); //1s = 1000ms

wonText.innerHTML = `Player <p>{playerSign}</p> won the game!`; //displaying winning text with passing playerSign (X or O)

}else{ //if all boxes/element have id value and still no one win then draw the match

if(getIdVal(1) != "" && getIdVal(2) != "" && getIdVal(3) != "" && getIdVal(4) != "" && getIdVal(5) != "" && getIdVal(6) != "" && getIdVal(7) != "" && getIdVal(8) != "" && getIdVal(9) != ""){

runBot = false; //passing the false boolen value to runBot so bot won't run again

bot(runBot); //calling bot function

setTimeout(()=>{ //after match drawn then hide the playboard and show the result box after 700ms

resultBox.classList.add("show");

playBoard.classList.remove("show");

}, 700); //1s = 1000ms

wonText.textContent = "Match has been drawn!"; //displaying draw match text

}

replayBtn.onclick = ()=>{

window.location.reload(); //reload the current page on replay button click

}

Contoh Demo Game

C. Game Batu Gunting Kertas dengan JavaScript

Aturannya sederhana, yaitu batu mengalahkan gunting, gunting mengalahkan kertas, dan kertas mengalahkan batu. Komputer memilih antara batu, gunting, atau kertas secara acak. Nantinya, pengguna perlu memasukkan opsinya, yang kemudian dibandingkan oleh komputer dengan pilihannya untuk menentukan pemenang.

Langkah pembuatannya:

Buat folder dengan nama sembarang misalnya Game Batu Gunting Kertas
Buat 3 File dengan nama serta extensionnya
- index.html
- style.css
- script.js
Masukkan ketiga file tersebut kedalam folder Game Batu Gunting Kertas
Buat script sesuai extension diatas

index.html

<!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" />
    <title>Game Batu Gunting Kertas dengan JavaScript</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="container">
      <div class="result_field">
        <div class="result_images">
          <span class="user_result">
            <img src="images/rock.png" alt="" />
          </span>
          <span class="cpu_result">
            <img src="images/rock.png" alt="" />
          </span>
        </div>
        <div class="result">Silahkan Mulai</div>
      </div>

      <div class="option_images">
        <span class="option_image">
          <img src="images/rock.png" alt="" />
          <p>Batu</p>
        </span>
        <span class="option_image">
          <img src="images/paper.png" alt="" />
          <p>Kertas</p>
        </span>
        <span class="option_image">
          <img src="images/scissors.png" alt="" />
          <p>Gunting</p>
        </span>
      </div>
    </section>

    <script src="script.js" defer></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Game Batu Gunting Kertas dengan JavaScript</title>

</head>

<body>

</span>

</span>

</div>

<div class="result">Silahkan Mulai</div>

</div>

</span>

<p>Kertas</p>

</span>

<p>Gunting</p>

</span>

</div>

</section>

</body>

</html>

style.css

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7fb;
}
::selection {
  color: #fff;
  background-color: #7d2ae8;
}
.container {
  padding: 2rem 7rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.result_images {
  display: flex;
  column-gap: 7rem;
}
.container.start .user_result {
  transform-origin: left;
  animation: userShake 0.7s ease infinite;
}
@keyframes userShake {
  50% {
    transform: rotate(10deg);
  }
}

.container.start .cpu_result {
  transform-origin: right;
  animation: cpuShake 0.7s ease infinite;
}
@keyframes cpuShake {
  50% {
    transform: rotate(-10deg);
  }
}
.result_images img {
  width: 100px;
}
.user_result img {
  transform: rotate(90deg);
}
.cpu_result img {
  transform: rotate(-90deg) rotateY(180deg);
}
.result {
  text-align: center;
  font-size: 2rem;
  color: #7d2ae8;
  margin-top: 1.5rem;
}

.option_image img {
  width: 50px;
}
.option_images {
  display: flex;
  align-items: center;
  margin-top: 2.5rem;
  justify-content: space-between;
}
.container.start .option_images {
  pointer-events: none;
}
.option_image {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.option_image:hover {
  opacity: 1;
}
.option_image.active {
  opacity: 1;
}
.option_image img {
  pointer-events: none;
}
.option_image p {
  color: #7d2ae8;
  font-size: 1.235rem;
  margin-top: 1rem;
  pointer-events: none;
}

/* Import Google font - Poppins */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Poppins", sans-serif;

}

body {

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: #f6f7fb;

}

::selection {

color: #fff;

background-color: #7d2ae8;

}

.container {

padding: 2rem 7rem;

border-radius: 14px;

background: #fff;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

}

.result_images {

display: flex;

column-gap: 7rem;

}

.container.start .user_result {

transform-origin: left;

animation: userShake 0.7s ease infinite;

}

@keyframes userShake {

50% {

transform: rotate(10deg);

}

.container.start .cpu_result {

transform-origin: right;

animation: cpuShake 0.7s ease infinite;

}

@keyframes cpuShake {

50% {

transform: rotate(-10deg);

}

.result_images img {

width: 100px;

}

.user_result img {

transform: rotate(90deg);

}

.cpu_result img {

transform: rotate(-90deg) rotateY(180deg);

}

.result {

text-align: center;

font-size: 2rem;

color: #7d2ae8;

margin-top: 1.5rem;

}

.option_image img {

width: 50px;

}

.option_images {

display: flex;

align-items: center;

margin-top: 2.5rem;

justify-content: space-between;

}

.container.start .option_images {

pointer-events: none;

}

.option_image {

display: flex;

flex-direction: column;

align-items: center;

opacity: 0.5;

cursor: pointer;

transition: opacity 0.3s ease;

}

.option_image:hover {

opacity: 1;

}

.option_image.active {

opacity: 1;

}

.option_image img {

pointer-events: none;

}

.option_image p {

color: #7d2ae8;

font-size: 1.235rem;

margin-top: 1rem;

pointer-events: none;

}

script.js

// Get  to DOM elements
const gameContainer = document.querySelector(".container"),
  userResult = document.querySelector(".user_result img"),
  cpuResult = document.querySelector(".cpu_result img"),
  result = document.querySelector(".result"),
  optionImages = document.querySelectorAll(".option_image");

// Loop through each option image element
optionImages.forEach((image, index) => {
  image.addEventListener("click", (e) => {
    image.classList.add("active");

    userResult.src = cpuResult.src = "images/rock.png";
    result.textContent = "Proses...";

    // Loop through each option image again
    optionImages.forEach((image2, index2) => {
      // If the current index doesn't match the clicked index
      // Remove the "active" class from the other option images
      index !== index2 && image2.classList.remove("active");
    });

    gameContainer.classList.add("start");

    // Set a timeout to delay the result calculation
    let time = setTimeout(() => {
      gameContainer.classList.remove("start");

      // Get the source of the clicked option image
      let imageSrc = e.target.querySelector("img").src;
      // Set the user image to the clicked option image
      userResult.src = imageSrc;

      // Generate a random number between 0 and 2
      let randomNumber = Math.floor(Math.random() * 3);
      // Create an array of CPU image options
      let cpuImages = ["images/rock.png", "images/paper.png", "images/scissors.png"];
      // Set the CPU image to a random option from the array
      cpuResult.src = cpuImages[randomNumber];

      // Assign a letter value to the CPU option (R for rock, P for paper, S for scissors)
      let cpuValue = ["R", "P", "S"][randomNumber];
      // Assign a letter value to the clicked option (based on index)
      let userValue = ["R", "P", "S"][index];

      // Create an object with all possible outcomes
      let outcomes = {
        RR: "Draw",
        RP: "Komputer",
        RS: "Anda",
        PP: "Draw",
        PR: "Anda",
        PS: "Komputer",
        SS: "Draw",
        SR: "Komputer",
        SP: "Anda",
      };

      // Look up the outcome value based on user and CPU options
      let outComeValue = outcomes[userValue + cpuValue];

      // Display the result
      result.textContent = userValue === cpuValue ? "Match Draw" : `${outComeValue} Menang..!!`;
    }, 2500);
  });
});

// Get to DOM elements

const gameContainer = document.querySelector(".container"),

userResult = document.querySelector(".user_result img"),

cpuResult = document.querySelector(".cpu_result img"),

result = document.querySelector(".result"),

optionImages = document.querySelectorAll(".option_image");

// Loop through each option image element

optionImages.forEach((image, index) => {

image.addEventListener("click", (e) => {

image.classList.add("active");

userResult.src = cpuResult.src = "images/rock.png";

result.textContent = "Proses...";

// Loop through each option image again

optionImages.forEach((image2, index2) => {

// If the current index doesn't match the clicked index

// Remove the "active" class from the other option images

index !== index2 && image2.classList.remove("active");

});

gameContainer.classList.add("start");

// Set a timeout to delay the result calculation

let time = setTimeout(() => {

gameContainer.classList.remove("start");

// Get the source of the clicked option image

let imageSrc = e.target.querySelector("img").src;

// Set the user image to the clicked option image

userResult.src = imageSrc;

// Generate a random number between 0 and 2

let randomNumber = Math.floor(Math.random() * 3);

// Create an array of CPU image options

let cpuImages = ["images/rock.png", "images/paper.png", "images/scissors.png"];

// Set the CPU image to a random option from the array

cpuResult.src = cpuImages[randomNumber];

// Assign a letter value to the CPU option (R for rock, P for paper, S for scissors)

let cpuValue = ["R", "P", "S"][randomNumber];

// Assign a letter value to the clicked option (based on index)

let userValue = ["R", "P", "S"][index];

// Create an object with all possible outcomes

let outcomes = {

RR: "Draw",

RP: "Komputer",

RS: "Anda",

PP: "Draw",

PR: "Anda",

PS: "Komputer",

SS: "Draw",

SR: "Komputer",

SP: "Anda",

};

// Look up the outcome value based on user and CPU options

let outComeValue = outcomes[userValue + cpuValue];

// Display the result

result.textContent = userValue === cpuValue ? "Match Draw" : `${outComeValue} Menang..!!`;

}, 2500);

});

Contoh Demo Game

MEMBUAT GAME DENGAN JAVASCRIPT

A. Game Tebak Angka

B. Game Tic Tac Toe

C. Game Batu Gunting Kertas dengan JavaScript

Be the first to comment

Leave a Reply Cancel reply