以下は、JavaScriptを使って1つのHTMLファイルとして実装したオセロゲームの例です。
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>オセロ</title>
<style>
table {
border-collapse: collapse;
margin: 20px auto;
}
td {
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
cursor: pointer;
}
#turn {
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>オセロ</h1>
<table id="board"></table>
<div id="turn"></div>
<script src="osero.js"></script>
</body>
</html>
```
JavaScript:
```javascript
// ゲームの設定
const ROWS = 8;
const COLS = 8;
const PLAYER_1 = 1;
const PLAYER_2 = 2;
// ゲームの初期表示
let turn = PLAYER_1;
showTurn();
let board = createBoard();
renderBoard(board);
// ゲームの処理
function createBoard() {
let board = [];
for (let i = 0; i < ROWS; i++) {
let row = [];
for (let j = 0; j < COLS; j++) {
row.push(0);
}
board.push(row);
}
board[3][3] = PLAYER_1;
board[3][4] = PLAYER_2;
board[4][3] = PLAYER_2;
board[4][4] = PLAYER_1;
return board;
}
function renderBoard(board) {
let table = document.getElementById('board');
for (let i = 0; i < ROWS; i++) {
let row = document.createElement('tr');
for (let j = 0; j < COLS; j++) {
let cell = document.createElement('td');
cell.addEventListener('click', function() {
if (isValidMove(i, j)) {
makeMove(i, j);
turn = (turn === PLAYER_1) ? PLAYER_2 : PLAYER_1;
showTurn();
renderBoard(board);
}
});
if (board[i][j] === PLAYER_1) {
cell.textContent = '●';
cell.style.color = 'black';
}
else if (board[i][j] === PLAYER_2) {
cell.textContent = '●';
cell.style.color = 'white';
}
row.appendChild(cell);
}
table.appendChild(row);
}
}
function isValidMove(row, col) {
if (board[row][col] !== 0) {
return false;
}
let dirs = [
[0, -1], [0, 1], [-1, 0], [1, 0],
[-1, -1], [-1, 1], [1, -1], [1, 1]
];
for (let d of dirs) {
let r = row + d[0];
let c = col + d[1];
let hasOpponentPiece = false;
while (r >= 0 && r < ROWS && c >= 0 && c < COLS) {
if (board[r][c] === 0) {
break;
}
if (board[r][c] === turn) {
if (hasOpponentPiece) {
return true;
}
else {
break;
}
}
else {
hasOpponentPiece = true;
}
r += d[0];
c += d[1];
}
}
return false;
}
function makeMove(row, col) {
board[row][col] = turn;
let dirs = [
[0, -1], [0, 1], [-1, 0], [1, 0],
[-1, -1], [-1, 1], [1, -1], [1, 1]
];
for (let d of dirs) {
let r = row + d[0];
let c = col + d[1];
let piecesToFlip = [];
while (r >= 0 && r < ROWS && c >= 0 && c < COLS) {
if (board[r][c] === 0) {
break;
}
if (board[r][c] === turn) {
piecesToFlip.forEach(function(p) {
board[p[0]][p[1]] = turn;
});
break;
}
else {
piecesToFlip.push([r, c]);
}
r += d[0];
c += d[1];
}
}
}
function showTurn() {
let turnMessage = '';
if (turn === PLAYER_1) {
turnMessage = '黒のターン';
}
else if (turn === PLAYER_2) {
turnMessage = '白のターン';
}
let turnDiv = document.getElementById('turn');
turnDiv.textContent = turnMessage;
}
```
ジョークに関しては、以下のように実装することができます。
「オセロって異常に難しくないですか？」
「そんなことないです、初心者でもできます。ちなみに私の初オセロは何年かかりましたが、今ではCPUと互角に戦えるまでになりました。」
