8皇后html实现代码

Html

Css

    需求:
        实现一个8皇后动画遍历查询效果
    功能
        1.动画效果遍历方格，符合8皇后条件，填充方格数据
        2.如果找到符合条件的8皇后，找出来，用一个容器存储找到的8皇后表格模板

html,body,* {
	margin:0px;
	padding:0px;
}
.main {
	width:400px;
	height:400px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	background-color:#e9ddda;
	/*border:1px solid grey;
	*/
            margin:0 auto;
}
.main_default_show {
	ackground-color:#e9ddda;
	width:40px;
	height:40px;
	margin:4px;
	border:1px solid grey;
	float:left;
}
.main_qizi_show {
	background-color:#e98550;
	width:40px;
	height:40px;
	margin:4px;
	border:1px solid grey;
	float:left;
}
.body {
	width:400px;
	height:400px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	background-color:#e9ddda;
	/*border:1px solid grey;
	*/
            margin:0 auto;
}
.body_box {
	width:100px;
	height:100px;
}
.body_default_show {
	background-color:#e9ddda;
	width:10px;
	height:10px;
	border:1px solid grey;
	float:left;
}
.body_qizi_show {
	background-color:#e98550;
	width:10px;
	height:10px;
	border:1px solid grey;
	float:left;
}

/*
    通过一维数组处理n皇后问题
    1.初始化数据为 -1
     */

$(function() {
    Queue.init(8);
    QueueUI.init(Queue).initMainBox().run(0)
})

/**
 * 皇后对象信息
 * @constructor
 */
let Queue = {
    data: [], // 存储对象的数据信息
    size: -1,
    preIndex: {
        x: -1,
        y: -1
    }, // 前置坐标信息
    currIndex: {
        x: -1,
        y: -1
    }, // 当前坐标信息

/**
     * 初始化皇后对象信息
     */
    init: function(size) {
        this.size = size;
        for (let i = 0; i < size; i++) {
            this.data.push(-1);
        }
    },

/**
     * 判断前元素是否符合n皇后排序规则
     */
    judge: function(num) {
        for (let i = 0; i < num; i++) {
            // 判断n个皇后位置是否存在冲突
            // abs取绝对值
            if (this.data[i] == this.data[num] || this.abs(num - i) == this.abs(this.data[num] - this.data[i])) {
                return false;
            }
        }
        return true;
    },

/**
     * 获取绝对值
     */
    abs: function(num) {
        return num < 0 ? -num : num;
    },

/**
     * 延迟函数
     * @param ms 毫秒
     */
    sleep: function(ms) {
        return new Promise(function(resolve, reject) {
            setTimeout(resolve, ms);
        })
    }

}

/**
 * n皇后Ui信息
 * 学习以下链式编程方式
 * @constructor
 */
let QueueUI = {
    queue: null,

/**
     * 初始化UI对象信息
     */
    init: function(queue) {
        this.queue = queue;
        return this;
    },

/**
     * 初始化主盒子样式
     */
    initMainBox: function() {
        let $mainBox = $('.main');
        $mainBox.empty();
        for (let i = 0; i < this.queue.size; i++) {
            let data = this.queue.data[i];
            let $qizi = null;
            for (let j = 0; j < this.queue.size; j++) {
                let classes = (data === j ? 'main_qizi_show' : 'main_default_show');
                $qizi = $('<div></div>').addClass(classes);
                $mainBox.append($qizi);
            }
        }
        return this;
    },

/**
     * 添加 body 内的盒子信息
     */
    appendBodyBox: function() {
        let $body = $('.body');
        let $bodyBox = $('<div></div>').addClass('body_box');
        for (let i = 0; i < this.queue.size; i++) {
            let data = this.queue.data[i];
            let $qizi = null;
            for (let j = 0; j < this.queue.size; j++) {
                let classes = data === j ? 'body_qizi_show' : 'body_default_show';
                $qizi = $('<div></div>').addClass(classes);
                $bodyBox.append($qizi);
            }
        }
        $body.append($bodyBox);
    },

/**
     * 皇后运行，盒子渲染处理
     */
    run: async function(num) {
        if (num === this.queue.size) {
            // 添加body盒子
            this.appendBodyBox();
            return;
        }
        for (let i = 0; i < this.queue.size; i++) {
            this.queue.data[num] = i;
            // 这里做一个延时函数处理
            await this.queue.sleep(20);
            await this.initMainBox();
            if (this.queue.judge(num)) {
                // num,i
                await this.run(num + 1);
            }
        }
        // 将数据回退到原始数据
        this.queue.data[num] = -1;
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0

立即下载

8皇后html实现代码



代码描述：使用html实现8皇后查询效果

更新时间：2021-01-04 22:16:08
主要提供8皇后遍历结果效果，符合条件的查询结果输出展示

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Joker

相关代码

8皇后html实现代码

最新