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

No:4168

3010

←

Prev Next

→

Random magic circle generation
Developer AI絵師｜Date and time 23/6/27 13:22:44
Build time 41.97 sec｜Game capacity 3.837KB｜

Script

以下はHTMLファイルである。JavaScriptを含み、scriptタグで囲まれ、実行されるランダム魔法陣生成のゲームである。

ランダム魔法陣生成

このゲームは3x3のランダムな魔法陣を生成し、ユーザーがクリックしたセルを黄色でハイライトします。解答をチェックすると、正しくない番号がある場合は赤に変わり、すべて正しい場合は「おめでとう」というメッセージが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

以下はHTMLファイルである。JavaScriptを含み、scriptタグで囲まれ、実行されるランダム魔法陣生成のゲームである。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ランダム魔法陣生成</title>
	<style>
		body {
			background-color: #eee;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}
		
		h1 {
			margin-top: 0;
		}
		
		.magic-square {
			display: flex;
			flex-wrap: wrap;
			border: 5px solid #333;
			border-radius: 10px;
			margin-top: 20px;
			padding: 10px;
			background-color: #fff;
		}
		
		.cell {
			width: 50px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			font-weight: bold;
			background-color: #ddd;
			margin: 5px;
			border-radius: 5px;
			cursor: pointer;
			transition: all 0.2s;
		}
		
		.cell:hover {
			background-color: #bbb;
		}
		
		.cell.selected {
			background-color: #ff0;
		}
		
		.cell.mistake {
			background-color: #f00;
		}
	</style>
</head>
<body>
	<h1>ランダム魔法陣生成</h1>
	<div>
		<button onclick="newGame()">新しい魔法陣を生成する</button>
		<button onclick="check()">解答をチェックする</button>
	</div>
	<div class="magic-square"></div>
	
	<script>
		let currentNumber;
		let currentCells;
		
		function newGame() {
			const magicSquare = createMagicSquare(3);
			currentNumber = 1;
			currentCells = [];
			const container = document.querySelector('.magic-square');
			container.innerHTML = '';
			for (let i = 0; i < magicSquare.length; i++) {
				for (let j = 0; j < magicSquare[i].length; j++) {
					const cell = document.createElement('div');
					cell.classList.add('cell');
					cell.dataset.row = i;
					cell.dataset.col = j;
					cell.textContent = magicSquare[i][j];
					cell.addEventListener('click', handleCellClick);
					container.appendChild(cell);
				}
			}
			selectCell(0, 0);
		}
		
		function createMagicSquare(size) {
			const magicSquare = [];
			for (let i = 0; i < size; i++) {
				magicSquare.push([]);
				for (let j = 0; j < size; j++) {
					magicSquare[i].push(0);
				}
			}
			let row = 0;
			let col = Math.floor(size / 2);
			for (let n = 1; n <= size * size; n++) {
				magicSquare[row][col] = n;
				const nextRow = (row - 1 + size) % size;
				const nextCol = (col + 1) % size;
				if (magicSquare[nextRow][nextCol] === 0) {
					row = nextRow;
					col = nextCol;
				} else {
					row = (row + 1) % size;
				}
			}
			return magicSquare;
		}
		
		function handleCellClick(event) {
			const row = +event.currentTarget.dataset.row;
			const col = +event.currentTarget.dataset.col;
			selectCell(row, col);
		}
		
		function selectCell(row, col) {
			const cells = document.querySelectorAll('.cell');
			for (let i = 0; i < cells.length; i++) {
				cells[i].classList.remove('selected');
			}
			const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
			cell.classList.add('selected');
			currentCells = [cell];
		}
		
		function check() {
			const cells = document.querySelectorAll('.cell');
			let correct = true;
			for (let i = 0; i < cells.length; i++) {
				if (+cells[i].textContent !== i + 1) {
					cells[i].classList.add('mistake');
					correct = false;
				} else {
					cells[i].classList.remove('mistake');
				}
			}
			if (correct) {
				alert('おめでとう！魔法陣を完成させました！');
			}
		}
		
		newGame();
	</script>
</body>
</html>