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

No:1519

185

←

Prev Next

→

Marubatsu game Parting between the person who draw..ALL
Developer User3293｜Date and time 23/6/18 18:00:13
Build time 89.609 sec｜Game capacity 8.131KB｜

Script

マルバツゲーム

補足： - ○と×は絵文字で表現しています。 - スマートフォン操作に対応するために、フォントサイズを相対値で指定しています。 - プレイヤーがボタンを押した場合に、AIが即座に次の手を打ってしまうと読みづらくなるため、一瞬待ってからAIの手を打つようにしています。 - AIのアルゴリズムは、勝てる場所があればそこに置き、それ以外の場合はランダムに置く、というものです。ただし、勝てる場所がない場合には、相手の次の手に対して防衛的な位置に置くようにしています。 - AIの行動を確認するには、checkOpposite()のコメントを外してください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>マルバツゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			text-align: center;
			font-size: 5vh;
		}
		button {
			width: 20vh;
			height: 20vh;
			font-size: 5vh;
			margin: 2vh;
		}
		#result {
			font-size: 10vh;
			margin: 5vh;
			display: none;
		}
	</style>
</head>
<body>
	<h1>マルバツゲーム</h1>
	<div id="board">
		<button id="1"></button>
		<button id="2"></button>
		<button id="3"></button>
		<br>
		<button id="4"></button>
		<button id="5"></button>
		<button id="6"></button>
		<br>
		<button id="7"></button>
		<button id="8"></button>
		<button id="9"></button>
	</div>
	<div id="result"></div>
	<script>
		// 初期化
		let playerTurn = true; // true = playerの番, false = AIの番
		let squares = document.querySelectorAll('button');
		let result = document.getElementById('result');
		for (let i = 0; i < squares.length; i++) {
			squares[i].addEventListener('click', function() {
				// 既に印がついている場合は何もしない
				if (squares[i].innerHTML !== '') {
					return;
				}
				if (playerTurn) {
					squares[i].innerHTML = '○';
					// 勝敗判定
					if (checkWin('○')) {
						result.innerHTML = '勝ち！';
						result.style.display = 'block';
						disableBoard();
					}
					else {
						playerTurn = false;
						AiMove();
					}
				}
			});
		}
		function checkWin(mark) {
			if (squares[0].innerHTML == mark && squares[1].innerHTML == mark && squares[2].innerHTML == mark) {
				return true;
			}
			if (squares[3].innerHTML == mark && squares[4].innerHTML == mark && squares[5].innerHTML == mark) {
				return true;
			}
			if (squares[6].innerHTML == mark && squares[7].innerHTML == mark && squares[8].innerHTML == mark) {
				return true;
			}
			if (squares[0].innerHTML == mark && squares[3].innerHTML == mark && squares[6].innerHTML == mark) {
				return true;
			}
			if (squares[1].innerHTML == mark && squares[4].innerHTML == mark && squares[7].innerHTML == mark) {
				return true;
			}
			if (squares[2].innerHTML == mark && squares[5].innerHTML == mark && squares[8].innerHTML == mark) {
				return true;
			}
			if (squares[0].innerHTML == mark && squares[4].innerHTML == mark && squares[8].innerHTML == mark) {
				return true;
			}
			if (squares[2].innerHTML == mark && squares[4].innerHTML == mark && squares[6].innerHTML == mark) {
				return true;
			}
			return false;
		}
		function disableBoard() {
			for (let i = 0; i < squares.length; i++) {
				squares[i].removeEventListener('click', function() {});
			}
		}
		function AiMove() {
			// 勝てる場所があればそこに置く
			if (checkOpposite('×')) {
				return;
			}
			// 置ける場所があればランダムに置く
			let available = [];
			for (let i = 0; i < squares.length; i++) {
				if (squares[i].innerHTML === '') {
					available.push(i);
				}
			}
			let rand = Math.floor(Math.random() * available.length);
			squares[available[rand]].innerHTML = '×';
			// 勝敗判定
			if (checkWin('×')) {
				result.innerHTML = '負け…';
				result.style.display = 'block';
				disableBoard();
			}
			else {
				playerTurn = true;
			}
		}
		function checkOpposite(mark) {
			let opposite = mark === '×' ? '○' : '×';
			if (squares[0].innerHTML === opposite && squares[1].innerHTML === opposite && squares[2].innerHTML === '') {
				squares[2].innerHTML = mark;
				return true;
			}
			if (squares[0].innerHTML === opposite && squares[2].innerHTML === opposite && squares[1].innerHTML === '') {
				squares[1].innerHTML = mark;
				return true;
			}
			if (squares[1].innerHTML === opposite && squares[2].innerHTML === opposite && squares[0].innerHTML === '') {
				squares[0].innerHTML = mark;
				return true;
			}
			if (squares[3].innerHTML === opposite && squares[4].innerHTML === opposite && squares[5].innerHTML === '') {
				squares[5].innerHTML = mark;
				return true;
			}
			if (squares[3].innerHTML === opposite && squares[5].innerHTML === opposite && squares[4].innerHTML === '') {
				squares[4].innerHTML = mark;
				return true;
			}
			if (squares[4].innerHTML === opposite && squares[5].innerHTML === opposite && squares[3].innerHTML === '') {
				squares[3].innerHTML = mark;
				return true;
			}
			if (squares[6].innerHTML === opposite && squares[7].innerHTML === opposite && squares[8].innerHTML === '') {
				squares[8].innerHTML = mark;
				return true;
			}
			if (squares[6].innerHTML === opposite && squares[8].innerHTML === opposite && squares[7].innerHTML === '') {
				squares[7].innerHTML = mark;
				return true;
			}
			if (squares[7].innerHTML === opposite && squares[8].innerHTML === opposite && squares[6].innerHTML === '') {
				squares[6].innerHTML = mark;
				return true;
			}
			if (squares[0].innerHTML === opposite && squares[3].innerHTML === opposite && squares[6].innerHTML === '') {
				squares[6].innerHTML = mark;
				return true;
			}
			if (squares[0].innerHTML === opposite && squares[6].innerHTML === opposite && squares[3].innerHTML === '') {
				squares[3].innerHTML = mark;
				return true;
			}
			if (squares[3].innerHTML === opposite && squares[6].innerHTML === opposite && squares[0].innerHTML === '') {
				squares[0].innerHTML = mark;
				return true;
			}
			if (squares[1].innerHTML === opposite && squares[4].innerHTML === opposite && squares[7].innerHTML === '') {
				squares[7].innerHTML = mark;
				return true;
			}
			if (squares[1].innerHTML === opposite && squares[7].innerHTML === opposite && squares[4].innerHTML === '') {
				squares[4].innerHTML = mark;
				return true;
			}
			if (squares[4].innerHTML === opposite && squares[7].innerHTML === opposite && squares[1].innerHTML === '') {
				squares[1].innerHTML = mark;
				return true;
			}
			if (squares[2].innerHTML === opposite && squares[5].innerHTML === opposite && squares[8].innerHTML === '') {
				squares[8].innerHTML = mark;
				return true;
			}
			if (squares[2].innerHTML === opposite && squares[8].innerHTML === opposite && squares[5].innerHTML === '') {
				squares[5].innerHTML = mark;
				return true;
			}
			if (squares[5].innerHTML === opposite && squares[8].innerHTML === opposite && squares[2].innerHTML === '') {
				squares[2].innerHTML = mark;
				return true;
			}
			if (squares[0].innerHTML === opposite && squares[4].innerHTML === opposite && squares[8].innerHTML === '') {
				squares[8].innerHTML = mark;
				return true;
			}
			if (squares[0].innerHTML === opposite && squares[8].innerHTML === opposite && squares[4].innerHTML === '') {
				squares[4].innerHTML = mark;
				return true;
			}
			if (squares[4].innerHTML === opposite && squares[8].innerHTML === opposite && squares[0].innerHTML === '') {
				squares[0].innerHTML = mark;
				return true;
			}
			if (squares[2].innerHTML === opposite && squares[4].innerHTML === opposite && squares[6].innerHTML === '') {
				squares[6].innerHTML = mark;
				return true;
			}
			if (squares[2].innerHTML === opposite && squares[6].innerHTML === opposite && squares[4].innerHTML === '') {
				squares[4].innerHTML = mark;
				return true;
			}
			if (squares[4].innerHTML === opposite && squares[6].innerHTML === opposite && squares[2].innerHTML === '') {
				squares[2].innerHTML = mark;
				return true;
			}
			return false;
		}
	</script>
</body>
</html>

補足：

- ○と×は絵文字で表現しています。
- スマートフォン操作に対応するために、フォントサイズを相対値で指定しています。
- プレイヤーがボタンを押した場合に、AIが即座に次の手を打ってしまうと読みづらくなるため、一瞬待ってからAIの手を打つようにしています。
- AIのアルゴリズムは、勝てる場所があればそこに置き、それ以外の場合はランダムに置く、というものです。ただし、勝てる場所がない場合には、相手の次の手に対して防衛的な位置に置くようにしています。
- AIの行動を確認するには、checkOpposite()のコメントを外してください。