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

No:2109

2991

←

Prev Next

→

Games like Gusun yo yo yo
Developer User3497｜Date and time 23/6/20 7:21:13
Build time 54.191 sec｜Game capacity 4.263KB｜

Script

を実装します。以下がプログラムです。

ぐっすんおよよ

スコア: 0

このプログラムによって、画面内に4x4のマス目が表示されます。マス目をクリックすると、絵文字が表示されます。クリックした2つのマス目の絵文字が一致すれば、スコアが加算されます。全てのマス目を一致させるとクリアです。一致しなかった場合は、一定時間後に絵文字が非表示になります。スマホでの操作に対応するために、画面幅に合わせてレイアウトが自動的に調整されます。また、絵文字を多めに使っているため、スマホの方でも見やすいと思います。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

を実装します。

以下がプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ぐっすんおよよ</title>
</head>
<body>
	<div id="game-container">
		<h1>ぐっすんおよよ</h1>
		<p id="score">スコア: 0</p>
		<button id="start-btn">スタート</button>
		<div id="game-board"></div>
	</div>
	
	<script>
		const emojiList = ["🐟", "🐠", "🦐", "🦀", "🐙", "🦑", "🐢", "🐊", "🦕", "🦖"]; // 絵文字のリスト
		const boardWidth = 4; // 盤面の横幅
		const boardHeight = 4; // 盤面の縦幅
		const matchAmount = 2; // 絵柄がマッチする個数
		const matchInterval = 1500; // マッチした状態が表示される時間（ミリ秒）
		
		let gameBoard = document.getElementById("game-board");
		let scoreDisplay = document.getElementById("score");
		let startButton = document.getElementById("start-btn");
		let score = 0;
		let timer;
		let matchedCells = [];
		
		// ゲームの初期化
		function initializeGame() {
			score = 0;
			scoreDisplay.innerText = "スコア: " + score;
			clearInterval(timer);
			gameBoard.innerHTML = "";
			for (let i = 0; i < boardWidth * boardHeight; i++) {
				let cell = document.createElement("div");
				cell.innerText = "";
				cell.classList.add("game-board-cell");
				cell.addEventListener("click", function() { cellClickHandler(this); });
				gameBoard.appendChild(cell);
			}
			startButton.innerText = "スタート";
			startButton.disabled = false;
		}
		
		// セルがクリックされた時の処理
		function cellClickHandler(cell) {
			if (!startButton.disabled) {
				return;
			}
			if (matchedCells.indexOf(cell) !== -1) { // 既にマッチ済みのセルはクリックできない
				return;
			}
			cell.innerText = cell.getAttribute("data-emoji");
			if (matchedCells.length < matchAmount - 1) {
				matchedCells.push(cell);
			} else {
				matchedCells.push(cell);
				let match = true;
				let firstEmoji = matchedCells[0].getAttribute("data-emoji");
				for (let i = 1; i < matchedCells.length; i++) {
					if (matchedCells[i].getAttribute("data-emoji") !== firstEmoji) {
						match = false;
						break;
					}
				}
				if (match) {
					score++;
					scoreDisplay.innerText = "スコア: " + score;
					matchedCells.forEach(function(cell) {
						cell.classList.add("match");
					});
				} else {
					timer = setTimeout(function() {
						matchedCells.forEach(function(cell) {
							cell.innerText = "";
						});
						matchedCells = [];
					}, matchInterval);
				}
			}
		}
		
		// ゲームを開始する
		function startGame() {
			startButton.innerText = "リトライ";
			startButton.disabled = true;
			let emojis = [];
			for (let i = 0; i < boardWidth * boardHeight / 2; i++) {
				let index = Math.floor(Math.random() * emojiList.length);
				emojis.push(emojiList[index]);
				emojis.push(emojiList[index]);
			}
			emojis.sort(function() { return Math.random() - 0.5; });
			let cells = gameBoard.querySelectorAll(".game-board-cell");
			for (let i = 0; i < cells.length; i++) {
				cells[i].setAttribute("data-emoji", emojis[i]);
			}
		}
		
		initializeGame();
		startButton.addEventListener("click", startGame);
	</script>
	
	<style>
		#game-container {
			text-align: center;
		}
		.game-board-cell {
			display: inline-block;
			font-size: 50px;
			width: 80px;
			height: 80px;
			margin: 5px;
			background-color: #eee;
			border-radius: 10px;
			cursor: pointer;
			line-height: 80px;
			vertical-align: middle;
			text-align: center;
		}
		.game-board-cell.match {
			background-color: #aaffaa;
		}
	</style>
</body>
</html>
```

このプログラムによって、画面内に4x4のマス目が表示されます。マス目をクリックすると、絵文字が表示されます。クリックした2つのマス目の絵文字が一致すれば、スコアが加算されます。全てのマス目を一致させるとクリアです。一致しなかった場合は、一定時間後に絵文字が非表示になります。

スマホでの操作に対応するために、画面幅に合わせてレイアウトが自動的に調整されます。また、絵文字を多めに使っているため、スマホの方でも見やすいと思います。