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

No:2508

261

←

Prev Next

→

musical chairs
Developer anonymous｜Date and time 23/6/21 19:24:04
Build time 24.763 sec｜Game capacity 2.011KB｜

Script

musical chairs

←

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 {
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  		justify-content: center;
  		margin: 0;
  		height: 100vh;
  		background-color: #FFF2CC;
	}
	
	h1 {
  		font-size: 2rem;
  		margin: 1.5rem 0;
	}

button {
  		font-size: 1.5rem;
  		padding: 1rem 2rem;
  		border: none;
  		background-color: #FFB347;
  		color: #FFF;
  		border-radius: 5px;
  		cursor: pointer;
  		margin: 1.5rem;
	}
	
	button:hover {
  		background-color: #FFA347;
  		color: #FFF;
	}
	
	#seating {
  		width: 90%;
  		display: flex;
  		justify-content: center;
  		align-items: center;
  		margin-bottom: 2rem;
	}
	
	.emoji {
  		font-size: 3rem;
  		padding: 0.5rem;
	}
	
	.emoji:hover {
  		transform: scale(1.2);
	}
</style>
</head>
<body>
	<h1>椅子取りゲーム</h1>
	<div id="seating"></div>
	<button id="start">スタート！</button>
	<script>
		const seating = document.querySelector('#seating')
		const emojis = ['🪑', '🤡', '🎅', '🕺', '🤖']
		let timer
		
		function startGame() {
    		const numPlayers = Math.floor(Math.random() * (emojis.length - 1)) + 2
    		const numChairs = numPlayers - 1
    		const chairs = Array(numChairs).fill('🪑')
    		const players = Array(numPlayers).fill('')
    		const lastIndex = players.length - 1
    		
    		players[lastIndex] = '🤴'
    		chairs.push('🤴')
    		
    		for (let i = chairs.length - 1; i > 0; i--) {
      			const j = Math.floor(Math.random() * i)
      			const temp = chairs[i]
      			chairs[i] = chairs[j]
      			chairs[j] = temp
    		}
    		
    		seating.innerHTML = chairs.map(chair => `<div class="emoji">${chair}</div>`).join('')
    		
    		timer = setTimeout(() => {
      			clearTimeout(timer)
      			alert(`終了！${players[lastIndex]}王子が残りました！`)
    		}, 5000)
		}
		
		document.querySelector('#start').addEventListener('click', startGame)
	</script>
</body>
</html>