今まで行った授業内容

オセロ

document.addEventListener(‘DOMContentLoaded’, function () {
const board = document.getElementById(‘board’);
const turuPlayer = document.getElementById(‘turuPlayer’);
const blackScore = document.getElementById(‘blackScore’);
const whiteScore = document.getElementById(‘whiteScore’);
let cells = [];
let currentPlayer = ‘black’;
let scores = { black: 2, white: 2 };

const directions = [[0, 1], [1, 0], [0, -1], [-1, 0],[1, 1], [-1, -1], [1, -1], [-1, 1] ];

function createBoard() {
for (let row = 0; row < 8; row++) {
cells

= [];
for (let col = 0; col handleCellClick(row,col));
board.appendChild(cell);
cells[col] = cell;
}
}
initializeBoard();
}

function initializeBoard() {
placeDisc(3, 3, ‘white’);
placeDisc(3, 4, ‘black’);
placeDisc(4, 3, ‘black’);
placeDisc(4, 4, ‘white’);
}

function placeDisc(row, col, color) {
const disc = document.createElement(‘div’);
disc.classList.add(color);
cells

[col].appendChild(disc);
cells[col].dataset.color = color;
}

function handleCellClick(row, col) {
if (!isValidMove(row, col, currentPlayer)) {
return;
}

makeMove(row, col, currentPlayer);
currentPlayer = currentPlayer === ‘black’ ? ‘white’ : ‘black’;
turnPlayer.textContent = currentPlayer.charAt(0).toUpperCase() + currentPlayer.slice(1);
updateScore();
if (currentPlayer === ‘white’) {
setTimeout(aiMove, 500);
}
}

function isValidMove(row, col, color) {
if (cells

[col].dataset.color) {
return false;
}
return directions.some(([dx, dy]) => {
return canFlip(row, col, dx, dy, color);
});
}

function canFlip(row, col, dx, dy, color) {
let x = row + dx;
let y = col + dy;
let hasOpponentDisc = false;
while (isInBounds(x, y)) {
if (!cells[x][y].dataset.color) {
return false;
} else if (cells[x][y].dataset.color !== color) {
hasOpponentDisc = true;
} else if (hasOpponentDisc) {
return true;
} else {
return false;
}
x += dx;
y += dy;
}
return false;
}

function isInBounds(x, y) {
return x >= 0 && x = 0 && y {
if (canFlip(row, col, dx, dy, color)) {
flipDiscs(row, col, dx, dy, color);
}
});
}

function flipDiscs(row, col, dx, dy, color) {
let x = row + dx;
let y = col + dy;
while (cells[x][y].dataset.color !== color) {
cells[x][y].dataset.color = color;
cells[x][y].firstChild.className = color;
x += dx;
y += dy;
}
}

function updateScore() {
let black = 0;
let white = 0;
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
if (cells

[col].dataset.color === 'black') {
black++;
} else if (cells[col].dataset.color === 'white') {
white++;
}
}
}
scores.black = black;
scores.white = white;
blackScore.textContent = black;
whiteScore.textContent = white;
}

function aiMove() {
let validMoves = [];
for (let row = 0; row < 8; row++) {
for (let col = 0; col 0) {
const

= validMoves[Math.floor(Math.random() *
validMoves.length)];
makeMove(row, col, currentPlayer);
currentPlayer = currentPlayer === ‘black’ ? ‘white’ : ‘black’;
turnPlayer.textContent = currentPlayer.charAt(0).toUpperCase() +
currentPlayer.slice(1);
updateScore();
}
}

createBoard();
});

#game {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
#board {
display: grid;
grid-template-columns: repeat(8, 50px);
grid-template-rows: repeat(8, 50px);
gap: 2px;
}
.cell {
width: 50px;
height: 50px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.black {
background-color: black;
border-radius: 50%;
width: 40px;
height: 40px;
}
.white {
background-color: white;
border-radius: 50%;
width: 40px;
height: 40px;
}
#info {
margin-top: 10px;
}