以下が、HTML、CSS、JavaScriptを使った将棋と戦略ゲームを混ぜた、2人でプレイができるアプリの実装例です。
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>将棋＆戦略ゲームアプリ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>将棋＆戦略ゲームアプリ</h1>
<div id="board"></div>
<div id="status"></div>
<div id="turn"></div>
<button id="reset-button">リセット</button>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```css
#board {
display: grid;
grid-template-rows: repeat(8, 50px);
grid-template-columns: repeat(8, 50px);
}
#board > div {
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}
.white {
background-color: #e6e6e6;
}
.black {
background-color: #8c8c8c;
color: white;
}
```
JavaScript:
```js
const pieces = {
'♔': 'king',
'♕': 'queen',
'♖': 'rook',
'♗': 'bishop',
'♘': 'knight',
'♙': 'pawn',
'♚': 'king',
'♛': 'queen',
'♜': 'rook',
'♝': 'bishop',
'♞': 'knight',
'♟': 'pawn'
}
let board = [];
let turn = 'white';
let selectedPiece = null;
function createBoard() {
const boardDiv = document.querySelector('#board');
boardDiv.innerHTML = '';
board = new Array(8).fill(null).map(() => new Array(8).fill(null));
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
const cell = document.createElement('div');
cell.dataset.row = row;
cell.dataset.col = col;
cell.addEventListener('click', handleCellClick);
boardDiv.appendChild(cell);
if ((row + col) % 2 === 0) {
cell.classList.add('white');
} else {
cell.classList.add('black');
}
if (row < 2 || row > 5) {
const piece = document.createElement('span');
if (row < 2) {
board[row][col] = { type: 'piece', color: 'black', piece: Object.keys(pieces)[col] };
piece.textContent = board[row][col].piece;
} else {
board[row][col] = { type: 'piece', color: 'white', piece: Object.keys(pieces)[col+6] };
piece.textContent = board[row][col].piece;
}
cell.appendChild(piece);
} else {
board[row][col] = { type: 'empty' };
}
}
}
}
function handleCellClick(e) {
const row = parseInt(e.target.dataset.row);
const col = parseInt(e.target.dataset.col);
const piece = board[row][col];
if (selectedPiece) {
if (selectedPiece.row === row && selectedPiece.col === col) {
selectedPiece = null;
clearHighlights();
return;
}
if (piece.type === 'empty') {
movePiece(selectedPiece.row, selectedPiece.col, row, col);
selectedPiece = null;
clearHighlights();
return;
}
if (piece.color !== selectedPiece.color) {
capturePiece(selectedPiece.row, selectedPiece.col, row, col);
selectedPiece = null;
clearHighlights();
return;
}
}
if (piece.type !== 'empty' && piece.color === turn) {
selectedPiece = { row: row, col: col, color: piece.color, piece: piece.piece };
highlightMoves(row, col);
}
}
function movePiece(fromRow, fromCol, toRow, toCol) {
board[toRow][toCol] = { type: 'piece', color: board[fromRow][fromCol].color, piece: board[fromRow][fromCol].piece };
board[fromRow][fromCol] = { type: 'empty' };
endTurn();
}
function capturePiece(fromRow, fromCol, toRow, toCol) {
console.log(`Capturing ${board[toRow][toCol].piece} at [${toRow}, ${toCol}]`);
board[toRow][toCol] = { type: 'piece', color: board[fromRow][fromCol].color, piece: board[fromRow][fromCol].piece };
board[fromRow][fromCol] = { type: 'empty' };
endTurn();
}
function highlightMoves(row, col) {
// Highlight possible moves for the selected piece here
}
function clearHighlights() {
// Clear any highlighted moves on the board here
}
function endTurn() {
turn = (turn === 'white') ? 'black' : 'white';
document.querySelector('#turn').textContent = `${turn}'s turn`;
// Check for check/checkmate/other end game scenarios here
console.log(`Turn ended. ${turn}'s turn.`);
}
function init() {
createBoard();
document.querySelector('#reset-button').addEventListener('click', createBoard);
document.querySelector('#turn').textContent = `${turn}'s turn`;
}
init();
```
このアプリは、将棋の駒の動きを基にした戦略ゲームをプレイできます。クリックすることで、駒を選択し、移動先を決定することができます。一度選択した駒を再度クリックすることで、選択を解除することもできます。リセットボタンをクリックすると、ゲームをリセットし、再度初期配置でプレイすることができます。
本アプリには、いくつかの機能が追加できます。例えば、マウスを使うのではなく、デバイスのタッチ機能を利用して駒を選択できるようにする、選択した駒の可能性のある移動先を強調表示する、キャプチャーの際にジョークを表示するなどです。
