<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Catur Mobile</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
#board {
display: grid;
grid-template-columns: repeat(8, 40px);
grid-template-rows: repeat(8, 40px);
gap: 0;
border: 2px solid #333;
margin: 20px;
}
.cell {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.white {
background-color: #f0d9b5;
}
.black {
background-color: #b58863;
}
.controls {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
button {
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Game Catur Sederhana</h1>
<div class="controls">
<button onclick="resetBoard()">Reset</button>
<button onclick="undoMove()">Undo</button>
<button onclick="redoMove()">Redo</button>
</div>
<div id="board"></div>
<script>
const board = [Link]('board');
const initialPosition = [
['♜','♞','♝','♛','♚','♝','♞','♜'],
['♟','♟','♟','♟','♟','♟','♟','♟'],
['','','','','','','',''],
['','','','','','','',''],
['','','','','','','',''],
['','','','','','','',''],
['♙','♙','♙','♙','♙','♙','♙','♙'],
['♖','♘','♗','♕','♔','♗','♘','♖']
];
let boardState = [Link]([Link](initialPosition));
let moveHistory = [];
let redoStack = [];
function drawBoard() {
[Link] = '';
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
const cell = [Link]('div');
[Link] = `cell ${(row + col) % 2 === 0 ? 'white' : 'black'}`;
[Link] = boardState[row][col];
[Link] = () => handleClick(row, col);
[Link](cell);
}
}
}
let selected = null;
function handleClick(row, col) {
if (selected) {
const [srcRow, srcCol] = selected;
const piece = boardState[srcRow][srcCol];
[Link]({ from: [srcRow, srcCol], to: [row, col], piece:
boardState[row][col] });
redoStack = [];
boardState[row][col] = piece;
boardState[srcRow][srcCol] = '';
selected = null;
drawBoard();
} else if (boardState[row][col]) {
selected = [row, col];
}
}
function resetBoard() {
boardState = [Link]([Link](initialPosition));
moveHistory = [];
redoStack = [];
drawBoard();
}
function undoMove() {
if ([Link] === 0) return;
const lastMove = [Link]();
const { from, to, piece } = lastMove;
[Link]({ from, to, piece: boardState[to[0]][to[1]] });
boardState[from[0]][from[1]] = boardState[to[0]][to[1]];
boardState[to[0]][to[1]] = piece;
drawBoard();
}
function redoMove() {
if ([Link] === 0) return;
const move = [Link]();
[Link](move);
boardState[[Link][0]][[Link][1]] = boardState[[Link][0]][[Link][1]];
boardState[[Link][0]][[Link][1]] = '';
drawBoard();
}
drawBoard();
</script>
</body>
</html>