数独游戏
提交 检查功能还未完善，算法没想明白- -
HTML
数独游戏
提交
检查
清除当前
下一关
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
CSS
*{
padding: 0;
margin: 0;
}
body{
background-color: #9e9e9e66;
color: #fff;
}
container{
width: 500px;
height: 700px;
position: relative;
margin: 50px auto;
background-color: #2196f3e0;
}
top{
position: absolute;
width: 100%;
height: 100px;
}
name{
position: absolute;
width: 150px;
height: 50px;
line-height: 50px;
font-size: 36px;
text-align: center;
margin-left: 175px;
margin-top: 20px;
}
name,
btn span{
cursor: pointer;
}
btn span:hover,
name:hover{
text-shadow: 8px 8px black;
transition: 1s;
}
nums{
position: absolute;
width: 100%;
height: 500px;
margin-top: 100px;
background-color: #fff;
}
btn{
position: absolute;
width: 100%;
height: 100px;
margin-top: 600px;
}
btn span{
height: 100px;
line-height: 100px;
text-align: center;
width: 120px;
display: inline-block;
}
td{
width: 46px;
height: 46px;
border:1px solid black;
background-color: #9e9e9e8a;
text-align: center;
font-size: 36px;
}
td:hover{
cursor: default;
}
btns td:hover,
.none:hover{
cursor: pointer;
opacity: 0.5;
}
btns{
margin-top: -500px;
margin-left: 1120px;
z-index: 999;
display: none;
}
JavaScript
function byId(id) {
return typeof(id) === "string"?document.getElementById(id):id;
}
var nums = byId('nums');
var refer = byId('refer');
var insepct = byId('insepct');
var clear = byId('clear');
var rebuild = byId('rebuild');
var tr = nums.getElementsByTagName('tr');
var td = nums.getElementsByTagName('td');
var index = 1;
var btns = byId('btns');
var tD = btns.getElementsByTagName('td');
var p = true;
var q = false; //判断能否进入下一关
console.log(tD)
+function(){
for(var i=0;i<81;i++){
if(i%3==0){
td[i].style.borderLeft = 'dotted';
}
if(i%3==2){
td[i].style.borderRight = 'dotted';
}
if((i<=26&&i>=18)||(i>=45&&i<=53)){
td[i].style.borderBottom = 'dotted'; //产生边框
}
}
arr0();
color();
}();
clear.onclick = function(){
for(i=0;i<81;i++){
if(td[i].className=='none'){
td[i].innerHTML='';
}
}
}
//输入数字
for(let i=0;i<81;i++){
td[i].id = i;
if(td[i].className=='none'){
td[i].onclick = function(){
btns.style.display = 'block';
if((i>=0&&i<=3)||(i>=9&&i<=12)||(i>=18&&i<=21)||(i>=27&&i<=30)||(i>=36&&i<=39)||(i>=45&&i<=48)||(i>=54&&i<=57)||(i>=63&&i<=66)||(i>=72&&i<=75)){
btns.style.marginLeft = 470+'px';
}
else{
btns.style.marginLeft = 1120+'px';
} //判断输入框出现在左边还是右边
for(let j=0;j<9;j++){
tD[j].onclick = function(){
td[i].innerHTML = tD[j].innerHTML;
btns.style.display = 'none';
}
}
}
}
}
//检查
insepct.onclick = function(){
}
//提交
refer.onclick = function(){
}
function check(){
}
//下一关
rebuild.onclick = function(){
if(q){
for(i=0;i<81;i++){
td[i].style.backgroundColor = "#9e9e9e8a";
td[i].innerHTML = "";
}
if(index==0){
arr0();
index++;
}
if(index==1){
arr1();
index++;
}
color();
}
else{
alert("你还未通关当前关卡");
}
}
function color(){
for(var i=0;i<81;i++){
if(td[i].innerHTML!=''){
td[i].style.backgroundColor = "orange";
}
}
}
function arr0(){
for(var i=0;i<81;i++){
switch(i)
{
case 0: td[i].innerHTML = "9"; break;
case 5: td[i].innerHTML = "2"; break;
case 9: td[i].innerHTML = "1"; break;
case 12: td[i].innerHTML = "5"; break;
case 17: td[i].innerHTML = "4"; break;
case 20: td[i].innerHTML = "3"; break;
case 24: td[i].innerHTML = "5"; break;
case 25: td[i].innerHTML = "7"; break;
case 32: td[i].innerHTML = "8"; break;
case 33: td[i].innerHTML = "6"; break;
case 34: td[i].innerHTML = "9"; break;
case 36: td[i].innerHTML = "6"; break;
case 44: td[i].innerHTML = "2"; break;
case 46: td[i].innerHTML = "1"; break;
case 47: td[i].innerHTML = "4"; break;
case 48: td[i].innerHTML = "9"; break;
case 55: td[i].innerHTML = "5"; break;
case 56: td[i].innerHTML = "9"; break;
case 60: td[i].innerHTML = "4"; break;
case 63: td[i].innerHTML = "2"; break;
case 68: td[i].innerHTML = "1"; break;
case 71: td[i].innerHTML = "6"; break;
case 75: td[i].innerHTML = "3"; break;
case 80: td[i].innerHTML = "5"; break;
default:
td[i].className = 'none';
}
}
}
function arr1(){
for(var i=0;i<81;i++){
switch(i)
{
case 9: td[i].innerHTML = "7"; break;
case 11: td[i].innerHTML = "1"; break;
case 15: td[i].innerHTML = "8"; break;
case 17: td[i].innerHTML = "5"; break;
case 18: td[i].innerHTML = "5"; break;
case 21: td[i].innerHTML = "8"; break;
case 22: td[i].innerHTML = "1"; break;
case 23: td[i].innerHTML = "9"; break;
case 26: td[i].innerHTML = "7"; break;
case 29: td[i].innerHTML = "4"; break;
case 30: td[i].innerHTML = "6"; break;
case 32: td[i].innerHTML = "7"; break;
case 33: td[i].innerHTML = "3"; break;
case 37: td[i].innerHTML = "5"; break;
case 43: td[i].innerHTML = "2"; break;
case 47: td[i].innerHTML = "7"; break;
case 48: td[i].innerHTML = "1"; break;
case 50: td[i].innerHTML = "3"; break;
case 51: td[i].innerHTML = "5"; break;
case 56: td[i].innerHTML = "6"; break;
case 57: td[i].innerHTML = "9"; break;
case 58: td[i].innerHTML = "8"; break;
case 59: td[i].innerHTML = "5"; break;
case 62: td[i].innerHTML = "2"; break;
case 63: td[i].innerHTML = "4"; break;
case 65: td[i].innerHTML = "9"; break;
case 69: td[i].innerHTML = "6"; break;
case 71: td[i].innerHTML = "8"; break;
default:
td[i].className = 'none';
}
}
}