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

No:3397

1795

←

Prev Next

→

poop search
Developer User3367｜Date and time 23/6/24 23:47:21
Build time 33.723 sec｜Game capacity 3.852KB｜

Script

うんち探し

見つけたうんちの数: 0/10

残りのうんち数: 10

←

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.0">
	<style>
		body {
			background-color: #98FB98;
			font-family: Arial, sans-serif;
			text-align: center;
		}

h1 {
			color: brown;
		}

#game-board {
			margin: 50px auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			width: 280px;
			height: 280px;
			border-radius: 10px;
			background-color: white;
			box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
			position: relative;
		}
		
		.game-cell {
			width: calc(10% - 4px);
			height: calc(10% - 4px);
			margin: 2px;
			background-color: #98FB98;
			border: 2px solid white;
			border-radius: 3px;
			position: relative;
			cursor: pointer;
			-webkit-transition: background-color 0.3s ease-in-out;
			-moz-transition: background-color 0.3s ease-in-out;
			-o-transition: background-color 0.3s ease-in-out;
			transition: background-color 0.3s ease-in-out;
		}
		
		.game-cell.hidden {
			background-color: grey;
			border-color: grey;
			cursor: default;
		}
		
		.game-cell img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 50px;
			height: 50px;
		}
		
		.game-info {
			font-size: 20px;
			margin: 20px;
			text-align: left;
			color: brown;
		}
		
		button {
			background-color: brown;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 3px;
			cursor: pointer;
			font-size: 16px;
			margin-top: 20px;
			-webkit-transition: background-color 0.3s ease-in-out;
			-moz-transition: background-color 0.3s ease-in-out;
			-o-transition: background-color 0.3s ease-in-out;
			transition: background-color 0.3s ease-in-out;
		}
		
		button:hover {
			background-color: #8B0000;
		}
	</style>
</head>
<body>
	<h1>うんち探し</h1>
	<div id="game-board"></div>
	<div class="game-info">
		<p>見つけたうんちの数: <span id="found-poop">0</span>/10</p>
		<p>残りのうんち数: <span id="remaining-poop">10</span></p>
	</div>
	<button id="restart-button">ゲームをリスタートする</button>
	<script>
		var board = document.getElementById('game-board');
		var foundPoop = document.getElementById('found-poop');
		var remainingPoop = document.getElementById('remaining-poop');
		var restartButton = document.getElementById('restart-button');
		var cells = [];
		var poopCount = 0;
		var foundCount = 0;

function createBoard() {
			for (var i = 0; i < 100; i++) {
				var cell = document.createElement('div');
				cell.classList.add('game-cell');
				cell.dataset.index = i;
				cell.addEventListener('click', cellClicked);
				board.appendChild(cell);
				cells.push(cell);
			}
			placePoops();
		}

function placePoops() {
			for (var i = 0; i < 10; i++) {
				var randomIndex = Math.floor(Math.random() * 100);
				cells[randomIndex].innerHTML = "<img src='💩'>";
				cells[randomIndex].classList.add('poop');
			}
		}

function restartGame() {
			poopCount = 0;
			foundCount = 0;
			foundPoop.innerText = 0;
			remainingPoop.innerText = 10;
			cells.forEach(function(cell) {
				cell.innerHTML = '';
				cell.classList.remove('hidden');
				cell.classList.remove('poop');
			});
			placePoops();
		}

createBoard();
		restartButton.addEventListener('click', restartGame);
	</script>
</body>
</html>