以下は、ユーザーの要望に基づいて実装したオセロゲームです。黒い面がランダムに現れ、クリックするとスコアが加算されます。
```html
<!DOCTYPE html>
<html>
<head>
<title>オセロゲーム</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}
#board {
display: flex;
flex-wrap: wrap;
width: 360px;
height: 360px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.cell {
width: 33.33%;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}
</style>
</head>
<body>
<h1>オセロゲーム</h1>
<h3 id="score">スコア: 0</h3>
<div id="board"></div>
<script>
var score = 0;
function createCell() {
var cell = document.createElement('div');
cell.classList.add('cell');
cell.addEventListener('click', function() {
score++;
updateScore();
cell.style.backgroundColor = '#fff';
cell.style.pointerEvents = 'none';
});
return cell;
}
function updateScore() {
var scoreElement = document.getElementById('score');
scoreElement.textContent = 'スコア: ' + score;
}
function getRandomCell() {
var cells = document.getElementsByClassName('cell');
var emptyCells = [];
for (var i = 0; i < cells.length; i++) {
if (cells[i].style.backgroundColor === '') {
emptyCells.push(cells[i]);
}
}
return emptyCells[Math.floor(Math.random() * emptyCells.length)];
}
function spawnRandomCell() {
var randomCell = getRandomCell();
randomCell.style.backgroundColor = 'black';
randomCell.style.pointerEvents = 'auto';
}
setInterval(spawnRandomCell, 1000);
var board = document.getElementById('board');
for (var i = 0; i < 9; i++) {
board.appendChild(createCell());
}
</script>
</body>
</html>
```
ジョーク: オセロゲームに参加することが面白くないようなら、もしかして「裏」をやっているかもしれませんね!