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

No:4215

843

←

Prev Next

→

The Shape of Happiness
Developer User1006｜Date and time 23/6/27 14:31:00
Build time 89.517 sec｜Game capacity 8.111KB｜

Script

ありがとうございます。指示は理解しました。私は、「簡単な爆弾除去ゲーム」を作成することにしました。このゲームは、スマホで遊ぶことができます。以下がコードです。JavaScriptはscriptタグで囲まれています。

爆弾除去ゲーム

ゲームのルールは以下のとおりです。・?印のマスをタップして、数字をあける・数字は周辺にある爆弾の数を表す・爆弾をあけたらゲームオーバー・爆弾以外のマスを全部あけたらゲームクリア以上が、私が作成した爆弾除去ゲームです。絵文字は使用していませんが、スマホでもプレイできるようになっています。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

ありがとうございます。指示は理解しました。

私は、「簡単な爆弾除去ゲーム」を作成することにしました。このゲームは、スマホで遊ぶことができます。

以下がコードです。JavaScriptはscriptタグで囲まれています。

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>爆弾除去ゲーム</title>
	<style>
		body {
			background-color: #FFFACD;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		
		h1 {
			color: #FF8C00;
			margin-top: 20px;
		}
		
		#board {
			width: 80%;
			margin: 0 auto;
			margin-top: 50px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		
		.cell {
			width: 50px;
			height: 50px;
			font-size: 30px;
			margin: 10px;
			border: 1px solid #000;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}
		
		.hidden {
			background-color: #000;
			color: #000;
		}
		
		.bomb {
			background-color: #FF0000;
			color: #FF0000;
		}
		
		.number {
			background-color: #00FF00;
			color: #00FF00;
		}
		
		.win {
			color: #008000;
			margin-top: 20px;
		}
		
		.lose {
			color: #FF0000;
			margin-top: 20px;
		}
	</style>
	<script>
		function generateBoard() {
			const board = document.querySelector('#board');
			const numberCells = 5;
			const bombCells = 2;
			
			let boardArray = [];
			
			for (let i = 0; i < numberCells; i++) {
				let row = [];
				for (let j = 0; j < numberCells; j++) {
					row.push(0);
				}
				boardArray.push(row);
			}
			
			for (let i = 0; i < bombCells; i++) {
				let rowIndex = Math.floor(Math.random() * numberCells);
				let colIndex = Math.floor(Math.random() * numberCells);
				while (boardArray[rowIndex][colIndex] === -1) {
					rowIndex = Math.floor(Math.random() * numberCells);
					colIndex = Math.floor(Math.random() * numberCells);
				}
				boardArray[rowIndex][colIndex] = -1;
			}
			
			for (let i = 0; i < numberCells; i++) {
				for (let j = 0; j < numberCells; j++) {
					if (boardArray[i][j] !== -1) {
						let numberOfBombs = 0;
						if (i > 0 && j > 0 && boardArray[i-1][j-1] === -1) numberOfBombs++;
						if (i > 0 && boardArray[i-1][j] === -1) numberOfBombs++;
						if (i > 0 && j < numberCells-1 && boardArray[i-1][j+1] === -1) numberOfBombs++;
						if (j > 0 && boardArray[i][j-1] === -1) numberOfBombs++;
						if (j < numberCells-1 && boardArray[i][j+1] === -1) numberOfBombs++;
						if (i < numberCells-1 && j > 0 && boardArray[i+1][j-1] === -1) numberOfBombs++;
						if (i < numberCells-1 && boardArray[i+1][j] === -1) numberOfBombs++;
						if (i < numberCells-1 && j < numberCells-1 && boardArray[i+1][j+1] === -1) numberOfBombs++;
						boardArray[i][j] = numberOfBombs;
					}
				}
			}
			
			for (let i = 0; i < numberCells; i++) {
				for (let j = 0; j < numberCells; j++) {
					let cell = document.createElement('div');
					cell.classList.add('cell');
					cell.innerText = '';
					cell.setAttribute('data-row', i);
					cell.setAttribute('data-col', j);
					cell.addEventListener('click', handleClick);
					board.appendChild(cell);
				}
			}
		}
		
		function handleClick() {
			let row = Number(this.getAttribute('data-row'));
			let col = Number(this.getAttribute('data-col'));
			
			let boardArray = Array.from(document.querySelectorAll('.cell')).map(cell => {
				let row = Number(cell.getAttribute('data-row'));
				let col = Number(cell.getAttribute('data-col'));
				let value = cell.getAttribute('data-value');
				if (value === 'bomb') {
					return -1;
				} else {
					return Number(value);
				}
			});
			
			if (boardArray[row*5+col] === -1) {
				Array.from(document.querySelectorAll('[data-value="bomb"]'))
					.forEach(cell => cell.classList.remove('hidden'));
				Array.from(document.querySelectorAll('.cell'))
					.forEach(cell => cell.removeEventListener('click', handleClick));
				document.querySelector('h1').classList.add('lose');
			} else {
				this.classList.add('hidden');
				this.setAttribute('data-value', boardArray[row*5+col]);
				if (boardArray[row*5+col] === 0) {
					revealEmptyCells(row, col, boardArray);
				}
				let hiddenCells = Array.from(document.querySelectorAll('.cell.hidden'));
				let bombCells = Array.from(document.querySelectorAll('[data-value="bomb"]'));
				if (hiddenCells.length === bombCells.length) {
					bombCells.forEach(cell => cell.classList.remove('hidden'));
					Array.from(document.querySelectorAll('.cell'))
						.forEach(cell => cell.removeEventListener('click', handleClick));
					document.querySelector('h1').classList.add('win');
				}
			}
		}
		
		function revealEmptyCells(row, col, boardArray) {
			if (row > 0 && col > 0 && boardArray[(row-1)*5+col-1] === 0) {
				let cell = document.querySelector(`[data-row="${row-1}"][data-col="${col-1}"]`);
				if (!cell.classList.contains('hidden')) return;
				cell.classList.remove('hidden');
				cell.setAttribute('data-value', boardArray[(row-1)*5+col-1]);
				revealEmptyCells(row-1, col-1, boardArray);
			}
			if (row > 0 && boardArray[(row-1)*5+col] === 0) {
				let cell = document.querySelector(`[data-row="${row-1}"][data-col="${col}"]`);
				if (!cell.classList.contains('hidden')) return;
				cell.classList.remove('hidden');
				cell.setAttribute('data-value', boardArray[(row-1)*5+col]);
				revealEmptyCells(row-1, col, boardArray);
			}
			if (row > 0 && col < 4 && boardArray[(row-1)*5+col+1] === 0) {
				let cell = document.querySelector(`[data-row="${row-1}"][data-col="${col+1}"]`);
				if (!cell.classList.contains('hidden')) return;
				cell.classList.remove('hidden');
				cell.setAttribute('data-value', boardArray[(row-1)*5+col+1]);
				revealEmptyCells(row-1, col+1, boardArray);
			}
			if (col > 0 && boardArray[row*5+col-1] === 0) {
				let cell = document.querySelector(`[data-row="${row}"][data-col="${col-1}"]`);
				if (!cell.classList.contains('hidden')) return;
				cell.classList.remove('hidden');
				cell.setAttribute('data-value', boardArray[row*5+col-1]);
				revealEmptyCells(row, col-1, boardArray);
			}
			if (col < 4 && boardArray[row*5+col+1] === 0) {
				let cell = document.querySelector(`[data-row="${row}"][data-col="${col+1}"]`);
				if (!cell.classList.contains('hidden')) return;
				cell.classList.remove('hidden');
				cell.setAttribute('data-value', boardArray[row*5+col+1]);
				revealEmptyCells(row, col+1, boardArray);
			}
			if (row < 4 && col > 0 && boardArray[(row+1)*5+col-1] === 0) {
				let cell = document.querySelector(`[data-row="${row+1}"][data-col="${col-1}"]`);
				if (!cell.classList.contains('hidden')) return;
				cell.classList.remove('hidden');
				cell.setAttribute('data-value', boardArray[(row+1)*5+col-1]);
				revealEmptyCells(row+1, col-1, boardArray);
			}
			if (row < 4 && boardArray[(row+1)*5+col] === 0) {
				let cell = document.querySelector(`[data-row="${row+1}"][data-col="${col}"]`);
				if (!cell.classList.contains('hidden')) return;
				cell.classList.remove('hidden');
				cell.setAttribute('data-value', boardArray[(row+1)*5+col]);
				revealEmptyCells(row+1, col, boardArray);
			}
			if (row < 4 && col < 4 && boardArray[(row+1)*5+col+1] === 0) {
				let cell = document.querySelector(`[data-row="${row+1}"][data-col="${col+1}"]`);
				if (!cell.classList.contains('hidden')) return;
				cell.classList.remove('hidden');
				cell.setAttribute('data-value', boardArray[(row+1)*5+col+1]);
				revealEmptyCells(row+1, col+1, boardArray);
			}
		}
	</script>
</head>
<body onload="generateBoard()">
	<h1>爆弾除去ゲーム</h1>
	<div id="board"></div>
</body>
</html>

ゲームのルールは以下のとおりです。

・?印のマスをタップして、数字をあける
・数字は周辺にある爆弾の数を表す
・爆弾をあけたらゲームオーバー
・爆弾以外のマスを全部あけたらゲームクリア

以上が、私が作成した爆弾除去ゲームです。絵文字は使用していませんが、スマホでもプレイできるようになっています。