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

No:1531

1093

←

Prev Next

→

3 that do not change in size×A person who writes a..ALL
Developer User3293｜Date and time 23/6/18 18:12:47
Build time 42.795 sec｜Game capacity 3.335KB｜

Script

まるばつゲーム

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>まるばつゲーム</title>
	<style>
		body {
			font-family: sans-serif;
			text-align: center;
			background-color: #F7E8E6;
		}
		h1 {
			padding-top: 20px;
			margin-bottom: 40px;
			color: #C66E6E;
		}
		button, input[type="button"] {
			display: inline-block;
			margin: 10px;
			padding: 10px;
			border: none;
			border-radius: 5px;
			font-size: 20px;
			color: #FFF;
			background-color: #C66E6E;
			cursor: pointer;
			box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
		}
		button:hover, input[type="button"]:hover {
			background-color: #A94442;
		}
		#board {
			width: 300px;
			margin: auto;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr;
			grid-gap: 5px;
			padding: 10px;
			background-color: #FFF;
			box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
		}
		#board div {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 60px;
			background-color: #F7E8E6;
			border: solid 2px #C66E6E;
			border-radius: 5px;
			box-shadow: inset 0px 0px 6px rgba(0,0,0,0.5);
			cursor: pointer;
		}
		#board div:active {
			box-shadow: none;
		}
		#board .selected {
			background-color: #C66E6E;
			color: #FFF;
		}
		.result {
			margin-top: 40px;
			font-size: 30px;
			font-weight: bold;
			color: #C66E6E;
		}
	</style>
</head>
<body>
	<h1>まるばつゲーム</h1>
	<div id="board">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
	<div class="result"></div>

function handleMove(event) {
			if (gameover) return;
			let index = Array.prototype.indexOf.call(board, event.target);
			if (board[index].innerHTML !== '') return;
			board[index].innerHTML = currentPlayer;
			board[index].classList.add('selected');
			moves++;
			checkWin();
			if (!gameover) {
				currentPlayer = ai;
				setTimeout(aiMove, 500);
			}
		}

function displayResult(result) {
			let resultElement = document.querySelector('.result');
			resultElement.innerHTML = `結果：${result}`;
		}

for (let i = 0; i < board.length; i++) {
			board[i].addEventListener('click', handleMove);
		}
	</script>
</body>
</html>