算法核心思想

回溯算法

递归实现

程序实现

坐标系

循环递归

回溯

计数

收集位置

特效添加

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

*{ margin:; padding:;}

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{

    %{ opacity:0.1;}

    %{ opacity:;}

    %{ opacity:0.1;}

}

@-webkit-keyframes flash{

    %{ opacity:0.1;}

    %{ opacity:;}

    %{ opacity:0.1;}

}

</style>

</head>

<body>

<ul id="ul1">

</ul>

<script>

var oUl = document.getElementById('ul1');

var aLi = oUl.getElementsByTagName('li');

var sizeGird = ;

var num = ;

var iCount = ;

var posArr = [];

var posArrAll = [];

init();

function init(){

    createGird();

    setQueen();

    //console.log( posArrAll );

    showImg();

}

function createGird(){

    var len = num * num;

    oUl.style.width = num * (sizeGird + ) + 'px';

    for(var i=;i<len;i++){

        var oLi = document.createElement('li');

        oLi.style.width = sizeGird + 'px';

        oLi.style.height = sizeGird + 'px';

        oLi.index = -;

        //oLi.innerHTML = oLi.index;

        oUl.appendChild(oLi);

    }

    for(var i=;i<num;i++){

        for(var j=;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=;i<num;i++){

        if( aLi[ iQueen*num + i ].index == - ){

            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=;j<aLi.length;j++){

                if( aLi[j].index == - && (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 +  );

            //回溯

            posArr.pop();

            for(var j=;j<aLi.length;j++){

                if( aLi[j].index == iQueen ){

                    aLi[j].index = -;

                }

            }

        }

    }

}

function showImg(){

    change();

    setInterval(change,);

    function change(){

        for(var i=;i<aLi.length;i++){

            aLi[i].style.backgroundImage = '';

            aLi[i].className = '';

        }

        var randomLi = posArrAll[ Math.floor(posArrAll.length * Math.random()) ];

        for(var i=;i<randomLi.length;i++){

            randomLi[i].style.backgroundImage = 'url(img/'+ Math.floor((Math.random()* + )) +'.jpg)';

            randomLi[i].className = 'active';

            randomLi[i].style.animationDelay = -Math.random()* + 's';

            randomLi[i].style.webkitAnimationDelay = -Math.random()* + 's';

        }

    }

}

</script>

</body>

</html>

JS算法与数据结构之八皇后(晕晕)的更多相关文章

  1. js学习之数据结构和算法

    js中的数据结构 1.列表 待办事项列表.购物清单.最佳十名榜单等等. 适用: 1)数据结构较为简单, 2)不需要在一个长序列中查找元素,或者对其进行排序 2.栈 一摞盘子 ----- 添加删除只能从 ...

  2. js的 算法 和 数据结构

    js的 算法 1.对一个对象数组按照对象某个属性进行排序  : https://www.cnblogs.com/webcabana/p/7460038.html 在做公交的项目中就碰到过这种算法问题, ...

  3. js算法初窥03（简单搜索及去重算法）

    前面我们了解了一些常用的排序算法,那么这篇文章我们来看看搜索算法的一些简单实现,我们先来介绍一个我们在实际工作中一定用到过的搜索算法--顺序搜索. 1.顺序搜索 其实顺序搜索十分简单,我们还是以第一篇 ...

  4. js算法初窥03（搜索及去重算法）

    前面我们了解了一些常用的排序算法,那么这篇文章我们来看看搜索算法的一些简单实现,我们先来介绍一个我们在实际工作中一定用到过的搜索算法——顺序搜索. 1.顺序搜索 其实顺序搜索十分简单,我们还是以第一篇 ...

  5. 技术期刊 · 天光台高未百尺 | Uber 工程师的 JS 算法课;大数据时代的个人隐私;设计师的 Github;告别 PPT 工程师;从零开始实现的像素画

    蒲公英 · JELLY技术期刊 Vol.42 这是一个最好的时代,多样化的平台给了所有人成长发展的机会,各种需求和解决需求的人让人大开眼界:但这也并不是完美的时代,"前端还需要懂什么算法?& ...

  6. 浅谈算法和数据结构: 七 二叉查找树 八 平衡查找树之2-3树 九 平衡查找树之红黑树 十 平衡查找树之B树

    http://www.cnblogs.com/yangecnu/p/Introduce-Binary-Search-Tree.html 前文介绍了符号表的两种实现,无序链表和有序数组,无序链表在插入的 ...

  7. python 下的数据结构与算法---2:大O符号与常用算法和数据结构的复杂度速查表

    目录: 一:大O记法 二:各函数高阶比较 三:常用算法和数据结构的复杂度速查表 四:常见的logn是怎么来的 一:大O记法 算法复杂度记法有很多种,其中最常用的就是Big O notation(大O记 ...

  8. LeetCode_算法及数据结构覆盖统计

    [输入]共计151道题的算法&数据结构基础数据 (见附录A) [输出-算法]其中有算法记录的共计 97道 ,统计后 结果如下  top3(递归,动态规划,回溯) 递归 动态规划 回溯 BFS ...

  9. JavaScript算法与数据结构知识点记录

    JavaScript算法与数据结构知识点记录 zhanweifu

随机推荐

  1. Python之路 1Day

    1.python基础入门   作者:黄旭 提示: 语法基于python3.5版本(会提示2.7版本和3.5版本的区别) Python命令行将以>>>开始,比如 >>> ...

  2. linux下安装PHP5.5

    下载安装包后,在安装php之前必须先安装libxml2,因此可以通过下载libxml2安装包,编译安装 我通过yum -y install libxml2 libxml2-devel(不安装这个的话, ...

  3. 理解Javascript的状态容器Redux

    Redux要解决什么问题? 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状态). 这些 state 可能包括服务器响应.缓存数据. ...

  4. 真的了解js生成随机数吗

    由js生成一切随机数的基础都是Math.random()这个方法,这个方法比较特别,生成的随机数落在的区间是[0,1),进行一次操作的话,js只能生成一个类似于[n,m)这样,左闭右开的区间.所以当有 ...

  5. jQuery Ajax用法

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  6. .NET并行与多线程学习系列一

    并行与多线程学习系列一 一.并行初试: public static void test() { ; i < ; i++) { Console.WriteLine(i); } } public s ...

  7. scipy cluster聚类 ---Python3

    官方文档: https://docs.scipy.org/doc/scipy/reference/cluster.vq.html

  8. C#文件处理

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. nginx(2)

    上一篇: nginx(1) 负载均衡: linux集群的一种常见方式,即由多台服务器组成一个服务器集合实现某个特定需求,其中每台服务器都是等价的,从而实现负载均摊的目的. 反向代理: 是指以代理服务器 ...

  10. feature2d相关

    1.Harris角点检测 是基于灰度图像的角点检测. 灰度变化率函数如下: 其中的w(x,y)为加权函数,可为常数或为高斯函数.之后对E(u,v)进行泰勒级数的展开与化简,最终得到 ,,Ix,Iy是图 ...