Source Code Game Tic Tac Toe Google
iPunx February 15, 2023 8:36 am . 5 min read 
Source code game google – Salah satu game jadul tapi tetap menarik adalah Tic Tac Toe. Dulu kita memainkan game ini dengan membuat kotak-kotak pada buku untuk mengusir kebosanan saat menunggu jam pelajaran di kelas.
Nah, saat ini jaman sudah berubah. Game seperti ini dapat kita mainkan secara online, bahkan sudah disediakan oleh Google. Namun, tahukah anda bahwa game seperti itu juga dapat kita buat dengan mudah dengan bahasa pemrograman html, css dan javascript.
Berikut ini adalah sorucecode game Tic Tac Toe layaknya yang disediakan oleh google. Anda dapat copas dari sourcecode di bawah ini. Buat 3 file yaitu index.html, style.css dan script.js. Penjelasan selengkapnya silahkan simak di bawah ini.
1. HTML
(Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML digunakan untuk memberi struktur dan format pada konten halaman web, seperti teks, gambar, video, dan audio.
Sehingga dari devinisi di atas, dalam membuat game Tic Tac Toe Google ini, kita membutuhkan script html untuk membuat kerangka game. Dengan html ini, maka game Tic Tac Toe Google dapat berjalan dengan baik di web browser.
Langkah pertama untuk membuat game tic tac toe Google ini adalah membuat folder yang akan menampung tiga file, yaitu html, css dan javascript. Setelah folder anda siap silahkan buat file index.html kemudian copy sorucecode di bawah ini kemudian paste ke file index.html.
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Tic Tac Toe</h1>
<div id="board">
<div class="square" id="s1"></div>
<div class="square" id="s2"></div>
<div class="square" id="s3"></div>
<div class="square" id="s4"></div>
<div class="square" id="s5"></div>
<div class="square" id="s6"></div>
<div class="square" id="s7"></div>
<div class="square" id="s8"></div>
<div class="square" id="s9"></div>
</div>
<div id="message"></div>
<button id="reset" onclick="reset()">Reset</button>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS
(Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk memformat dan memperindah halaman web. CSS digunakan bersama dengan HTML dan JavaScript untuk membuat halaman web yang menarik dan interaktif.
Agar tampilan game tic tac toe google yang kita buat lebih menarik dan interaktif, maka css adalah solusinya. Dengan css ini maka tampilan akan lebih menarik.
Silahkan anda buat file style.css pada folder yang sama dengan index.html, kemudian copy dan pastekan sourcecode di bawah ini.
.container {
margin: 50px auto;
text-align: center;
}
#board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
width: 300px;
height: 300px;
margin: 20px auto;
}
.square {
background-color: #8f0404;
border: 2px solid #000;
font-size: 80px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.square:hover {
background-color: #f5f5f5;
}
#message {
margin: 20px 0;
font-size: 24px;
font-weight: bold;
}
#reset {
background-color: #790404;
border: 2px solid #000;
font-size: 18px;
padding: 10px 20px;
cursor: pointer;
}
#reset:hover {
background-color: #f5f5f5;
}
.square.x::before {
content: 'X';
}
.square.o::before {
content: 'O';
}
3. JAVASCRIPT
JavaScript adalah bahasa pemrograman yang sering digunakan untuk membuat halaman web yang interaktif dan dinamis. Fungsi dari JavaScript adalah digunakan bersama dengan HTML dan CSS untuk membuat aplikasi web, game, animasi, dan banyak hal lainnya.
Baca Juga:
Sehingga dengan javascript, game tic tac toe google akan lebih interaktif dan dapat dijalankan. Silahkan buat file dengan nama script.js pada folder yang sama dengan index.html dan style.css, kemudian copy dan pastekan sourcecode di bawah ini.
const squares = document.querySelectorAll('.square');
const message = document.getElementById('message');
const resetButton = document.getElementById('reset');
let playerTurn = true;
let gameOver = false;
let board = ['', '', '', '', '', '', '', '', ''];
// Function to check if the game is over
function checkGameOver() {
// Check rows
for (let i = 0; i < 9; i += 3) {
if (board[i] !== '' && board[i] === board[i + 1] && board[i] === board[i + 2]) {
gameOver = true;
return board[i];
}
}
// Check columns
for (let i = 0; i < 3; i++) {
if (board[i] !== '' && board[i] === board[i + 3] && board[i] === board[i + 6]) {
gameOver = true;
return board[i];
}
}
// Check diagonals
if (board[0] !== '' && board[0] === board[4] && board[0] === board[8]) {
gameOver = true;
return board[0];
}
if (board[2] !== '' && board[2] === board[4] && board[2] === board[6]) {
gameOver = true;
return board[2];
}
// Check for tie
if (!board.includes('')) {
gameOver = true;
return 'tie';
}
return '';
}
// Function to reset the game
function reset() {
playerTurn = true;
gameOver = false;
board = ['', '', '', '', '', '', '', '', ''];
message.textContent = '';
squares.forEach(square => {
square.classList.remove('x');
square.classList.remove('o');
square.removeEventListener('click', makeMove);
square.addEventListener('click', makeMove);
});
}
// Function to make a move
function makeMove(event) {
if (gameOver) return;
const square = event.target;
const index = Array.from(squares).indexOf(square);
if (board[index] !== '') return;
board[index] = playerTurn ? 'x' : 'o';
square.classList.add(playerTurn ? 'x' : 'o');
square.removeEventListener('click', makeMove);
const winner = checkGameOver();
if (winner !== '') {
if (winner === 'tie') {
message.textContent = "It's a tie!";
} else {
message.textContent = `${winner.toUpperCase()} wins!`;
}
gameOver = true;
return;
}
playerTurn = !playerTurn;
if (!playerTurn) {
// Make computer move
const availableSquares = Array.from(squares).filter(square => !square.classList.contains('x') && !square.classList.contains('o'));
const randomIndex = Math.floor(Math.random() * availableSquares.length);
availableSquares[randomIndex].dispatchEvent(new Event('click'));
}
}
// Initialize the game
resetButton.addEventListener('click', reset);
squares.forEach(square => {
square.addEventListener('click', makeMove);
});
Setelah selesai paste sourcecode di atas, jangan lupa anda simpan (save). Sedangkan untuk menjalankan game tic tac toe google ini cukup anda klik double file index.html atau open dengan browser kesayangan anda, sangat mudah kan?
Demikianlah source code game google Tic Tac Toe yang dapat anda buat sendiri dengan mudah dan cepat. Anda juga dapat mengembangkan dan memodifikasi game ini. Terus ikuti farazinux.com untuk mendapatkan update terbaru.
