棋盘覆盖-分治法迭代

最新推荐文章于 2022-12-05 22:52:58 发布

月流丹

最新推荐文章于 2022-12-05 22:52:58 发布

阅读量243

点赞数

分类专栏：算法随笔文章标签：算法

本文链接：https://blog.csdn.net/NightWatchers/article/details/105368639

版权

随笔同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

算法

3 篇文章 0 订阅

订阅专栏

好久没写博客了，今天写了一个棋盘覆盖，就贴上来吧：

首先棋盘覆盖的原理是

在 $2^k*2^k$ 的棋盘上进行，其中有一个特殊点即奇异点，现在以4种奇异点图形对棋盘进行覆盖，使得每2*2的方块中有且仅有一个奇异点。
在这里插入图片描述
即四个角的图形

方法

对整个棋盘不断的进行四等份的分割，即分治法解决，这里不再赘述，可以直接看代码。

代码

核心代码

function diedaifa(i,j,k,m,n){
 console.log(i+","+j);
 if(k>1){
  if(m>i && n>j){//右下
   diedaifa(i+k/2,j+k/2,k/2,m,n);//右下
   diedaifa(i-k/2,j-k/2,k/2,i,j);//左上
   diedaifa(i-k/2,j+k/2,k/2,i,j+1);//右上
   diedaifa(i+k/2,j-k/2,k/2,i+1,j);//左下
   grid[i][j].style.backgroundImage = "url('./img/2.png')";
   grid[i][j+1].style.backgroundImage = "url('./img/2.png')";
   grid[i+1][j].style.backgroundImage = "url('./img/2.png')";
  }
  if(m>i && n<=j){//左下
   diedaifa(i+k/2,j+k/2,k/2,i+1,j+1);//右下
   diedaifa(i-k/2,j-k/2,k/2,i,j);//左上
   diedaifa(i-k/2,j+k/2,k/2,i,j+1);//右上
   diedaifa(i+k/2,j-k/2,k/2,m,n);//左下
   grid[i][j].style.backgroundImage = "url('./img/2.png')";
   grid[i][j+1].style.backgroundImage = "url('./img/2.png')";
   grid[i+1][j+1].style.backgroundImage = "url('./img/2.png')";
  }
  if(m<=i && n>j){//右上
   diedaifa(i+k/2,j+k/2,k/2,i+1,j+1);//右下
   diedaifa(i-k/2,j-k/2,k/2,i,j);//左上
   diedaifa(i-k/2,j+k/2,k/2,m,n);//右上
   diedaifa(i+k/2,j-k/2,k/2,i+1,j);//左下
   grid[i][j].style.backgroundImage = "url('./img/2.png')";
   grid[i+1][j+1].style.backgroundImage = "url('./img/2.png')";
   grid[i+1][j].style.backgroundImage = "url('./img/2.png')";
  }
  if(m<=i && n<=j){//左上
   diedaifa(i+k/2,j+k/2,k/2,i+1,j+1);//右下
   diedaifa(i-k/2,j-k/2,k/2,m,n);//左上
   diedaifa(i-k/2,j+k/2,k/2,i,j+1);//右上
   diedaifa(i+k/2,j-k/2,k/2,i+1,j);//左下
   grid[i+1][j+1].style.backgroundImage = "url('./img/2.png')";
   grid[i][j+1].style.backgroundImage = "url('./img/2.png')";
   grid[i+1][j].style.backgroundImage = "url('./img/2.png')";
  }
 }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>棋盘覆盖</title>
    <link href="index.css" rel="stylesheet">
</head>
<body>
    <div id="chess"></div>
</body>
<script src="index.js"></script>
<script src="qipanfugaifa.js"></script>
</html>

index.js

var chess;//棋盘对象
var grid;//二维数组，记录棋盘点是否有棋子，什么棋子
var chessWidth = 16;//棋盘格数
var block = false;//点击时间锁
function createGrid(x, y) {//创建棋盘节点div
    var temp = document.createElement("div");
    temp.classList.add("grid");
    temp.style.left = (7 + x * 50) + "px";
    temp.style.top = (7 + y * 50) + "px";
    temp.x = x;
    temp.y = y;
    temp.value = 0;//0为空位，1为黑子，2为白子
    return temp;
}
function init() {//初始化方法
    grid = new Array(chessWidth);
    for (var i = 0; i < grid.length; i++) {//初始化二维棋盘
        grid[i] = new Array(chessWidth);
        for (var j = 0; j < grid[i].length; j++) {
            // 创建dom节点
            grid[i][j] = createGrid(j, i);
            grid[i][j].onclick = function () {//棋盘节点点击事件
                if (this.value > 0 || block) {//被锁住时或者已有棋子时直接return
                    return;
                }
                block = true;//开启锁
                this.style.backgroundImage = "url('./img/1.png')";
                console.log(i+","+j);
                console.log(this.x+","+this.y);
                diedaifa(7,7,8,this.y,this.x);
                console.log(i+","+j);
            }
            chess.appendChild(grid[i][j]);
        }
    }
}
window.onload = function () {
    chess = document.getElementById("chess");
    init();
}

结果

在这里插入图片描述
如果有问题大家可以多多交流！！！

月流丹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
棋盘覆盖-分治法迭代

好久没写博客了，今天写了一个棋盘覆盖，就贴上来吧：首先棋盘覆盖的原理是在2k∗2k2^k*2^k2k∗2k的棋盘上进行，其中有一个特殊点即奇异点，现在以4种奇异点图形对棋盘进行覆盖，使得每2*2的方块中有且仅有一个奇异点。即四个角的图形方法对整个棋盘不断的进行四等份的分割，即分治法解决，这里不再赘述，可以直接看代码。代码核心代码function diedaifa(i,j,k,m,...
复制链接

扫一扫

专栏目录