Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
Pasta Puzzle game's game | AI game creator

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

No:1867

1915

←

Prev Next

→

Pasta Puzzle game
Developer User3082｜Date and time 23/6/19 10:21:50
Build time 54.402 sec｜Game capacity 4.146KB｜

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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>パスタパズルゲーム</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #fafafa;
		}

.board {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-template-rows: repeat(5, 1fr);
			grid-gap: 10px;
			margin: 20px auto;
			max-width: 500px;
		}

.cell {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 50px;
			background-color: #fff;
			border: 2px solid #ccc;
			border-radius: 10px;
			color: #333;
		}

.cell.active {
			background-color: #3498db;
			color: #fff;
			border: 2px solid #fff;
		}

.buttons {
			display: flex;
			justify-content: space-around;
			margin: 0 auto;
			max-width: 500px;
		}

.button {
			font-size: 20px;
			background-color: #3498db;
			color: #fff;
			border: none;
			border-radius: 5px;
			padding: 10px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}

.button:hover {
			background-color: #2980b9;
		}
	</style>
</head>
<body>
	<h1>パスタパズルゲーム</h1>
	<p>クリックしたセルとその上下左右のセルの文字が入れ替わるパズルゲームです。全てのセルを正しい文字にするとゲームクリアです。</p>
	<div class="board"></div>
	<div class="buttons">
		<button class="new-game button">New Game</button>
		<button class="check-game button">Check Game</button>
	</div>

let board = [
			['🍝', '🍝', '🍝', '🍝', '🍝'],
			['🍝', '🍜', '🍝', '🍜', '🍝'],
			['🍝', '🍝', '🍝', '🍝', '🍝'],
			['🍝', '🍜', '🍝', '🍜', '🍝'],
			['🍝', '🍝', '🍝', '🍝', '🍝'],
		];

let activeCell = {x: 0, y: 0};

function swapCells(x1, y1, x2, y2) {
			const temp = board[y1][x1];
			board[y1][x1] = board[y2][x2];
			board[y2][x2] = temp;
			renderBoard();
		}

function init() {
			newGameBtn.addEventListener('click', () => {
				board = [
					['🍝', '🍝', '🍝', '🍝', '🍝'],
					['🍝', '🍜', '🍝', '🍜', '🍝'],
					['🍝', '🍝', '🍝', '🍝', '🍝'],
					['🍝', '🍜', '🍝', '🍜', '🍝'],
					['🍝', '🍝', '🍝', '🍝', '🍝'],
				];
				activeCell = {x: 0, y: 0};
				renderBoard();
			});

checkGameBtn.addEventListener('click', () => {
				checkGame();
			});

boardElt.addEventListener('click', (e) => {
				const cell = e.target;
				const x = Array.from(cell.parentNode.children).indexOf(cell);
				const y = Array.from(cell.parentNode.parentNode.children).indexOf(cell.parentNode);
				if (Math.abs(activeCell.x - x) + Math.abs(activeCell.y - y) === 1) {
					swapCells(activeCell.x, activeCell.y, x, y);
					activeCell = {x, y};
				}
			});

renderBoard();
		}

init();
	</script>
</body>
</html>