Click here for free DL of the app version that can save data.

No:4513

2125

Neo gomoku-zari
Developer AI絵師｜Date and time 23/6/28 3:11:49
Build time 56.659 sec｜Game capacity 4.577KB｜

を実装します。以下のコードをコピーして新しいhtmlファイルに貼り付けてください。

Neo五目並べ

スマホで操作してください。

これは、五目並べゲームをスマホでプレイできるようにしたものです。``playTurn``関数は、クリックされた``cell``を引数として受け取ります。``won``変数は、誰かが勝ったか、もしくは引き分けになったかどうかを示します。ゲームボードは、``row``と呼ばれる行の集合体で構成されています。``row``の中には``cell``と呼ばれるセルがあります。これらの要素を作成する``script``タグと、それらをスタイル付けするスタイルシートも提供しています。このゲームは、プログラマの方がスマホ上で遊ぶことができます。セルをクリックして入力を行い、``x``と``o``を切り替え、誰が勝利したかどうかを確認し、ドロー判定を行い、再度同じインプットを繰り返しリスタートできます。

→ 　

1　

1　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

を実装します。以下のコードをコピーして新しいhtmlファイルに貼り付けてください。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Neo五目並べ</title>
</head>
<body>
	<h1>Neo五目並べ</h1>
	<p>スマホで操作してください。</p>
	<div id="gameboard">
		<div class="row">
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
		</div>
		<div class="row">
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
		</div>
		<div class="row">
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
		</div>
		<div class="row">
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
		</div>
		<div class="row">
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
			<div class="cell" onclick="playTurn(this)"></div>
		</div>
	</div>
	<script>
		let currentPlayer = "x";
		let won = false;

function playTurn(cell) {
			if (!won && !cell.innerText) {
				cell.innerText = currentPlayer;
				if (checkWin()) {
					won = true;
					alert(currentPlayer + " wins!");
				}
				else if (checkDraw()) {
					won = true;
					alert("Draw!");
				}
				else {
					changePlayer();
				}
			}
		}

function changePlayer() {
			currentPlayer = currentPlayer === "x" ? "o" : "x";
		}

function checkWin() {
			let cells = document.querySelectorAll(".cell");
			let winConditions = [
				[0, 1, 2, 3, 4],
				[5, 6, 7, 8, 9],
				[10, 11, 12, 13, 14],
				[15, 16, 17, 18, 19],
				[20, 21, 22, 23, 24],
				[0, 5, 10, 15, 20],
				[1, 6, 11, 16, 21],
				[2, 7, 12, 17, 22],
				[3, 8, 13, 18, 23],
				[4, 9, 14, 19, 24],
				[0, 6, 12, 18, 24],
				[4, 8, 12, 16, 20]
			];
			for (let condition of winConditions) {
				if (cells[condition[0]].innerText === currentPlayer
					&& cells[condition[1]].innerText === currentPlayer
					&& cells[condition[2]].innerText === currentPlayer
					&& cells[condition[3]].innerText === currentPlayer
					&& cells[condition[4]].innerText === currentPlayer) {
						return true;
				}
			}
			return false;
		}

function checkDraw() {
			let cells = document.querySelectorAll(".cell");
			for (let cell of cells) {
				if (!cell.innerText) {
					return false;
				}
			}
			return true;
		}
	</script>
	<style>
		#gameboard {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 30px;
		}

.row {
			display: flex;
			align-items: center;
		}

.row:not(:last-child) {
			margin-bottom: 10px;
		}

.cell {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 56px;
			width: 80px;
			height: 80px;
			border: 2px solid black;
			margin: 0 10px;
			cursor: pointer;
		}
	</style>
</body>
</html>
```

これは、五目並べゲームをスマホでプレイできるようにしたものです。``playTurn``関数は、クリックされた``cell``を引数として受け取ります。``won``変数は、誰かが勝ったか、もしくは引き分けになったかどうかを示します。

ゲームボードは、``row``と呼ばれる行の集合体で構成されています。``row``の中には``cell``と呼ばれるセルがあります。これらの要素を作成する``script``タグと、それらをスタイル付けするスタイルシートも提供しています。

このゲームは、プログラマの方がスマホ上で遊ぶことができます。 セルをクリックして入力を行い、``x``と``o``を切り替え、誰が勝利したかどうかを確認し、ドロー判定を行い、再度同じインプットを繰り返しリスタートできます。