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

No:1367

312

←

Prev Next

→

Waiting for a turn game to play
Developer User3322｜Date and time 23/6/18 12:28:17
Build time 28.881 sec｜Game capacity 2.647KB｜

Script

順番待ちゲーム

「参加する」ボタンでゲームに参加してください。

待ち中...

このアプリは、参加するボタンをクリックすると、プレーヤー名の入力ダイアログが表示されます。プレーヤー名を入力すると、待ち行列に追加され、他のプレーヤーが追加された場合に更新されます。スマホで操作も可能で、絵文字も多用しています。ゲームのルールを簡単に説明している点が大きな特徴です。

←

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.0">
	<style>
		body {
			background-color: #E1E2E1;
			font-size: 1.5em;
			text-align: center;
			padding-top: 20px;
		}
		h1 {
			font-size: 2.5em;
			color: #F00;
		}
		button {
			background-color: #2271b3;
			color: #FFF;
			border: none;
			border-radius: 5px;
			padding: 10px;
			margin-top: 20px;
			font-size: 1em;
			cursor: pointer;
		}
		button:hover {
			background-color: #114874;
		}
		#queue {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 30px;
			padding: 10px;
			background-color: #FFF;
			border-radius: 5px;
			box-shadow: 1px 1px 5px grey;
		}
		#queue div {
			margin: 5px;
			padding: 5px;
			font-size: 1.2em;
			background-color: #F2F2F2;
			border-radius: 5px;
			display: inline-block;
			text-align: center;
		}
		#queue div:first-of-type {
			background-color: #F00;
			color: #FFF;
		}
	</style>
</head>
<body>
	<h1>順番待ちゲーム</h1>
	<p id="instruction">「参加する」ボタンでゲームに参加してください。</p>
	<button onclick="joinGame()">参加する</button>
	<div id="queue">
		<div>待ち中...</div>
	</div>
	<script>
		let queue = []; // 参加待ちのプレーヤーを入れる配列

function joinGame() {
			let name = prompt("プレーヤー名を入力してください。"); // プレーヤー名の入力ダイアログを表示
			if (name) { // プレーヤー名が入力された
				queue.push(name); // 配列に追加
				updateQueue(); // 順番待ち表示を更新
			}
		}