JS算法与数据结构之八皇后(晕晕)

算法核心思想

回溯算法

递归实现

程序实现

坐标系

循环递归

回溯

计数

收集位置

特效添加

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#ul1{ height:auto; margin:20px auto; overflow:hidden; border:1px #FFF solid; border-right:none; border-bottom:none; background-image:url(img/bg.jpg); background-size:cover;}
#ul1 li{ float:left; border:1px #FFF solid;border-left:none; border-top:none; background-size:cover;}
#ul1 li.active{ animation:.5s infinite linear flash; -webkit-animation:.5s infinite linear flash;}
@keyframes flash{
    0%{ opacity:0.1;}
    50%{ opacity:1;}
    100%{ opacity:0.1;}
}
@-webkit-keyframes flash{
    0%{ opacity:0.1;}
    50%{ opacity:1;}
    100%{ opacity:0.1;}
}
</style>
</head>

<body>
<ul id="ul1">
</ul>
<script>

var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var sizeGird = 50;
var num = 8;
var iCount = 0;
var posArr = [];
var posArrAll = [];

init();

function init(){
    createGird();
    setQueen(0);
    //console.log( posArrAll );
    showImg();
}

function createGird(){
    var len = num * num;
    
    oUl.style.width = num * (sizeGird + 1) + 'px';
    
    for(var i=0;i<len;i++){
        var oLi = document.createElement('li');
        oLi.style.width = sizeGird + 'px';
        oLi.style.height = sizeGird + 'px';
        oLi.index = -1;
        //oLi.innerHTML = oLi.index;
        oUl.appendChild(oLi);
    }
    
    for(var i=0;i<num;i++){
        for(var j=0;j<num;j++){
            //i j num
            aLi[ i*num + j ].x = j;
            aLi[ i*num + j ].y = i;
            //aLi[ i*num + j ].innerHTML = j + ',' + i;
        }
    }
}

function setQueen(iQueen){
    
    if( iQueen == num ){
        posArrAll.push( posArr.concat() );
        iCount++;
        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 = iQueen;
            posArr.push(aLi[ iQueen*num + i ]);
            var x = aLi[ iQueen*num + i ].x;
            var y = aLi[ iQueen*num + i ].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 = iQueen;
                }
            }
            
            setQueen( iQueen + 1 );
            
            //回溯
            posArr.pop();
            for(var j=0;j<aLi.length;j++){
                if( aLi[j].index == iQueen ){
                    aLi[j].index = -1;
                }
            }
        
        }
    }
}

function showImg(){
    
    change();
    setInterval(change,2000);
    
    function change(){
        
        for(var i=0;i<aLi.length;i++){
            aLi[i].style.backgroundImage = '';
            aLi[i].className = '';
        }
        
        var randomLi = posArrAll[ Math.floor(posArrAll.length * Math.random()) ];
        
        for(var i=0;i<randomLi.length;i++){
            randomLi[i].style.backgroundImage = 'url(img/'+ Math.floor((Math.random()*11 + 1)) +'.jpg)';
            randomLi[i].className = 'active';
            randomLi[i].style.animationDelay = -Math.random()*2 + 's';
            randomLi[i].style.webkitAnimationDelay = -Math.random()*2 + 's';
        }
        
    }
    
}

</script>
</body>
</html>
View Code

 

posted @ 2017-01-10 14:56  秋水惜朝  阅读(82)  评论(0编辑  收藏