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

No:497

483

←

Prev Next

→

waiting game in a circle (game theory)
Developer User2906｜Date and time 23/6/15 0:44:39
Build time 51.003 sec｜Game capacity 4.08KB｜

Script

陣取りゲーム

Player1's turn

Click to claim your territory!

※スマホでの操作を前提にしていますが、PCでも遊べます。ゲームの概要としては、縦横5マスの盤面があり、プレイヤー1とプレイヤー2が交互にクリックして自分の印を陣地に打ちます。一度陣地を取ったセルは、相手の陣地になった場合に取り返すことができます。陣地を多く取った方が勝利となります。絵文字を多めに使用しています。

←

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 {
			text-align: center;
		}
		button {
			font-size: 2em;
			margin: 10px;
			padding: 10px;
			border-radius: 20px;
			background: #ccc;
			cursor: pointer;
		}
		#board {
			margin: 20px auto;
			border: 2px solid #000;
			width: 80%;
			max-width: 400px;
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			height: 0;
			position: relative;
			padding-bottom: 80%;
		}
		#board:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background: linear-gradient(45deg, #fdb813, #e83e8c);
			opacity: 0.3;
			z-index: -1;
		}
		.cell {
			width: 20%;
			box-sizing: border-box;
			background: #fff;
			border: 1px solid #000;
			height: 0;
			position: relative;
			padding-bottom: 20%;
		}
		.cell:after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 4em;
		}
		.cell.owned:after {
			content: "🔥";
		}
		.cell.enemy:after {
			content: "💀";
		}
		.turn {
			font-size: 3em;
			margin: 20px 0;
		}
		.message {
			font-size: 2em;
			margin: 20px 0;
		}
	</style>
</head>
<body>
	<h1>陣取りゲーム</h1>
	<div id="board"></div>
	<div class="turn">Player1's turn</div>
	<div class="message">Click to claim your territory!</div>
	<button onclick="initialize()">Start a new game</button>

function updateCell(row, col) {
			const cell = document.getElementsByClassName("cell")[row * boardSize + col];
			cell.className = `cell owned`;
			cell.classList.toggle("enemy", board[row][col] === (isPlayer1Turn ? 2 : 1));
		}

function isGameOver() {
			for (let i = 0; i < boardSize; i++) {
				for (let j = 0; j < boardSize; j++) {
					if (board[i][j] === 0) {
						return false;
					}
				}
			}
			return true;
		}

function updateTurn() {
			document.getElementsByClassName("turn")[0].textContent = isPlayer1Turn ? "Player1's turn" : "Player2's turn";
		}

function updateMessage(message) {
			document.getElementsByClassName("message")[0].textContent = message;
		}

initialize();
	</script>
</body>
</html>