算法核心思想

回溯算法

递归实现

程序实现

坐标系

循环递归

回溯

计数

收集位置

特效添加

<!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. [C++STDlib基础]关于单字符的操作——C++标准库头文件<cctype>

    网上实例 总结 /* _STD_BEGIN using _CSTD isalnum; using _CSTD isalpha; using _CSTD iscntrl; using _CSTD isd ...

  2. HQL练习

    Hive学习笔记总结 05. Hql练习 1. hql基础练习 题目和数据来源:http://www.w2b-c.com/article/150326(去掉-) create和load create ...

  3. log4net 开箱即用

    废话少说,先上代码 log4net Demo 好的系统都有日志,log4net 是我在.net平台下用过最爽的日志库,简单易用.功能强大. 基于配置(配置很简单,一看就明,通用,拷去即用): 可同时保 ...

  4. String与string的区别(注意大小写)

    在C#编程过程中经常见到string和String,下面来看看它们之间的区别: 1. string是C#中的类, String是.net Framework的类. string是String的别名,S ...

  5. 读书笔记：《HTML5开发手册》Web表单

    这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...

  6. js动画（一）

    终于放寒假了,哈哈哈,然后,也不准备闲着吧,就是再熟悉一下旧的东西,然后把新的东西也拿来分享一下,自己也准备好了再这个寒假 好好的提高一下自己,哎,菜鸟一枚,真正去实战了,发现自己手上的武器太少了,所 ...

  7. 不惧面试：HTTP协议(1) - 基础扫盲

    v博客前言 先交代下背景,之前在一家公司面试.NET开发,去了先是做一份笔试题,有一半是关于HTTP协议的,技术总监直接面试,也是问一大堆HTTP协议的知识点,可能跟该公司的产品有关,该公司属于互联网 ...

  8. 【C#】Switch datatype between object and byte[]

    This sample shows how to turn object to byte[], as well as turn byte[] to object. So,I can turn any ...

  9. kali2.0 + LAMP

    0x01 更新源 leafpad /etc/apt/sources.list #中科大kali源 deb http://mirrors.ustc.edu.cn/kali sana main non-f ...

  10. iOS 加载Image的两种方式

    Apple官方文档对于加载image提供了两个方法 + (nullable UIImage *)imageNamed:(NSString *)name; + (nullable UIImage *)i ...