算法核心思想

回溯算法

递归实现

程序实现

坐标系

循环递归

回溯

计数

收集位置

特效添加

<!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. Java网络请求getInputStream异常

    今天调试网络请求部分时,当getInputStream失败时直接抛出异常.解决方法时在getInputStream之前获取ResponseCode if( connection.getResponse ...

  2. (*p)++ 与 *p++ 与 ++*p 拨开一团迷雾

    (*p)++ 与 *p++ 与 ++*p 拨开一团迷雾 环境:win7 IDE:DEV-C++ 编译器:GCC 1.先说++i和i++的基础 代码如下: ? 1 2 3 4 5 6 7 8 9 10 ...

  3. 应用之星在线app开发平台，菜鸟也会做应用

    看着各类应用平台玲琅满目的应用,你是否幻想过,如果里面能有一款我开发的应用是件多NB的事,平凡的你肯定会说,我又不会设计又不会代码,怎么可能?现在告诉你,这不是幻想,即使你不会设计也不会代码,一样可以 ...

  4. linux c编程获得当前进程的进程名和执行路径

    如何得到当前进程的进程名和执行路径.写了个程序分享一下. [sam@hzhsan test]$ more test_processname.cpp #include <limits.h> ...

  5. 用android代码显示图片的一部分源码

    ShowPoritionPictureActivity代码: [java] <span style="font-size:16px;"> package com.iwi ...

  6. 【转载】访问WEB-INF目录中的JSP文件

    转自:http://blog.csdn.net/eidolon8/article/details/7050114 方法1:本来WEB-INF中的jsp就是无法通过地址栏访问的.所以安全.如果说你要访问 ...

  7. Java核心技术 卷Ⅰ 基础知识（1）

    第三章 Java的基本程序设计结构 Java对大小写敏感 命名规范为骆驼命名法,不能使用保留字 main方法必须声明为public 如果main方法正常退出,java应用程序的退出代码为0,表示成功运 ...

  8. java switch 优化

    关键字 switch 语句用于多条件判断,switch 语句的功能类似于 if-else 语句,两者的性能差不多.但是 switch 语句有性能提升空间.清单 16 所示代码演示了 Switch 与 ...

  9. 【C#】【SHARE】The registering of global hotkeys

    I remember that when I was still using VB6 sereval years ago, if global hotkeys are required, a mass ...

  10. Leaving Auction

    Leaving Auction 题目链接:http://codeforces.com/contest/749/problem/D 二分 本来以为是哪种神奇的数据结构,没想到sort+lower_bon ...