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

No:1084

119

←

Prev Next

→

thick forest
Developer User3235｜Date and time 23/6/18 2:30:46
Build time 41.857 sec｜Game capacity 3.714KB｜

Script

ご依頼ありがとうございます。以下がアプリの実装例になります。

あつ森

スコア:0

🦝

このアプリは、集中力を養う目的で作成されたゲームです。16個のセルにランダムな動物の絵文字が表示され、同じ動物の絵文字を2つ選んでペアを作るゲームです。スマホでも操作できるように、セルのサイズを100pxに設定しました。ペアが合致した場合は、スコアが1点加算され、ペアが合致しなかった場合は、選択した2つのセルが元に戻ります。全てのセルをペアで合致させた場合は、🏆の絵文字が表示されます。ご確認の上、必要に応じてカスタマイズをお願いします。

←

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 {
			font-family: sans-serif;
			text-align: center;
		}
		
		#game-container {
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			max-width: 600px;
			justify-content: center;
		}
		
		.square {
			width: 100px;
			height: 100px;
			border: 1px solid black;
			text-align: center;
			font-size: 50px;
			cursor: pointer;
			user-select: none;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.square:hover {
			background-color: lightgray;
		}
		
		#score {
			font-size: 30px;
			margin-top: 20px;
		}
		
		#emoji {
			font-size: 80px;
			margin-bottom: 20px;
		}
		
	</style>
</head>
<body>
	<h1>あつ森</h1>
	<p>スコア:<span id="score">0</span></p>
	<div id="game-container"></div>
	<p id="emoji">🦝</p>
	
	<script>
		
		var gameContainer = document.getElementById("game-container");
		var score = document.getElementById("score");
		var emoji = document.getElementById("emoji");
		var squares = [];
		
		var scoreCount = 0;
		var selectedSquares = [];
		
		var characters = ["🐶", "🐻", "🐱", "🐤"];
		
		function init() {
			// Create game board
			for(var i=0; i<16; i++) {
				var square = document.createElement("div");
				square.classList.add("square");
				square.id = i;
				randomCharacter(square);
				square.addEventListener("click", selectSquare);
				gameContainer.appendChild(square);
				squares.push(square);
			}
		}
		
		function randomCharacter(square) {
			// Set random emoji character to square
			var randomIndex = Math.floor(Math.random()*characters.length);
			square.innerText = characters[randomIndex];
			square.setAttribute("data-character", characters[randomIndex]);
		}
		
		function selectSquare(event) {
			// Only allow 2 squares to be selected
			if(selectedSquares.length < 2 && !selectedSquares.includes(event.target)) {
				selectedSquares.push(event.target);
				event.target.style.backgroundColor = "lightblue";
			}
			// Check if squares match
			if(selectedSquares.length == 2) {
				window.setTimeout(checkMatch, 1000);
			}
		}
		
		function checkMatch() {
			if(selectedSquares[0].getAttribute("data-character") == selectedSquares[1].getAttribute("data-character")) {
				scoreCount++;
				score.innerText = scoreCount;
				selectedSquares[0].removeEventListener("click", selectSquare);
				selectedSquares[1].removeEventListener("click", selectSquare);
				selectedSquares = [];
				checkWin();
			}
			else {
				selectedSquares[0].style.backgroundColor = "";
				selectedSquares[1].style.backgroundColor = "";
				selectedSquares = [];
			}
		}
		
		function checkWin() {
			// Check if all squares are cleared
			var squaresCleared = true;
			for(var i=0; i<squares.length; i++) {
				if(squares[i].style.backgroundColor == "") {
					squaresCleared = false;
				}
			}
			if(squaresCleared) {
				emoji.innerText = "🏆";
			}
		}
		
		init();
	
	</script>
</body>
</html>