<!DOCTYPE html>
<html>
<head>
<title>Omok Game Visualizer with Automatic Move Parsing</title>
<style>
.board {
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
border: 1px solid black;
width: 450px;
height: 450px;
position: relative;
background-image:
linear-gradient(to right, black 1px, transparent 1px),
linear-gradient(to bottom, black 1px, transparent 1px);
background-size: 30px 30px;
}
.cell {
width: 100%;
height: 100%;
position: relative;
}
.stone {
width: 28px;
height: 28px;
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.black {
background-color: black;
}
.white {
background-color: white;
border: 2px solid black;
}
.controls {
margin-top: 10px;
}
.controls button {
background-color: #f0f0f0; /* 버튼 배경색 */
border: none;
padding: 10px 20px; /* 버튼 패딩 */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; /* 글자 크기 */
margin: 4px 2px; /* 마진 */
transition-duration: 0.4s; /* 트랜지션 지속 시간 */
cursor: pointer; /* 마우스 오버 시 커서 모양 */
box-shadow: 0 9px #999; /* 음영 효과 */
}
.controls button:hover {
background-color: #e7e7e7; /* 마우스 오버 시 배경색 */
box-shadow: 0 5px #666; /* 마우스 오버 시 음영 효과 변경 */
transform: translateY(-4px); /* 마우스 오버 시 버튼을 약간 위로 올림 */
}
</style>
</head>
<body>
<div class="board" id="board"></div>
<div class="controls">
<button onclick="reset()">Reset</button>
<button onclick="previousMove()">Previous Move</button>
<button onclick="nextMove()">Next Move</button>
<button onclick="lastMove()">Last Move</button>
</div>
<script>
const inputMoves = "h8i9h7h6i7j7g8f8g9f10i6f9f7g7i5f11f12";
function parseMoves(moveString) {
const moveArray = [];
const regex = /[a-zA-Z][0-9]{1,2}/g;
let matches;
while ((matches = regex.exec(moveString)) !== null) {
const col = matches[0].charCodeAt(0) - 'a'.charCodeAt(0);
const row = parseInt(matches[0].substring(1)) - 1;
moveArray.push([row, col]);
}
return moveArray;
}
const gameRecord = parseMoves(inputMoves);
const board = document.getElementById('board');
let currentMove = -1;
function createBoard() {
board.innerHTML = '';
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 15; j++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.id = `cell-${i}-${j}`;
board.appendChild(cell);
}
}
}
function placeStone(row, col, color) {
const stone = document.createElement('div');
stone.classList.add('stone', color);
stone.style.top = `${row * 30}px`;
stone.style.left = `${col * 30}px`;
board.appendChild(stone);
}
function updateBoard() {
createBoard();
for (let i = 0; i <= currentMove; i++) {
const move = gameRecord[i];
const color = i % 2 === 0 ? 'black' : 'white';
placeStone(move[0], move[1], color);
}
}
function reset() {
currentMove = -1;
updateBoard();
}
function previousMove() {
currentMove = Math.max(currentMove - 1, -1);
updateBoard();
}
function nextMove() {
currentMove = Math.min(currentMove + 1, gameRecord.length - 1);
updateBoard();
}
function lastMove() {
currentMove = gameRecord.length - 1;
updateBoard();
}
createBoard();
updateBoard();
function parseMoves(moveString) {
const moveArray = [];
const regex = /[a-zA-Z][0-9]{1,2}/g;
let matches;
while ((matches = regex.exec(moveString)) !== null) {
const col = matches[0].charCodeAt(0) - 'a'.charCodeAt(0);
const row = 15 - parseInt(matches[0].substring(1)); // 변경된 부분
moveArray.push([row, col]);
}
return moveArray;
}
</script>
</body>
</html>
이거 수정해서 사용하시면 됩니다.
반응형