Tugas 6 Pweb Membuat Game Sederhana
Nama : Afel Allaric Absor
NRP : 5025231140
Kelas :Pemrograman Web (E)
Tugas 6 Membuat Game Sederhana
- Pada tugas kali ini saya membuat game tic tac toe sederhana 3 kali 3 dengan player O dan X. Pemenangn dari game ini adalah yang pertama bisa membuat garis horizontal/vertikal/diagonal menggunakan tanda mereka sendiri O/X. Dalam game ini pemain dapat menghalangi pemain lain yang ingin membentuk garis tersebut. Berikut adalah contoh gamenya saat sudah selesai :
Berikut adalah kode-kode untuk membuat game tersebut :
- index.html :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<div id="game">
<div class="cell" data-index="0"></div>
<div class="cell" data-index="1"></div>
<div class="cell" data-index="2"></div>
<div class="cell" data-index="3"></div>
<div class="cell" data-index="4"></div>
<div class="cell" data-index="5"></div>
<div class="cell" data-index="6"></div>
<div class="cell" data-index="7"></div>
<div class="cell" data-index="8"></div>
</div>
<div id="status"></div>
<button id="resetBtn" style="display: none;">Reset</button>
<script src="script.js"></script>
</body>
</html>
___________________________________________________________________________________
- styles.css :
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
h1 {
margin-bottom: 20px;
}
#game {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
}
.cell {
background-color: #fff;
border: 2px solid #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
cursor: pointer;
transition: background-color 0.3s;
}
.cell:hover {
background-color: #e0e0e0;
}
#status {
margin-top: 20px;
font-size: 1.2em;
}
#resetBtn {
margin-top: 10px;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
#resetBtn:hover {
background-color: #555;
}
___________________________________________________________________________________
- script.js :
const cells = document.querySelectorAll('.cell');
const statusDiv = document.getElementById('status');
const resetBtn = document.getElementById('resetBtn');
let board = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'O';
let gameActive = true;
const winningCombinations = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
];
function handleCellClick(e) {
const index = e.target.getAttribute('data-index');
if (board[index] !== '' || !gameActive) {
return;
}
board[index] = currentPlayer;
e.target.textContent = currentPlayer;
checkResult();
}
function checkResult() {
let roundWon = false;
for (let i = 0; i < winningCombinations.length; i++) {
const [a, b, c] = winningCombinations[i];
if (board[a] === '' || board[b] === '' || board[c] === '') {
continue;
}
if (board[a] === board[b] && board[b] === board[c]) {
roundWon = true;
break;
}
}
if (roundWon) {
statusDiv.textContent = currentPlayer + ' menang';
gameActive = false;
resetBtn.style.display = 'inline-block';
return;
}
if (!board.includes('')) {
statusDiv.textContent = 'Seri';
gameActive = false;
resetBtn.style.display = 'inline-block';
return;
}
currentPlayer = currentPlayer === 'O' ? 'X' : 'O';
statusDiv.textContent = `Giliran ${currentPlayer}`;
}
function resetGame() {
board = ['', '', '', '', '', '', '', '', ''];
gameActive = true;
currentPlayer = 'O';
statusDiv.textContent = `Giliran ${currentPlayer}`;
cells.forEach(cell => cell.textContent = '');
resetBtn.style.display = 'none';
}
cells.forEach(cell => cell.addEventListener('click', handleCellClick));
resetBtn.addEventListener('click', resetGame);
statusDiv.textContent = `Giliran ${currentPlayer}`;
___________________________________________________________________________________
-Link github repository yang berisi kode kodenya : https://github.com/afelallaric/afelallaric.github.io.git
-Link Web tempat game dapat dimainkan : https://afelallaric.github.io/
Komentar
Posting Komentar