1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
将棋風ゲーム：黒（先手）と白との対戦です！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2人用の将棋風ゲーム</title>
<style>
#board {
width: 400px;
height: 400px;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}
.tile {
width: 50px;
height: 50px;
float: left;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}
.tile.white {
background-color: #f0d9b5;
}
.tile.black {
background-color: #b58863;
color: #fff;
}
.piece {
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
position: absolute;
}
.piece.black {
background-color: #333;
}
.piece.white {
background-color: #fff;
border: 1px solid #333;
}
</style>
</head>
<body>
<div id="board">
<div class="tile white"><span>1</span></div>
<div class="tile black"><span>2</span><div class="piece black"></div></div>
<div class="tile white"><span>3</span></div>
<div class="tile black"><span>4</span><div class="piece black"></div></div>
<div class="tile white"><span>5</span></div>
<div class="tile black"><span>6</span><div class="piece black"></div></div>
<div class="tile white"><span>7</span></div>
<div class="tile black"><span>8</span><div class="piece black"></div></div>
<div class="tile white"><span>9</span><div class="piece black"></div></div>
<div class="tile black"><span>10</span></div>
<div class="tile white"><span>11</span><div class="piece white"></div></div>
<div class="tile black"><span>12</span></div>
<div class="tile white"><span>13</span><div class="piece white"></div></div>
<div class="tile black"><span>14</span></div>
<div class="tile white"><span>15</span><div class="piece white"></div></div>
<div class="tile black"><span>16</span></div>
<div class="tile white"><span>17</span><div class="piece white"></div></div>
<div class="tile black"><span>18</span><div class="piece white"></div></div>
<div class="tile white"><span>19</span></div>
<div class="tile black"><span>20</span></div>
<div class="tile white"><span>21</span><div class="piece white"></div></div>
<div class="tile black"><span>22</span></div>
<div class="tile white"><span>23</span><div class="piece white"></div></div>
<div class="tile black"><span>24</span></div>
<div class="tile white"><span>25</span><div class="piece white"></div></div>
</div>
<script>
// 2人用の将棋風ゲーム
// 初期状態を設定
let turnCounter = 1;
let activePiece = null;
let board = [
{position: 1, color: 'white', piece: 'none'},
{position: 2, color: 'black', piece: 'black'},
{position: 3, color: 'white', piece: 'none'},
{position: 4, color: 'black', piece: 'black'},
{position: 5, color: 'white', piece: 'none'},
{position: 6, color: 'black', piece: 'black'},
{position: 7, color: 'white', piece: 'none'},
{position: 8, color: 'black', piece: 'black'},
{position: 9, color: 'white', piece: 'black'},
{position: 10, color: 'black', piece: 'none'},
{position: 11, color: 'white', piece: 'white'},
{position: 12, color: 'black', piece: 'none'},
{position: 13, color: 'white', piece: 'white'},
{position: 14, color: 'black', piece: 'none'},
{position: 15, color: 'white', piece: 'white'},
{position: 16, color: 'black', piece: 'none'},
{position: 17, color: 'white', piece: 'white'},
{position: 18, color: 'black', piece: 'white'},
{position: 19, color: 'white', piece: 'none'},
{position: 20, color: 'black', piece: 'none'},
{position: 21, color: 'white', piece: 'white'},
{position: 22, color: 'black', piece: 'none'},
{position: 23, color: 'white', piece: 'white'},
{position: 24, color: 'black', piece: 'none'},
{position: 25, color: 'white', piece: 'white'}
];
// 各タイルをクリックしたときの処理
const tiles = document.querySelectorAll('.tile');
tiles.forEach(tile => {
tile.addEventListener('click', () => {
const position = parseInt(tile.getElementsByTagName('span')[0].innerText);
const currentPiece = board.find(p => p.position === position);
if (activePiece && currentPiece.piece === 'none' && isValidMove(activePiece.position, position, activePiece.color)) {
activePiece.position = position;
updateBoard(activePiece.position, 'piece', activePiece.color);
updateBoard(currentPiece.position, 'piece', 'none');
checkGameOver();
switchTurn();
} else {
if (currentPiece.piece !== 'none' && currentPiece.piece.color === 'black' && turnCounter % 2 === 1 ||
currentPiece.piece !== 'none' && currentPiece.piece.color === 'white' && turnCounter % 2 === 0) {
activePiece = currentPiece.piece;
}
}
});
});
// ボード更新関数
function updateBoard(position, key, value) {
board.find(p => p.position === position)[key] = value;
}
// ターン交代関数
function switchTurn() {
turnCounter++;
}
// ゲームオーバー判定関数
function checkGameOver() {
const whitePieces = board.filter(p => p.piece !== 'none' && p.piece.color === 'white');
const blackPieces = board.filter(p => p.piece !== 'none' && p.piece.color === 'black');
if (whitePieces.length === 0) {
alert("黒の勝ち");
} else if (blackPieces.length === 0) {
alert("白の勝ち");
}
}
// プレイヤーターンの棋譜のフォーマットを要する関数
function isValidMove(startPosition, endPosition, color) {
const startPiece = board.find(p => p.position === startPosition && p.piece !== 'none');
const endPiece = board.find(p => p.position === endPosition);
if (!startPiece || !startPiece.piece || startPiece.piece.color !== color) {
return false;
}
if (endPiece.piece && endPiece.piece.color === color) {
return false;
}
if (startPiece.piece.type === 'pawn' && endPiece.piece &&
(Math.abs(startPiece.position - endPiece.position) === 1) &&
((color === 'white' && (endPiece.position - startPiece.position) === 4)) ||
(color === 'black' && (startPiece.position - endPiece.position) === 4)) {
return false;
}
return true;
}
</script>
<div>将棋風ゲーム：黒（先手）と白との対戦です！</div>
</body>
</html>