1. 程式人生 > >八皇后

八皇后

/* * 遊戲:規則 * 如果把棋盤的每個空格寫成座標的話,那麼 * ①這個格子沒有被佔用過 * ②每個皇后的橫(一)豎(丨)撇(丿)捺(\)都不能有其他棋子 * 橫排:y軸值相等 * 豎排:x軸值相等 * 撇排:x + y 恆等 * 捺排:x -y 恆等 * $624YCdns * * */ var oUl1 = document.querySelector('#ul1'); var aLi = oUl1.getElementsByTagName('li'); var
clientWidth = document.documentElement.clientWidth; var clientHeight = document.documentElement.clientHeight; // 8個皇后 var num = 8; // 格子大小 // 手機,豎屏>橫屏 if(clientHeight > clientWidth){ var sizeGrid = Math.floor(clientWidth / 10); } else { // 電腦,橫屏>豎屏 var
sizeGrid = Math.floor(clientWidth * 0.43 / 10); } //var sizeGrid = Math.floor(clientWidth / num); // 記錄一組位置 var posArr = []; // 記錄所有組的位置 var posAllArr = []; // 記錄一共有多少種可能性 var count = 0; var myAuto = document.getElementById('audio'); init(); function init(){ myAuto.play(); createGrid(); // 給第一個皇后安排座位
setQueen(0); //console.log(posAllArr); // 展示 show(); } // 建立棋盤 function createGrid(){ oUl1.style.width = (num * sizeGrid + 1) + 'px'; for ( var i = 0; i < num; i++ ) { for ( var j = 0; j < num; j++ ) { var oLi = document.createElement('li'); oLi.style.width = sizeGrid + 'px'; oLi.style.height = sizeGrid + 'px'; // 座標系 oLi.x = j; oLi.y = i; oLi.index = -1; //oLi.innerHTML = oLi.x + ',' + oLi.y; //oLi.innerHTML = oLi.index; oUl1.appendChild(oLi); } } } // 下子 function setQueen(iQueen){ // 當第8個皇后有自己的位置了,就可以把這一組值給記錄下來,結束遞迴 if( iQueen === num) { posAllArr.push(posArr.concat()); count++; return; } // 第一個皇后有四個座位可以選擇 for ( var i = 0; i < num; i++ ) { // ①這個位置沒有其他皇后佔領 if ( aLi[ iQueen*num + i].index === -1){ // 這個皇后開始坐下 aLi[iQueen*num + i].index = iQueen; //aLi[iQueen*num + i].innerHTML = aLi[iQueen*num + i].index; // 把這個皇后放入posArr中 posArr.push(aLi[iQueen*num + i]); // 獲取當前格子的座標 var x = aLi[ iQueen*num + i].x; var y = aLi[ iQueen*num + i].y; /* * 然後這個皇后,要以自己為中心佔領地盤(空格&&橫豎撇捺) * 如果把棋盤的每個空格寫成座標的話,那麼 * ①這個格子沒有被佔用過 * ②每個皇后的橫(一)豎(丨)撇(丿)捺(\)都不能有其他棋子 * 橫排:y軸值相等 * 豎排:x軸值相等 * 撇排:x + y 恆等 * 捺排:x -y 恆等 * */ for ( var j = 0; j < aLi.length; j++ ) { if( aLi[j].index === -1 && (aLi[j].x === x || aLi[j].y === y || aLi[j].x - aLi[j].y === x - y || aLi[j].x + aLi[j].y === x + y) ){ aLi[j].index = iQueen; //aLi[j].innerHTML = aLi[j].index; } } // 遞迴,開始給第二個皇后安排位置 arguments.callee(iQueen+1); // 如果這個皇后沒有位置了,即這個遞迴函式不能遞迴了 // ,就開始回溯,上一個皇后要重新佔位置 // 皇后退位 posArr.pop(); // 撤兵 for ( var j = 0; j < aLi.length; j++ ) { if ( aLi[j].index === iQueen ) { aLi[j].index = -1; } } } } } // 展示成果 function show(){ change(); setInterval(function () { change(); }, 2000); function change() { for ( var i = 0; i < aLi.length; i++ ) { aLi[i].style.backgroundImage = ''; aLi[i].className = ''; } // 隨機從結果陣列posAllArr中找出一種效果展示 var random = posAllArr[Math.floor(Math.random()*posAllArr.length)]; for ( var i = 0; i < random.length; i++ ) { random[i].style.backgroundImage = 'url(img/' + (Math.ceil(Math.random()*11) + 1) + '.jpg)'; random[i].className = 'active'; // 延遲動畫 random[i].style.animationDelay = Math.random()*2 + 's'; random[i].style.webkitAnimationDelay = Math.random()*2 + 's'; } } }