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

No:45

363

←

Prev Next

→

gomoku
Developer anonymous｜Date and time 23/5/5 11:03:25
Build time 76.635 sec｜Game capacity 3.534KB｜

Script

gomoku

If you line up five in a row, you win!

The current players are○It is.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>五目並べ</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			font-size: 2em;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

button {
			font-size: 0.5em;
			padding: 1em;
			margin: 1em;
			background-color: #c9e4ca;
			border: none;
			border-radius: 0.5em;
			cursor: pointer;
			box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.2);
		}

button:hover {
			background-color: #b3d6b8;
		}

.board {
			display: flex;
			flex-wrap: wrap;
			width: 20em;
			height: 20em;
		}

.board button {
			flex: 1 0 33.333%;
			height: 33.333%;
			border: solid 2px #5f544d;
			border-radius: 0;
			background-color: #ede4d8;
			position: relative;
		}

.board button:after {
			content: "";
			display: block;
			position: absolute;
			width: 1em;
			height: 1em;
			border-radius: 50%;
			background-color: #5f544d;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			opacity: 0;
		}

.board button.disabled:after {
			opacity: 1;
		}

@media (max-width: 480px) {
			body {
				font-size: 1.5em;
			}
		}
	</style>
</head>
<body>
	<h1>五目並べ</h1>
	<p>5つ並べたら勝ち！</p>
	<div class="board">
		<button disabled></button>
		<button disabled></button>
		<button disabled></button>
		<button disabled></button>
		<button disabled></button>
		<button disabled></button>
		<button disabled></button>
		<button disabled></button>
		<button disabled></button>
	</div>
	<p>現在のプレイヤーは<span class="current-player">○</span>です。</p>
	<button class="reset-button">リセット</button>
	<script>
		const board = document.querySelector('.board');
		const currentPlayer = document.querySelector('.current-player');
		const resetButton = document.querySelector('.reset-button');

let currentPlayerMark = '○';
		let win = false;
		let boardArray = [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '];

function checkWin() {
			const winLines = [
				[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 < winLines.length; i++) {
				const [a, b, c] = winLines[i];
				if (boardArray[a] !== ' ' && boardArray[a] === boardArray[b] && boardArray[b] === boardArray[c]) {
					return true;
				}
			}

return false;
		}

function resetBoard() {
			boardArray = [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '];
			currentPlayerMark = '○';
			win = false;
			currentPlayer.innerText = currentPlayerMark;
			renderBoard();
		}

board.addEventListener('click', handleClick);
		resetButton.addEventListener('click', resetBoard);
	</script>
</body>
</html>