一个简单的数独Demo
【摘要】
闲来无事，想学习点东西，而最近又在玩数独，于是乎准备使用各种技术折腾一个数独的小游戏。
下面是最简单的，数独原型。还在不断完善中。
<!DOCTYPE html><html> <head> ...
闲来无事，想学习点东西，而最近又在玩数独，于是乎准备使用各种技术折腾一个数独的小游戏。
下面是最简单的，数独原型。还在不断完善中。
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>数独</title>
-
<meta charset="utf-8" />
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-
<style type="text/css">
-
html,body{height: 100%;user-select: none;}
-
.container{height: 100%;}
-
.flex-center{
-
margin-top: 100px;
-
height:auto;
-
display:flex;
-
justify-content: center;
-
align-items: center;
-
}
-
.sudu-container{
-
width: 450px;
-
height: 450px;
-
border: 1px solid #ddd;
-
box-sizing: content-box;
-
border-bottom: none;
-
}
-
.sudu-container :nth-child(9n){border-right: 0px;}
-
.sudu-item{
-
width: 50px;
-
height: 50px;
-
box-sizing: border-box;
-
border-right: 1px solid #ddd;
-
border-bottom: 1px solid #ddd;
-
float: left;
-
cursor: pointer;
-
line-height: 50px;
-
text-align: center;
-
font-weight: 700;
-
font-size: 20px;
-
}
-
.sudu-item.active {
-
background-color: #E6A23C;
-
color: #fff;
-
}
-
.wait-number {display: block;width: 100%;margin: 0 auto;}
-
.wait-number .number-ul{
-
list-style: none;
-
text-align: center;
-
width: auto;
-
display: flex;
-
justify-content: center;
-
padding: 0;
-
margin-top: 20px;
-
}
-
.wait-number .number-ul li{
-
float: left; width: 50px;
-
height: 50px;
-
box-sizing: border-box;
-
border-top: 1px solid #ddd;
-
border-right: 1px solid #ddd;
-
border-bottom: 1px solid #ddd;
-
float: left;
-
cursor: pointer;
-
line-height: 50px;
-
text-align: center;
-
font-weight: 700;
-
font-size: 20px;
-
}
-
.wait-number .number-ul :first-child{
-
border-left: 1px solid #ddd;
-
}
-
.wait-number .number-ul li:hover{
-
background-color: #909399;
-
color: #fff;
-
}
-
.wait-number .number-ul li.active{
-
background-color: #E6A23C;
-
color: #fff;
-
}
-
-
</style>
-
</head>
-
<body>
-
-
<div class="container">
-
<div class="flex-center">
-
<div class="sudu-container">
-
<div class="sudu-items-container" id="J_sudu_items">
-
<!-- <div class="sudu-item" data-index="0"></div> -->
-
</div>
-
</div>
-
</div>
-
<div class="wait-number">
-
<ul class="number-ul" id="J_number_ul">
-
<li>1</li>
-
<li>2</li>
-
<li>3</li>
-
<li>4</li>
-
<li>5</li>
-
<li>6</li>
-
<li>7</li>
-
<li>8</li>
-
<li>9</li>
-
</ul>
-
</div>
-
</div>
-
-
<script src="./index.js"></script>
-
<script>
-
// 产出一个正确的数独数组
-
function createShuDuArr () {
-
let arr = [], finArr = [];
-
for(let i = 1; i < 10; i ++) {
-
arr.push(i)
-
}
-
finArr = new Array(9).fill(arr)
-
return finArr.flat()
-
}
-
let currentIndex = null
-
let correctArr = createShuDuArr()
-
console.log(correctArr)
-
let suduDataArr = new Array(81).fill(null)
-
let suduContainerEl = document.querySelector("#J_sudu_items")
-
let suduItem = [] // new Array(81).fill('<div class="sudu-item"></div>')
-
for(let i = 0; i < 81; i++) {
-
suduItem.push(`<div class="sudu-item" data-index="${i}"></div>`)
-
}
-
suduContainerEl.innerHTML = suduItem.join('\n')
-
-
suduDataArr[1] = 1
-
suduDataArr[20] = 5
-
suduDataArr[30] = 3
-
-
suduDataArr.forEach((outerItem, outerIndex) => {
-
if (outerItem) {
-
suduContainerEl.querySelector(`.sudu-item:nth-child(${outerIndex+1})`).innerHTML = outerItem
-
}
-
})
-
-
// 初始化数据
-
function initData () {
-
-
}
-
-
// 渲染数据到view
-
function renderDataOnView () {
-
-
}
-
-
// 点击底部数字
-
function clickNumberItem (even) {
-
let targetEl = even.target
-
suduContainerEl.querySelector(`.sudu-item:nth-child(${ currentIndex + 1})`).innerHTML = targetEl.innerHTML
-
if(targetEl.innerHTML !== correctArr[currentIndex]) {
-
console.log('错误')
-
}
-
// 验证 当前currentIndex 是否是正确的数字
-
// 需要验证suduDataArr是否是数独
-
}
-
-
// 点击数独区域
-
function clickSuduNumberItem (even) {
-
let targetEl = even.target
-
if(!targetEl.classList.contains('active')) {
-
let activeItem = document.querySelector("#J_sudu_items .active")
-
if(activeItem && activeItem.classList.contains('active')) {
-
activeItem.classList.remove('active')
-
}
-
targetEl.classList.add('active')
-
}
-
currentIndex = parseInt(targetEl.dataset.index, 10)
-
}
-
-
document.querySelector("#J_number_ul").addEventListener('click', clickNumberItem, false)
-
-
document.querySelector("#J_sudu_items").addEventListener('click', clickSuduNumberItem, false)
-
-
-
</script>
-
</body>
-
-
</html>
复习了以下知识，
classList的remove， add，contains
css中 flex， box-sizing ， ：nth-clild， ：nth-clild（9n）
new Array（10）.fill('<div>123</div>')
addEventListener(evenName, func, Bloean)
文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。
原文链接：fizzz.blog.csdn.net/article/details/104230102
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）