算法核心思想

回溯算法

递归实现

程序实现

坐标系

循环递归

回溯

计数

收集位置

特效添加

<!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. 实现动态的XML文件读写操作

    实现动态的XML文件读写操作(依然带干货) 前言 最近由于项目需求,需要读写操作XML文件,并且存储的XML文件格式会随着导入的数据不同而随时改变(当然导入的数据还是有一定约束的),这样我们要预先定义 ...

  2. AppDomain卸载与代理

    AppDomain卸载与代理 涉及内容: 反射与MEF解决方案 AppDomain卸载与代理 WinForm.WcfRestService示 插件系统的基本目的是实现宿主与组件的隔离,核心是作为接驳约 ...

  3. [修]python普通继承方式和super继承方式

    [转]python普通继承方式和super继承方式 原文出自:http://www.360doc.com/content/13/0306/15/9934052_269664772.shtml 原文的错 ...

  4. 计算字符串中每种字符出现的次数[Dictionary<char,int>泛型集合用法]

    有一道经典的面试题: 统计 welcome to china中每个字符出现的次数,不考虑大小写.      第一个出现在脑海里的想法是: 1. 将字字符串转换成 char数组: 2. 用 for循环遍 ...

  5. USACO 4.2 The Perfect Stall（二分图匹配匈牙利算法）

    The Perfect StallHal Burch Farmer John completed his new barn just last week, complete with all the ...

  6. JMS(java消息服务)整合Spring项目案例

    转载自云栖社区 摘要: Sprng-jms消息服务小项目 所需的包: spring的基础包 spring-jms-xx包 spring-message–xx包 commons-collection-x ...

  7. css学习笔记1

    :before,:after伪元素 伪元素特性(目前已经遇到的) 它不存在于文档中,所以js无法操作它 它属于主元素本身,有些伪类仅仅是代表元素内容的一部分,譬如:first-letter代表第一个字 ...

  8. Runloop与autoreleasePool联系

    autoreleasePool自动释放池,ARC模式下,苹果会自动进行内存管理,不需要我们手动去管理内存.这对于苹果开发者来说,省去了很多事情,不用再每天为了内存管理浪费掉宝贵的开发时间.大家都知道, ...

  9. 使用Gradle编译release apk报错：Please correct the above warnings first

    在开发SDK的过程中,遇到了一个研发,使用了自己的SDK之后遇到了各种问题,于是我们自己帮忙接入. 所有代码都接入完成之后,准备export出一个release包,但是此时却报错: 此时出现了很多的w ...

  10. iOS中的布局

    1.UIView 有三个比较重要的布局属性: frame , bounds 和 center , CALayer 对应地叫做 frame , bounds 和 position .为了能清楚区分,图层 ...