标签：const target js current 小游戏 innerText Html tds td
[数字华容道] 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 = '恭喜你通关啦!
标签：const,target,js,current,小游戏,innerText,Html,tds,td
From： https://www.cnblogs.com/bxmm/p/18072208
