[數字華容道] Html+css+js 實現小遊戲

天葬發表於2024-03-14
HTMLCSSJS遊戲

[數字華容道] Html+css+js 實現小遊戲

效果圖

程式碼預覽

線上預覽地址

程式碼示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>數字華容道</title>
		<style>
			h1 {
				text-align: center;
			}

			.box {
				border: 1px solid #cfcfcf;
				margin: 0 auto;
				width: 322px;
				padding: 20px;
				border-radius: 20px;
			}

			.fun {
				display: flex;
				justify-content: space-between;
			}


			td {
				width: 100px;
				height: 100px;
				text-align: center;
				background-color: #f1c385;
				user-select: none;
			}

			.current {
				background-color: #fff !important;
				transition: all .3s;
			}

			#error {
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h1>數字華容道</h1>
			<p><strong>規則：</strong>移動方塊依次出現1、2、3、4、5、6、7、8就可通關！不能對角線移動，不能跳格子移動。只能相鄰上下或左右</p>
			<hr />
			<div class="fun">
				<div><span>計次：</span><span id="num">0</span></div>
				<div><span>提示：</span><span id="error"></span></div>
				<div><span>功能：</span><button id="reset">重開</button></div>
			</div>
			<hr />
			<table border="1">
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr>
					<td>4</td>
					<td>5</td>
					<td>6</td>
				</tr>
				<tr>
					<td>7</td>
					<td>8</td>
					<td class="current"></td>
				</tr>
			</table>
		</div>
		<script>
			const step = document.getElementById('num');
			const error = document.getElementById('error');
			const seed = [1, 2, 3, 4, 5, 6, 7, 8];
			// 隨機陣列
			const shuffle = (array) => {
				for (let i = array.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[array[i], array[j]] = [array[j], array[i]];
				}
				return array;
			}
			// 檢查結果
			const check = () => {
				let flag = true;
				const tds = document.querySelectorAll('td');
				for (let i = 0; i < tds.length - 1; i++) {
					let td = tds[i];
					if (i + 1 !== parseInt(td.innerText)) {
						flag = false;
					}
				}
				if (flag) {
					error.innerText = '恭喜你通關啦!👌';
				}
			}
			// 更新 td 資料
			const init = () => {
				const data = shuffle(seed);
				const tds = document.querySelectorAll('td');
				for (let i = 0; i < tds.length - 1; i++) {
					let td = tds[i];
					td.innerText = data[i];
					td.className = ''
				}
				error.innerText = '';
				step.innerText = 0;
				tds[tds.length - 1].className = 'current'
				tds[tds.length - 1].innerText = ''
			}
			init()
			document.getElementById('reset').addEventListener('click',()=>{
				init();
			});
			// 監聽點選事件，移動方塊處理
			document.querySelector('table').addEventListener('click', (event) => {
				const target = event.target;
				const current = document.querySelector('.current');

				const {
					x: cx,
					y: cy
				} = current.getBoundingClientRect();
				const {
					x: tx,
					y: ty
				} = target.getBoundingClientRect();
				const w = Math.abs(cx - tx);
				const h = Math.abs(cy - ty);
				if ((cx === tx || ty === cy) && (w < 200 && h < 200)) {
					if (target.nodeName === 'TD' && target !== current) {
						const innerText = target.innerText;
						target.classList = 'current';
						target.innerText = '';
						// 當前空白塊
						current.innerText = innerText
						current.classList.remove('current');
						// 更新步驟
						let num = step.innerText || 0;
						num++;
						step.innerText = num;
						error.innerText = '';
						check();
					}
				} else {
					error.innerText = '不能這樣哦😀';
				}
			})
		</script>
	</body>
</html>

相關文章