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

No:1608

9926

←

Prev Next

→

Marubatsu game A game in which the person (hereina..ALL
Developer anonymous｜Date and time 70/1/1 11:14:56
Build time unknown sec｜Game capacity 8.096KB｜

Script

マルバツゲーム

縦3横3のマス目がある大きさが変わらない正方形に丸を書く人(以下プレイヤー)とバツを書くAI(以下AI)に別れそれぞれ一回ずつマス目を埋めるゲーム

プレイヤーは丸を3つ連続で縦、横、斜めどれか一列書ければ「勝ち」と出る

AIはバツを3つ連続で縦、横、斜めどれか一列書く事を目指し、バツを3つ連続で縦、横、斜めどれか一列書ければ「負け」と出る

プレイヤーが丸を連続3つ書かないように、
プレイヤーが丸を連続で2つ縦、横、斜めどれか一列書いたらその一列で3つ目になるマスをバツで埋めるようにする

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>マルバツゲーム</title>
	<style>
		body {
			font-size: 32px;
			text-align: center;
		}
		table {
			margin: 0 auto;
			border-collapse: collapse;
		}
		td {
			border: 2px solid black;
			width: 80px;
			height: 80px;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>マルバツゲーム</h1>
	<p>縦3横3のマス目がある大きさが変わらない正方形に丸を書く人(以下プレイヤー)とバツを書くAI(以下AI)に別れそれぞれ一回ずつマス目を埋めるゲーム</p>
	<p>プレイヤーは丸を3つ連続で縦、横、斜めどれか一列書ければ「勝ち」と出る</p>
	<p>AIはバツを3つ連続で縦、横、斜めどれか一列書く事を目指し、バツを3つ連続で縦、横、斜めどれか一列書ければ「負け」と出る</p>
	<p>プレイヤーが丸を連続3つ書かないように、<br>プレイヤーが丸を連続で2つ縦、横、斜めどれか一列書いたらその一列で3つ目になるマスをバツで埋めるようにする</p>
	<table>
		<tr>
			<td class="cell" id="0"></td>
			<td class="cell" id="1"></td>
			<td class="cell" id="2"></td>
		</tr>
		<tr>
			<td class="cell" id="3"></td>
			<td class="cell" id="4"></td>
			<td class="cell" id="5"></td>
		</tr>
		<tr>
			<td class="cell" id="6"></td>
			<td class="cell" id="7"></td>
			<td class="cell" id="8"></td>
		</tr>
	</table>

//AIがバツを書く
		function putCross() {
			let id;
			//勝てる場所があるかチェック
			id = winOnNextMove('×');
			if(id !== undefined) {
				document.getElementById(id).innerHTML = '×'; //絵文字のバツ
				document.getElementById(id).style.color = 'red'; //色を赤に
				checkResult(); //結果をチェック
				return;
			}
			//相手が勝てる場所を塞ぐ
			id = winOnNextMove('○');
			if(id !== undefined) {
				document.getElementById(id).innerHTML = '×';
				document.getElementById(id).style.color = 'red';
				checkResult();
				return;
			}
			//ランダムに打つ
			let emptyCells = Array.from(document.getElementsByClassName('cell')).filter(td => td.innerHTML === '');
			let randomId = Math.floor(Math.random() * emptyCells.length);
			emptyCells[randomId].innerHTML = '×';
			emptyCells[randomId].style.color = 'red';
			checkResult();
		}

//勝てる場所があるかどうかチェック
		function winOnNextMove(mark) {
			let id;
			//横（3, 6）
			for(let i=0; i<9; i+=3) {
				if(document.getElementById(i).innerHTML === mark && document.getElementById(i+1).innerHTML === mark && document.getElementById(i+2).innerHTML === '') {
					id = i+2;
					break;
				}
				if(document.getElementById(i).innerHTML === mark && document.getElementById(i+2).innerHTML === mark && document.getElementById(i+1).innerHTML === '') {
					id = i+1;
					break;
				}
				if(document.getElementById(i+1).innerHTML === mark && document.getElementById(i+2).innerHTML === mark && document.getElementById(i).innerHTML === '') {
					id = i;
					break;
				}
			}
			if(id !== undefined) return id;
			//縦（1, 2）
			for(let i=0; i<3; i++) {
				if(document.getElementById(i).innerHTML === mark && document.getElementById(i+3).innerHTML === mark && document.getElementById(i+6).innerHTML === '') {
					id = i+6;
					break;
				}
				if(document.getElementById(i).innerHTML === mark && document.getElementById(i+6).innerHTML === mark && document.getElementById(i+3).innerHTML === '') {
					id = i+3;
					break;
				}
				if(document.getElementById(i+3).innerHTML === mark && document.getElementById(i+6).innerHTML === mark && document.getElementById(i).innerHTML === '') {
					id = i;
					break;
				}
			}
			if(id !== undefined) return id;
			//斜め1（0, 4, 8）
			if(document.getElementById(0).innerHTML === mark && document.getElementById(4).innerHTML === mark && document.getElementById(8).innerHTML === '') return 8;
			if(document.getElementById(0).innerHTML === mark && document.getElementById(8).innerHTML === mark && document.getElementById(4).innerHTML === '') return 4;
			if(document.getElementById(4).innerHTML === mark && document.getElementById(8).innerHTML === mark && document.getElementById(0).innerHTML === '') return 0;
			//斜め2（2, 4, 6）
			if(document.getElementById(2).innerHTML === mark && document.getElementById(4).innerHTML === mark && document.getElementById(6).innerHTML === '') return 6;
			if(document.getElementById(2).innerHTML === mark && document.getElementById(6).innerHTML === mark && document.getElementById(4).innerHTML === '') return 4;
			if(document.getElementById(4).innerHTML === mark && document.getElementById(6).innerHTML === mark && document.getElementById(2).innerHTML === '') return 2;
		}

//結果をチェック
		function checkResult() {
			//1列揃った場合の勝敗判定
			let rows = [
				[0, 1, 2],
				[3, 4, 5],
				[6, 7, 8],
				[0, 3, 6],
				[1, 4, 7],
				[2, 5, 8],
				[0, 4, 8],
				[2, 4, 6]
			];
			for(let i=0; i<rows.length; i++) {
				if(document.getElementById(rows[i][0]).innerHTML === '○' && document.getElementById(rows[i][1]).innerHTML === '○' && document.getElementById(rows[i][2]).innerHTML === '○') {
					alert('勝ち！（プレイヤー）');
					gameover = true;
					return;
				}
				if(document.getElementById(rows[i][0]).innerHTML === '×' && document.getElementById(rows[i][1]).innerHTML === '×' && document.getElementById(rows[i][2]).innerHTML === '×') {
					alert('負け！（AI）');
					gameover = true;
					return;
				}
			}
			//全部埋まった場合の引き分け判定
			let emptyCells = Array.from(document.getElementsByClassName('cell')).filter(td => td.innerHTML === '');
			if(emptyCells.length === 0) {
				alert('引き分け！');
				gameover = true;
				return;
			}
		}

//プレイヤーのターン
		function playerTurn() {
			putCircle(this);
			//2つ揃っていたらバツで塞ぐ
			let row = Number(this.id) % 3; //列番号
			let col = Math.floor(Number(this.id) / 3); //行番号
			if(row === 0) {
				if(document.getElementById(this.id+1).innerHTML === '○' && document.getElementById(this.id+2).innerHTML === '') {
					putCross(document.getElementById(this.id+2));
					return;
				}
			}
			if(row === 1) {
				if(document.getElementById(this.id-1).innerHTML === '○' && document.getElementById(this.id+1).innerHTML === '') {
					putCross(document.getElementById(this.id+1));
					return;
				}
			}
			if(row === 2) {
				if(document.getElementById(this.id-1).innerHTML === '○' && document.getElementById(this.id-2).innerHTML === '') {
					putCross(document.getElementById(this.id-2));
					return;
				}
			}
			if(col === 0) {
				if(document.getElementById(this.id+3).innerHTML === '○' && document.getElementById(this.id+6).innerHTML === '') {
					putCross(document.getElementById(this.id+6));
					return;
				}
			}
			if(col === 1) {
				if(document.getElementById(this.id-3).innerHTML === '○' && document.getElementById(this.id+3).innerHTML === '') {
					putCross(document.getElementById(this.id+3));
					return;
				}
			}
			if(col === 2) {
				if(document.getElementById(this.id-3).innerHTML === '○' && document.getElementById(this.id-6).innerHTML === '') {
					putCross(document.getElementById(this.id-6));
					return;
				}
			}
		}

//AIのターン
		function AITurn() {
			setTimeout(function() {
				putCross();
			}, 500); //0.5秒待ってからバツを書く
		}

//初期化
		let gameover = false;
		let cells = document.getElementsByClassName('cell');
		for(let i=0; i<cells.length; i++) {
			cells[i].addEventListener('click', playerTurn);
		}
	</script>
</body>
</html>