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

No:1671

3864

←

Prev Next

→

man-wolf
Developer anonymous｜Date and time 70/1/1 10:01:45
Build time unknown sec｜Game capacity 3.705KB｜

Script

人狼

このゲームは、村人側と人狼側に分かれて戦う、ミステリー要素のあるゲームです。

スマホで遊ぶ場合は、画面をタップして操作します。

カードをめくって役割を確認しましょう。

人狼

鬼

おばけ

天使

クマ

犬

←

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 {
			background-color: #FFFFFF;
			font-size: 2em;
			text-align: center;
		}
		
		.container {
			width: 80%;
			margin: auto;
			text-align: left;
		}
		
		.card {
			display: inline-block;
			margin-right: 20px;
		}
		
		.card img {
			width: 10%;
			height: 10%;
		}
		
		#result {
			font-size: 3em;
			margin-top: 50px;
		}
		
		#reset {
			background-color: #FF0000;
			color: #FFFFFF;
			font-size: 2em;
			padding: 10px 20px;
			border-radius: 10px;
			margin-top: 50px;
			cursor: pointer;
		}
		
		#reset:hover {
			background-color: #FFFFFF;
			color: #FF0000;
			box-shadow: 0px 0px 20px #FF0000;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>人狼</h1>
		<p>このゲームは、村人側と人狼側に分かれて戦う、ミステリー要素のあるゲームです。</p>
		<p>スマホで遊ぶ場合は、画面をタップして操作します。</p>
		
		<h2>カードをめくって役割を確認しましょう。</h2>
		<div id="cards">
			<div class="card">
				<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/paw-prints_1f43e.png"/>
				<p>人狼</p>
			</div>
			<div class="card">
				<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/smiling-face-with-horns_1f608.png"/>
				<p>鬼</p>
			</div>
			<div class="card">
				<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/ghost_1f47b.png"/>
				<p>おばけ</p>
			</div>
			<div class="card">
				<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/smiling-face-with-halo_1f607.png"/>
				<p>天使</p>
			</div>
			<div class="card">
				<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/hatching-chick_1f423.png"/>
				<p>クマ</p>
			</div>
			<div class="card">
				<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/dog-face_1f436.png"/>
				<p>犬</p>
			</div>
		</div>
		
		<button onclick="selectCards()">カードをめくる</button>
		
		<div id="result"></div>
		
		<button id="reset" onclick="resetGame()">リセット</button>
	</div>
	
	<script>
		let cards = document.querySelectorAll('.card');
		let selectedCards = [];
		
		function selectCards() {
			if (selectedCards.length < 2) {
				let randomIndex = Math.floor(Math.random() * cards.length);
				let selectedCard = cards[randomIndex];
				
				if (!selectedCards.includes(selectedCard)) {
					selectedCards.push(selectedCard);
					selectedCard.classList.add('selected');
					
					if (selectedCards.length == 2) {
						setTimeout(() => {
							checkCards();
						}, 1000);
					}
				} else {
					selectCards();
				}
			}
		}
		
		function checkCards() {
			let card1 = selectedCards[0];
			let card2 = selectedCards[1];
			
			if (card1.children[1].innerHTML == card2.children[1].innerHTML) {
				document.getElementById('result').innerHTML = '勝った！';
			} else {
				document.getElementById('result').innerHTML = '負けた…';
			}
			
			selectedCards = [];
			
			setTimeout(() => {
				document.getElementById('cards').querySelectorAll('.selected').forEach(selected => {
					selected.classList.remove('selected');
				})
				
				document.getElementById('result').innerHTML = '';
			}, 2000);
		}
		
		function resetGame() {
			selectedCards = [];
			
			document.getElementById('cards').querySelectorAll('.selected').forEach(selected => {
				selected.classList.remove('selected');
			})
			
			document.getElementById('result').innerHTML = '';
		}
	</script>
</body>
</html>