今日書いたソース
ゆなオセロ
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<script>
document.addEventListener(‘DOMContentLoaded’,function () {
const board = document.getElementById(‘board’);
const turnPlayer = document.getElementById(‘turnPlayer’);
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 < 8; col++) {
const cell = document.createElement(‘div’);
cell.classList.add(‘cell’);
cell.dataset.row = row;
cell.dataset.col = col;
cell.addEventListener(‘click’,() => handleCellClick(row,col));
board.appendChid(cell);
cells
}
}
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
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
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 has0pponentDisc = false;
while (isInBounds(x, y)) {
if (!cells[x][y].dataset.color) {
return false;
} else if (cells[x][y].dataset.color !== color) {
has0pponentDisc = true;
} else if (has0pponentDisc) {
return true;
} else {
return false;
}
x += dx;
y += dy;
}
return false;
}
function isInBounds(x, y) {
return x >= 0 && x < 8 && y>= 0 && y < 8;
}
function makeMove(row, col, color) {
placeDisc(row, col, color) ;
directions.forEach(([dx, dy]) => {
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;
cella[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
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 < 8; col++) {
if (isValidMove(row, col, currentPlayer)) {
validMoves.push(
}
}
}
if (validMoves.length > 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);
updataScore();
}
}
createBoard();
});
</script>
<style>
#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;
}
</style>
<title>オセロ</title>
</head>
<body>
<div id=”game”>
<div id=”board”></div>
<div id=”info”>
<p id=”turn”>Turn: <span id=”turnPlayer”>Black</span></p>
<p id=”score”>Score: Black <span id=”blackScore”>2</span> – White <span id=”whiteScore”>2</span></p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<script>
document.addEventListener(‘DOMContentLoaded’,function () {
const board = document.getElementById(‘board’);
const turnPlayer = document.getElementById(‘turnPlayer’);
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 < 8; col++) {
const cell = document.createElement(‘div’);
cell.classList.add(‘cell’);
cell.dataset.row = row;
cell.dataset.col = col;
cell.addEventListener(‘click’,() => handleCellClick(row,col));
board.appendChid(cell);
cells
}
}
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
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
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 has0pponentDisc = false;
while (isInBounds(x, y)) {
if (!cells[x][y].dataset.color) {
return false;
} else if (cells[x][y].dataset.color !== color) {
has0pponentDisc = true;
} else if (has0pponentDisc) {
return true;
} else {
return false;
}
x += dx;
y += dy;
}
return false;
}
function isInBounds(x, y) {
return x >= 0 && x < 8 && y>= 0 && y < 8;
}
function makeMove(row, col, color) {
placeDisc(row, col, color) ;
directions.forEach(([dx, dy]) => {
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;
cella[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
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 < 8; col++) {
if (isValidMove(row, col, currentPlayer)) {
validMoves.push(
}
}
}
if (validMoves.length > 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);
updataScore();
}
}
createBoard();
});
</script>
<style>
#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;
}
</style>
<title>オセロ</title>
</head>
<body>
<div id=”game”>
<div id=”board”></div>
<div id=”info”>
<p id=”turn”>Turn: <span id=”turnPlayer”>Black</span></p>
<p id=”score”>Score: Black <span id=”blackScore”>2</span> – White <span id=”whiteScore”>2</span></p>
</div>
</div>
</body>
</html>
