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

No:3827

1677

←

Prev Next

→

Butter (revolt) (revolution) (rebellion) Panda Sus..ALL
Developer User3589｜Date and time 23/6/26 18:17:41
Build time 50.742 sec｜Game capacity 5.086KB｜

Script

こんにちは！以下は、バター・パンダ・寿司をテーマにしたオセロ風のゲームです。JavaScriptで実装し、1枚のHTMLファイルとして提供します。スマホからも遊べるように設計し、絵文字も使用しています。お楽しみください！

バターパンダ寿司オセロ

←

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: #ffdab9;
		}
		
		#gameboard {
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(8, 1fr);
			grid-template-rows: repeat(8, 1fr);
			width: 100%;
			max-width: 400px;
			height: auto;
			padding: 10px;
			box-sizing: border-box;
		}
		
		.piece {
			background-color: transparent;
			background-image: none;
			border: none;
			padding: 0;
			font-size: 3em;
			cursor: pointer;
		}
		
		.white {
			color: white;
		}
		
		.black {
			color: black;
		}
		
		.selected {
			background-color: #ffc0cb;
		}
		
	</style>
</head>
<body>
	<h1>バターパンダ寿司オセロ</h1>
	<div id="gameboard"></div>
	
	<script>
		const gameboard = document.getElementById("gameboard");
		const pieces = [];
		const directions = [
			{row: -1, col: -1},
			{row: -1, col: 0},
			{row: -1, col: 1},
			{row: 0, col: -1},
			{row: 0, col: 1},
			{row: 1, col: -1},
			{row: 1, col: 0},
			{row: 1, col: 1}
		];
		let player1 = true;
		let gameOver = false;
		
		// create game board
		for (let row = 0; row < 8; row++) {
			for (let col = 0; col < 8; col++) {
				const piece = document.createElement("button");
				piece.className = "piece";
				piece.id = `piece_${row}_${col}`;
				piece.addEventListener("click", () => {
					if (!gameOver) {
						movePiece(row, col);
					}
				});
				gameboard.appendChild(piece);
				pieces.push({row, col, piece, state: "empty", validMoves: []});
			}
		}
		
		// set initial game pieces
		getPiece(3, 3).state = "white";
		getPiece(4, 4).state = "white";
		getPiece(3, 4).state = "black";
		getPiece(4, 3).state = "black";
		updateBoard();
		
		function getPiece(row, col) {
			return pieces.find(p => p.row === row && p.col === col);
		}
		
		function getDirectionPieces(row, col, direction) {
			const piecesInDirection = [];
			let currentRow = row + direction.row;
			let currentCol = col + direction.col;
			while (currentRow >= 0 && currentRow < 8 && currentCol >= 0 && currentCol < 8) {
				const piece = getPiece(currentRow, currentCol);
				if (piece.state === "empty") {
					break;
				} else if (piece.state === (player1 ? "black" : "white")) {
					piecesInDirection.push(piece);
					break;
				} else {
					piecesInDirection.push(piece);
				}
				currentRow += direction.row;
				currentCol += direction.col;
			}
			return piecesInDirection;
		}
		
		function updateBoard() {
			pieces.forEach(({piece, state, validMoves}) => {
				piece.textContent = "";
				
				if (state === "black") {
					piece.textContent = "🍞";
				} else if (state === "white") {
					piece.textContent = (player1 ? "🐼" : "🍣");
				} else if (validMoves.length > 0) {
					piece.textContent = "✅";
				}
				
				piece.classList.remove("white", "black", "selected");
				if (state) {
					piece.classList.add(state);
				}
			});
		}
		
		function movePiece(row, col) {
			const piece = getPiece(row, col);
			
			if (piece.state === "empty" && piece.validMoves.length > 0) {
				piece.state = (player1 ? "black" : "white");
				piece.validMoves = [];
				
				// flip pieces in all directions
				directions.forEach(direction => {
					const piecesInDirection = getDirectionPieces(row, col, direction);
					if (piecesInDirection.length > 0) {
						const lastPieceInDirection = piecesInDirection[piecesInDirection.length - 1];
						if (lastPieceInDirection.state === (player1 ? "black" : "white")) {
							piecesInDirection.forEach(p => p.state = (player1 ? "black" : "white"));
						}
					}
				});
				
				player1 = !player1;
				updateBoard();
				
				// check for end of game
				let blackCount = 0;
				let whiteCount = 0;
				pieces.forEach(({state}) => {
					if (state === "black") {
						blackCount++;
					} else if (state === "white") {
						whiteCount++;
					}
				});
				
				if (blackCount === 0 || whiteCount === 0 || blackCount + whiteCount === 64) {
					gameOver = true;
					setTimeout(() => {
						alert(`ゲーム終了！\nブラック:${blackCount}、ホワイト:${whiteCount}。`);
					}, 100);
				}
				
			} else if (piece.validMoves.length === 0) {
				return;
			} else {
				pieces.forEach(p => p.validMoves = []);
				directions.forEach(direction => {
					const piecesInDirection = getDirectionPieces(row, col, direction);
					if (piecesInDirection.length > 0) {
						const lastPieceInDirection = piecesInDirection[piecesInDirection.length - 1];
						if (lastPieceInDirection.state === (player1 ? "black" : "white")) {
							return;
						} else {
							piece.validMoves.push(lastPieceInDirection);
						}
					}
				});
				piece.validMoves.forEach(piece => piece.piece.classList.add("selected"));
			}
		}
	</script>
</body>
</html>