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

No:4036

603

←

Prev Next

→

swipe game
Developer User3756｜Date and time 23/6/27 2:50:37
Build time 82.759 sec｜Game capacity 6.539KB｜

Script

という依頼だと思います。了解いたしました。スワイプゲームを作成いたします。以下が実装例です。

スワイプゲーム

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

という依頼だと思います。

了解いたしました。スワイプゲームを作成いたします。

以下が実装例です。

<!DOCTYPE html>
<html>
<head>
	<title>スワイプゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #cccccc;
			font-family: sans-serif;
		}
		h1 {
			text-align: center;
			margin-top: 20px;
			margin-bottom: 20px;
		}
		#game-board {
			display: flex;
			flex-wrap: wrap;
			margin: 0 auto;
			max-width: 80%;
			min-height: 300px;
			background-color: #eeeeee;
			border: 2px solid #999999;
		}
		.cell {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			font-size: 72px;
			font-weight: bold;
			color: #555555;
			transition: all 0.3s;
		}
		.cell:hover {
			background-color: #dddddd;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>スワイプゲーム</h1>
	<div id="game-board"></div>
	<script>
		// プログラム
		const SIZE = 4; // マスの数
		const MAX_NUMBER = 2048; // 最大数字
		let score = 0; // スコア
		let board = []; // 盤面の配列

// 盤面の初期化
		function initBoard() {
			board = [];
			for (let i = 0; i < SIZE * SIZE; i++) {
				board.push(0);
			}
			addRandomNumber();
			addRandomNumber();
			updateBoard();
		}

// 盤面の更新
		function updateBoard() {
			const boardElement = document.querySelector("#game-board");
			boardElement.innerHTML = "";
			for (let i = 0; i < board.length; i++) {
				const cell = document.createElement("div");
				cell.classList.add("cell");
				cell.textContent = board[i] > 0 ? board[i] : "";
				cell.style.backgroundColor = getBackgroundColor(board[i]);
				boardElement.appendChild(cell);
			}
		}

// 背景色の取得
		function getBackgroundColor(number) {
			switch (number) {
				case 2: return "#eee4da";
				case 4: return "#ede0c8";
				case 8: return "#f2b179";
				case 16: return "#f59563";
				case 32: return "#f67c5f";
				case 64: return "#f65e3b";
				case 128: return "#edcf72";
				case 256: return "#edcc61";
				case 512: return "#edc850";
				case 1024: return "#edc53f";
				case 2048: return "#edc22e";
				default: return "#cdc0b4";
			}
		}

// ランダムな位置に数字を追加する
		function addRandomNumber() {
			const emptyCells = getEmptyCells();
			if (emptyCells.length > 0) {
				const index = emptyCells[Math.floor(Math.random() * emptyCells.length)];
				board[index] = Math.random() < 0.9 ? 2 : 4;
			}
		}

// 空きマスのインデックスを取得する
		function getEmptyCells() {
			const result = [];
			for (let i = 0; i < board.length; i++) {
				if (board[i] === 0) {
					result.push(i);
				}
			}
			return result;
		}

// 数字を移動する
		function moveNumbers(direction) {
			switch (direction) {
				case "left": moveNumbersLeft(); break;
				case "right": moveNumbersRight(); break;
				case "up": moveNumbersUp(); break;
				case "down": moveNumbersDown(); break;
			}
			addRandomNumber();
			updateBoard();
			if (isGameOver()) {
				alert("ゲームオーバー");
			}
		}

// 左に数字を移動する
		function moveNumbersLeft() {
			for (let y = 0; y < SIZE; y++) {
				for (let x = 1; x < SIZE; x++) {
					let index = y * SIZE + x;
					while (board[index] > 0 && board[index - 1] === 0 && index % SIZE > 0) {
						board[index - 1] = board[index];
						board[index] = 0;
						index--;
					}
					if (board[index] === board[index - 1]) {
						score += board[index] * 2;
						board[index - 1] *= 2;
						board[index] = 0;
					}
				}
			}
		}

// 右に数字を移動する
		function moveNumbersRight() {
			for (let y = 0; y < SIZE; y++) {
				for (let x = SIZE - 2; x >= 0; x--) {
					let index = y * SIZE + x;
					while (board[index] > 0 && board[index + 1] === 0 && index % SIZE < SIZE - 1) {
						board[index + 1] = board[index];
						board[index] = 0;
						index++;
					}
					if (board[index] === board[index + 1]) {
						score += board[index] * 2;
						board[index + 1] *= 2;
						board[index] = 0;
					}
				}
			}
		}

// 上に数字を移動する
		function moveNumbersUp() {
			for (let x = 0; x < SIZE; x++) {
				for (let y = 1; y < SIZE; y++) {
					let index = y * SIZE + x;
					while (board[index] > 0 && board[index - SIZE] === 0 && index >= SIZE) {
						board[index - SIZE] = board[index];
						board[index] = 0;
						index -= SIZE;
					}
					if (board[index] === board[index - SIZE]) {
						score += board[index] * 2;
						board[index - SIZE] *= 2;
						board[index] = 0;
					}
				}
			}
		}

// 下に数字を移動する
		function moveNumbersDown() {
			for (let x = 0; x < SIZE; x++) {
				for (let y = SIZE - 2; y >= 0; y--) {
					let index = y * SIZE + x;
					while (board[index] > 0 && board[index + SIZE] === 0 && index < SIZE * (SIZE - 1)) {
						board[index + SIZE] = board[index];
						board[index] = 0;
						index += SIZE;
					}
					if (board[index] === board[index + SIZE]) {
						score += board[index] * 2;
						board[index + SIZE] *= 2;
						board[index] = 0;
					}
				}
			}
		}

// ゲームオーバーかどうかを判定する
		function isGameOver() {
			if (board.includes(MMA_NUMBER)) {
				return true;
			}
			const hasEmptyCells = board.includes(0);
			if (hasEmptyCells) {
				return false;
			}
			for (let y = 0; y < SIZE; y++) {
				for (let x = 0; x < SIZE; x++) {
					let index = y * SIZE + x;
					let number = board[index];
					if (number === board[index - 1] || number === board[index + 1] || number === board[index - SIZE] || number === board[index + SIZE]) {
						return false;
					}
				}
			}
			return true;
		}

// 初期化
		initBoard();

// スワイプイベントの設定
		let startTouchX = 0;
		let startTouchY = 0;
		document.addEventListener("touchstart", function(event) {
			startTouchX = event.touches[0].clientX;
			startTouchY = event.touches[0].clientY;
		});
		document.addEventListener("touchend", function(event) {
			const endTouchX = event.changedTouches[0].clientX;
			const endTouchY = event.changedTouches[0].clientY;
			const deltaX = endTouchX - startTouchX;
			const deltaY = endTouchY - startTouchY;
			if (Math.abs(deltaX) > Math.abs(deltaY)) {
				if (deltaX > 0) {
					moveNumbers("right");
				} else {
					moveNumbers("left");
				}
			} else {
				if (deltaY > 0) {
					moveNumbers("down");
				} else {
					moveNumbers("up");
				}
			}
		});
	</script>
</body>
</html>