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

No:3131

7499

←

Prev Next

→

♻️🍣🎮🧈🐼🧈🧩
Developer anonymous｜Date and time 70/1/1 10:17:06
Build time unknown sec｜Game capacity 4.626KB｜

Script

以下のプログラムは、1枚のhtmlファイルにJavaScriptが含まれており、スマホで操作できるゲームである。🎮

🧩 バターパンダのパズルゲーム 🧩

このゲームは、🧈、🐼、♻️、🍣の4種類のピースを使って、3x3のボードを完成させるパズルゲームである。各ピースをクリックすると、そのピースがアクティブになり、もう一度クリックするとアクティブ解除される。アクティブなピースをもう一度クリックすると、そのピースが空いている最も近いマス目に移動する。移動先に既にピースがある場合、そのピースはアクティブピースの元の位置に戻る。ボードを完成させると、ゲームクリアのメッセージが表示される。また、画面サイズに応じてレスポンシブにレイアウトされているため、スマホでも操作しやすい。🍣

←

Prev　Next

→ 　

Back　

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

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

以下のプログラムは、1枚のhtmlファイルにJavaScriptが含まれており、スマホで操作できるゲームである。🎮

<!DOCTYPE html>
<html>
<head>
	<title>バターパンダのパズルゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		/* スタイルシート */
		body {
			background-color: #E6E6FA;
			font-family: 'Helvetica Neue', sans-serif;
		}
		h1 {
			font-size: 3rem;
			text-align: center;
			margin-top: 2rem;
			color: #DC143C;
		}
		.container {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 80vh;
			margin-top: 2rem;
		}
		.board {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(3, 1fr);
			grid-gap: 1rem;
			padding: 1rem;
			background-color: #F0F8FF;
			border-radius: 1rem;
		}
		.piece {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #B0E0E6;
			color: #FFFFFF;
			font-size: 3rem;
			border-radius: 0.5rem;
			cursor: pointer;
			transition: all 0.2s ease-in-out;
		}
		.piece:hover {
			background-color: #48D1CC;
		}
		.piece.active {
			background-color: #00CED1;
		}
		.piece.disabled {
			cursor: default;
			background-color: #A9A9A9;
		}
		.result {
			text-align: center;
			margin-top: 2rem;
			font-size: 2rem;
			color: #191970;
		}
	</style>
</head>
<body>
	<h1>🧩 バターパンダのパズルゲーム 🧩</h1>
	<div class="container">
		<div class="board"></div>
	</div>
	<div class="result"></div>
	<script type="text/javascript">
		/* JavaScript */
		const pieces = ['🧈', '🐼', '♻️', '🍣'];
		const board = document.querySelector('.board');
		const result = document.querySelector('.result');
		let activePiece = '';
		let activeIndex = -1;
		let disabledIndexes = [];

// initialize the board
		function initBoard() {
			board.innerHTML = ''; // clear the board
			let indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8];
			for (let i=0; i<9; i++) {
				const randIndex = Math.floor(Math.random() * indexes.length);
				const randPiece = pieces[Math.floor(Math.random() * pieces.length)];
				const piece = document.createElement('div');
				piece.classList.add('piece');
				piece.textContent = randPiece;
				piece.addEventListener('click', () => {
					// check if the piece is active
					if (piece.classList.contains('active')) {
						// move the piece
						const targetIndex = indexes[randIndex];
						indexes.splice(randIndex, 1);
						piece.classList.remove('active');
						piece.classList.add('disabled');
						disabledIndexes.push(activeIndex);
						disabledIndexes.sort();
						disabledIndexes.forEach((index) => {
							if (index < activeIndex) targetIndex--;
						});
						board.children[targetIndex].appendChild(piece);
						activeIndex = -1;
						activePiece = '';
						checkResult();
					} else {
						// activate the piece
						if (activePiece !== '') {
							document.querySelector('.active').classList.remove('active');
						}
						piece.classList.add('active');
						activePiece = randPiece;
						activeIndex = indexes[randIndex];
					}
				});
				board.appendChild(piece);
				indexes.splice(randIndex, 1);
			}
		}

// check if the player wins
		function checkResult() {
			let win = true;
			let currentPiece = '';
			for (let i=0; i<9; i++) {
				if (i === 0) {
					currentPiece = board.children[i].textContent;
					continue;
				}
				if (board.children[i].childElementCount === 0) {
					win = false;
					break;
				}
				if (board.children[i].textContent !== currentPiece) {
					win = false;
					break;
				}
			}
			if (win) {
				result.textContent = '🎉 おめでとうございます！ゲームクリアです！ 🎉';
			}
		}

// initialize the game
		initBoard();
	</script>
</body>
</html>