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

No:1428

125

←

Prev Next

→

game called toto (game theory)
Developer User3025｜Date and time 23/6/18 15:48:37
Build time 32.634 sec｜Game capacity 2.792KB｜

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 charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			background-color: #FFF6E5;
			text-align: center;
			font-family: Arial, sans-serif;
		}
		h1 {
			color: #A06EB9;
			margin-top: 30px;
		}
		p {
			font-size: 20px;
			color: #6B7FD7;
			margin-top: 10px;
		}
		button {
			background-color: #FDCA45;
			color: #ffffff;
			font-size: 24px;
			border-radius: 10px;
			padding: 10px 20px;
			margin-top: 20px;
			border: none;
			cursor: pointer;
		}
		#container {
			max-width: 90%;
			margin: auto;
		}
		#image-container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 250px;
			margin-top: 30px;
		}
		#image {
			width: 200px;
			height: 200px;
			background-color: #ffffff;
			border-radius: 10px;
			padding: 20px;
			box-shadow: 5px 5px 10px #7D7D7D;
		}
		#message {
			color: #F46197;
			font-size: 36px;
			margin-top: 20px;
		}
		#counter {
			color: #6BAF8E;
			font-size: 24px;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<h1>ととのうゲーム</h1>
	<div id="container">
		<p>画像をととのえるゲームです。画像をタップしてととのえましょう！</p>
		<div id="image-container">
			<div id="image">
				😀
			</div>
		</div>
		<div id="message"></div>
		<div id="counter">0</div>
		<button onclick="shuffleImage()">スタート！</button>
	</div>
	<script>
		var image = document.getElementById('image');
		var message = document.getElementById('message');
		var counter = document.getElementById('counter');
		var emojis = ['😀', '😊', '😜', '😎', '🤔'];
		var shuffledEmojis = shuffle(emojis);
		var clickCount = 0;

image.addEventListener('click', function() {
			clickCount++;
			counter.innerHTML = clickCount;
			if (JSON.stringify(shuffledEmojis) === JSON.stringify(emojis)) {
				message.innerHTML = "ととのいました！おめでとう！";
			}
			shuffledEmojis = shuffle(shuffledEmojis);
			updateImage(shuffledEmojis);
		});

function shuffle(array) {
			var currentIndex = array.length, temporaryValue, randomIndex;

while (0 !== currentIndex) {
				randomIndex = Math.floor(Math.random() * currentIndex);
				currentIndex -= 1;
				temporaryValue = array[currentIndex];
				array[currentIndex] = array[randomIndex];
				array[randomIndex] = temporaryValue;
			}

return array;
		}

function updateImage(emojis) {
			image.innerHTML = emojis[0];
		}

function shuffleImage() {
			shuffledEmojis = shuffle(emojis);
			updateImage(shuffledEmojis);
			clickCount = 0;
			counter.innerHTML = clickCount;
			message.innerHTML = "";
		}
	</script>
</body>
</html>

※「ととのう」は、「整う」という意味の方言です。