[数字华容道] Html+css+js 实现小游戏

[数字华容道] 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>
posted @   天葬  阅读(439)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示