Fallen object puzzle's game

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

No:92

550

←

Prev Next

→

Fallen object puzzle
Developer User1776｜Date and time 23/5/14 19:39:33
Build time 61.946 sec｜Game capacity 2.708KB｜

Script

←

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 {
			background-color: #F7DC6F;
			font-size: 2em;
			text-align: center;
		}

#game-board {
			display: flex;
			flex-wrap: wrap;
			width: 200px;
			height: 400px;
			margin: 0 auto;
			border: 5px solid #34495E;
		}

.cell {
			width: 33.3%;
			height: 33.3%;
			border: 1px solid #34495E;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.5em;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="game-board">
	</div>

// create initial board
		for (let i = 0; i < boardHeight; i++) {
			board[i] = [];
			for (let j = 0; j < boardWidth; j++) {
				const randomIndex = Math.floor(Math.random() * emojis.length);
				board[i][j] = emojis[randomIndex];
			}
		}

// render board and add click event listeners
		const gameBoard = document.getElementById("game-board");
		for (let i = 0; i < boardHeight; i++) {
			for (let j = 0; j < boardWidth; j++) {
				const cell = document.createElement("div");
				cell.className = "cell";
				cell.innerText = board[i][j];
				gameBoard.appendChild(cell);

cell.addEventListener("click", () => {
					const clickedRow = Math.floor(Array.from(gameBoard.children).indexOf(cell) / boardWidth);
					const clickedCol = Array.from(gameBoard.children).indexOf(cell) % boardWidth;

// check if there is a match below the clicked cell
					if (clickedRow < boardHeight - 1 && board[clickedRow][clickedCol] === board[clickedRow + 1][clickedCol]) {
						const temp = board[clickedRow][clickedCol];
						board[clickedRow][clickedCol] = board[clickedRow + 1][clickedCol];
						board[clickedRow + 1][clickedCol] = temp;

renderBoard();
						return;
					}

// check if there is a match to the right of the clicked cell
					if (clickedCol < boardWidth - 1 && board[clickedRow][clickedCol] === board[clickedRow][clickedCol + 1]) {
						const temp = board[clickedRow][clickedCol];
						board[clickedRow][clickedCol] = board[clickedRow][clickedCol + 1];
						board[clickedRow][clickedCol + 1] = temp;

renderBoard();
						return;
					}

// if there is no match, show message
					alert("No match found.");
				});
			}
		}

function renderBoard() {
			// update cells with new values from board array
			const cells = Array.from(gameBoard.children);
			for (let i = 0; i < cells.length; i++) {
				const row = Math.floor(i / boardWidth);
				const col = i % boardWidth;
				cells[i].innerText = board[row][col];
			}
		}
	</script>

</body>
</html>