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

No:13677

←

Prev Next

→

マージゲーム
Developer おまめちゃん｜Date and time 23/8/29 11:02:14
Build time 39.988 sec｜Game capacity 4.814KB｜

Script

了解しました。以下にゲームの実装例を示します。

マージゲーム

ゲーム画面

スコア: 0

上記のコードでは、4×4のブロックをマージしていくゲームを実装しています。ゲームボードの状態は二次元配列で管理し、JavaScriptの関数を用いてゲームの初期化やブロックの移動・合体などの処理を行っています。また、ゲーム画面はHTMLとCSSで表示されており、リセットボタンをクリックすることでゲームをリセットすることもできます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

了解しました。以下にゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
	<title>マージゲーム</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			text-align: center;
		}
		.game {
			display: inline-block;
			border: 1px solid #ccc;
			padding: 10px;
		}
		.score {
			margin-top: 10px;
		}
		.btn {
			margin-top: 10px;
			padding: 5px 10px;
			background-color: #0095ff;
			color: #fff;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}
		.btn:hover {
			background-color: #0082e6;
		}
	</style>
</head>
<body>
	<h1>マージゲーム</h1>
	<div class="game">
		<h2>ゲーム画面</h2>
		<div id="game-board"></div>
		<div class="score">スコア: <span id="score">0</span></div>
		<button class="btn" onclick="resetGame()">リセット</button>
	</div>

const width = 4; // ゲームボードの横幅
		const height = 4; // ゲームボードの縦幅
		let score = 0; // スコア
		let gameBoard; // ゲームボードの状態

// ゲームの初期化
		function initGame() {
			// ゲームボードの初期化
			gameBoard = Array(height).fill().map(() => Array(width).fill(0));

// 初期にランダムに2つのブロックを配置
			addRandomBlock();
			addRandomBlock();

// ゲームボードの状態を描画
			drawGameBoard();
		}

// ゲームボードの状態を描画
		function drawGameBoard() {
			const gameBoardElement = document.getElementById("game-board");

// ゲームボードをクリア
			gameBoardElement.innerHTML = "";

// ゲームボードの要素を描画
			for (let y = 0; y < height; y++) {
				for (let x = 0; x < width; x++) {
					const blockValue = gameBoard[y][x];
					const blockElement = document.createElement("div");
					blockElement.innerText = blockValue !== 0 ? blockValue : "";
					blockElement.className = "block block-" + blockValue;
					gameBoardElement.appendChild(blockElement);
				}
			}

// スコアを更新
			document.getElementById("score").innerText = score;
		}

// ブロックを追加
		function addRandomBlock() {
			const emptyCells = [];

// 空のセルを探索
			for (let y = 0; y < height; y++) {
				for (let x = 0; x < width; x++) {
					if (gameBoard[y][x] === 0) {
						emptyCells.push({ x, y });
					}
				}
			}

// 空のセルがある場合にランダムに選択
			if (emptyCells.length > 0) {
				const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];

// ランダムな位置に2または4のブロックを配置
				gameBoard[randomCell.y][randomCell.x] = Math.random() > 0.5 ? 2 : 4;
			}
		}

// ブロックをマージ
		function mergeBlocks(direction) {
			let merged = false;

// 方向によってループの順番を設定
			const startX = direction === "right" ? width - 1 : 0;
			const endX = direction === "right" ? -1 : width;
			const stepX = direction === "right" ? -1 : 1;

// 横方向にループ
			for (let y = 0; y < height; y++) {
				for (let x = startX; x !== endX; x += stepX) {
					const currentBlock = gameBoard[y][x];

// 空のブロックは無視
					if (currentBlock === 0) {
						continue;
					}

let mergedBlock = false;

// 合体可能なブロックがあるか探索
					for (let i = x + stepX; i !== endX; i += stepX) {
						const nextBlock = gameBoard[y][i];

// 合体可能な場合
						if (currentBlock === nextBlock) {
							// 現在のブロックを合体させる
							gameBoard[y][x] = currentBlock * 2;
							gameBoard[y][i] = 0;
							score += currentBlock * 2;
							merged = true;
							mergedBlock = true;
							break;
						}

// 合体不可能な場合
						if (nextBlock !== 0) {
							break;
						}
					}

// 合体が行われなかった場合、ブロックを移動
					if (!mergedBlock) {
						let tail = x;

// 空のブロックがなくなるまで移動
						while (tail + stepX !== endX && gameBoard[y][tail + stepX] === 0) {
							gameBoard[y][tail] = 0;
							gameBoard[y][tail + stepX] = currentBlock;
							tail += stepX;
						}
					}
				}
			}

return merged;
		}

// ゲームのリセット
		function resetGame() {
			score = 0;
			initGame();
		}

// ゲーム開始
		initGame();
	</script>
</body>
</html>
```