[数字华容道] 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 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> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库