算法核心思想

回溯算法

递归实现

程序实现

坐标系

循环递归

回溯

计数

收集位置

特效添加

<!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. spring事务管理器设计思想（2）

    spring事务管理器设计思想(二) 上文见<spring事务管理器设计思想(一)> 对于第二个问题,涉及到事务的传播级别,定义如下: PROPAGATION_REQUIRED-- 如果当 ...

  2. 可供VC调用的QT编写的界面DLL方法

    一般直接编写的QT动态库是无法被Windows下的VC6.0等调用的. 如下步骤 第一步:必须要在QT界面库源码下包含qtwinmigrate的源码包和库,网上可下载到. 第二步:在QT的proc文件 ...

  3. [置顶] Android图片异步加载之Android-Universal-Image-Loader

    将近一个月没有更新博客了,由于这段时间以来准备毕业论文等各种事务缠身,一直没有时间和精力沉下来继续学习和整理一些东西.最近刚刚恢复到正轨,正好这两天看了下Android上关于图片异步加载的开源项目,就 ...

  4. ONLY三行脚本 SQL数据恢复到指定时间点

    经常看到有人误删数据,或者误操作,特别是Update和Delete的时候没有加WHERE ... 然后就喊爹喊娘了,怕是亲爹妈也无奈摇肩. 话说,如果没有犯过错误,那你还算是程序猿(媛)麽?!没了偶尔 ...

  5. express搭建简易web的服务器

    express搭建简易web的服务器 说到express我们就会想到nodejs,应为它是一款基于nodejs平台的web应用开发框架.既然它是基于nodejs平台的框架那么就得先安装nodejs. ...

  6. [ios2]tableView去除空行的singleLine

    http://www.winddisk.com/2013/03/29/tableview%E5%8E%BB%E9%99%A4%E7%A9%BA%E8%A1%8C%E7%9A%84singleline/ ...

  7. Struts框架的入门使用

    1.struts框架的使用 导入jar包 1.commons-fileupload-1.2.jar 2. freemarker-2.3.15.jar 3.ognl-2.7.3.jar 4.struts ...

  8. List去重

    因为用到list,要去除重复数据,尝试了几种方法.记录于此... 测试数据: List<string> li1 = new List<string> { "8&quo ...

  9. ORA-12516 TNS监听程序找不到符合协议堆栈要求的可用处理程序

    服务器上某个数据库出现' ORA-12516: TNS: 监听程序找不到符合协议堆栈要求的可用处理程'错误,要解决该问题首先查看一下数据库现有的进程数,是否已经达到参数processes的大小. 使用 ...

  10. picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

    polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到 ...