childrens game similar to marbles, played with coin-shaped coloured glass's game

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

No:157

272

←

Prev Next

→

childrens game similar to marbles, played with coi..ALL
Developer User2613｜Date and time 23/5/29 23:00:11
Build time 95.329 sec｜Game capacity 3.127KB｜

Script

We created a puzzle game using

This OHGIRIZUKI puzzle is、Shuffle the nine blocks on the screen.、The game is to rearrange the numbers 1-8 in the correct order using the empty squares. When you click on a block、You can swap empty squares and adjacent blocks. Once you have rearranged them in the correct order、You will see a message saying congratulations. You can also play on your phone.、The layout is automatically adjusted to fit the screen size. In addition、Use pictograms.、We make the atmosphere a little more fun.

←

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 {
			margin: 0;
			padding: 0;
			background-color: #f8f8f8;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}
		.container {
			display: flex;
			flex-wrap: wrap;
			max-width: 360px;
			max-height: 360px;
			box-shadow: 0 0 10px #999;
		}
		.block {
			display: flex;
			flex-basis: calc(33.33% - 2px);
			max-width: calc(33.33% - 2px);
			max-height: calc(33.33% - 2px);
			justify-content: center;
			align-items: center;
			font-size: 1.5rem;
			cursor: pointer;
			border: 1px solid #ccc;
			background-color: #fff;
			transition: all 0.3s ease-in-out;
		}
		.block:hover {
			background-color: #eee;
		}
		.block:active {
			background-color: #ccc;
		}
		.block.empty {
			background-color: #f8f8f8;
			border: none;
			cursor: default;
		}
	</style>
</head>
<body>
	<div class="container"></div>
	<script>
		const container = document.querySelector('.container');
		const blocks = [];
		const numbers = [1, 2, 3, 4, 5, 6, 7, 8, ''];
		let emptyIndex = 8;

function shuffleArray(array) {
			for (let i = array.length - 1; i > 0; i--) {
				const j = Math.floor(Math.random() * (i + 1));
				[array[i], array[j]] = [array[j], array[i]];
			}
			return array;
		}

function swapBlocks(block, index) {
			blocks[emptyIndex].textContent = block.textContent;
			blocks[emptyIndex].classList.remove('empty');
			block.textContent = '';
			block.classList.add('empty');
			emptyIndex = index;
		}

function checkResult() {
			const rightNumbers = numbers.slice(0, 8);
			const currentNumbers = blocks.map(block => parseInt(block.textContent));
			if (JSON.stringify(rightNumbers) === JSON.stringify(currentNumbers)) {
				alert('Congratulations!');
			}
		}

shuffleArray(numbers);

for (let i = 0; i < 9; i++) {
			const block = createBlock(numbers[i], i);
			blocks.push(block);
			container.appendChild(block);
		}
	</script>
</body>
</html>

このおはじきパズルは、画面内の9つのブロックをシャッフルして、空いているマス目を使って1~8の数字を正しい順序に並び替えるゲームです。ブロックをクリックすると、空いているマス目と隣接しているブロックを入れ替えることができます。正しい順序に並び替えたら、おめでとうというメッセージが表示されます。スマホでも遊べるように、画面サイズに合わせて自動的にレイアウトが調整されます。また、絵文字を使って、少し楽しい雰囲気にしています。