八皇后
阿新 • • 發佈:2018-12-26
/*
* 遊戲:規則
* 如果把棋盤的每個空格寫成座標的話,那麼
* ①這個格子沒有被佔用過
* ②每個皇后的橫(一)豎(丨)撇(丿)捺(\)都不能有其他棋子
* 橫排: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';
}
}
}