马的遍历过程动态演示

先放效果图：

使用的技术：前端使用的是vue，算法实现用的是Java 

算法主要代码：

public class Operator {

    int flag;
    int[][] photodata = new int[8][8];
    //检测这个位置是否可以走
    public boolean check(int x, int y,int M,int N,int[][] board)
    {
        if (x >= 0 && x < M && y >= 0 && y < N && board[x][y] == 0)
            return true;
        return false;
    }


    //下一位置有多少种走法
    public int nextPosHasSteps(int x, int y,Step[] step,int M,int N,int[][] board)
    {
        int steps = 0;
        for (int i = 0; i < 8; ++i)
        {
            if (check(x + step[i].x, y + step[i].y,M,N,board))
                steps++;
        }
        return steps;
    }

    //判断是否回到起点
    boolean returnStart(int x, int y,Step[] step,int M,int N)
    {
        //校验最后是否可以回到起点，也就是棋盘的中间位置
        int midx,midy;
        midx = M / 2 - 1;
        midy = N / 2 - 1;
        for (int i = 0; i < 8; ++i)
            if (x + step[i].x == midx && y + step[i].y == midy)
                return true;
        return false;
    }


    //输出结果
    int[][] outputResult(int xstart,int ystart,int M,int N,int[][] board)
    {

        int num = M * N;


        int k = num - board[xstart][ystart];
        for (int i = 0; i < M; ++i)
        {
            System.out.printf("\n\n");
            for (int j = 0; j < N; ++j)
            {
                board[i][j] = (board[i][j] + k) % num + 1;
                System.out.printf("%5d",board[i][j]);
                photodata[i][j]=board[i][j];
            }
        }
        System.out.printf("\n\n");
        return photodata;
    }


    //某一位置距离棋盘中心的距离
    int posToMidLength(int x,int y,int M,int N)
    {
        int midx = M / 2 - 1;
        int midy = N / 2 - 1;
        return (abs(x - midx) + abs(y - midy));
    }

    void BackTrace(int t, int x, int y,int xstart,int ystart,int M,int N,int[][] board,Step[] step)
    {
        //找到结果
        if (t == M * N && returnStart(x,y,step,M,N)) //遍历了棋盘的所以位置，并且最后可以回到起点，形成回路
        {
            outputResult(xstart,ystart,M,N,board);
            flag=1;
            //exit(0);
            //return 1;
        }
        else
        {
            PriorityQueue<NextPos> nextPosQueue=new PriorityQueue<>();
            for (int i = 0; i < 8; ++i)
            {
                if (check(x + step[i].x, y + step[i].y,M,N,board))
                {
                    NextPos aNextPos=new NextPos();
                    aNextPos.nextPosSteps = nextPosHasSteps(x + step[i].x, y + step[i].y,step,M,N,board);
                    aNextPos.nextPosDirection = i;
                    aNextPos.nextPosToMidLength = posToMidLength(x + step[i].x,y + step[i].y,M,N);
                   // nextPosQueue.push(aNextPos);
                    nextPosQueue.add(aNextPos);
                }
            }

            while(nextPosQueue.size()!=0)
            {
                if(flag==1){
                    break;
                }
                int d = nextPosQueue.poll().nextPosDirection;
                //nextPosQueue.pop();

                x += step[d].x;
                y += step[d].y;
                board[x][y] = t + 1;
                BackTrace(t + 1, x, y,xstart,ystart,M,N,board,step);
                //回溯
                board[x][y] = 0;
                x -= step[d].x;
                y -= step[d].y;
            }
        }

    }

    public int[][] horseRun(int xstart,int ystart,int M,int N,int[][] board,Step[] step)
    {
        //初始化棋盘
        for (int i = 0; i < M; i++)
            for (int j = 0; j < N; j++)
                board[i][j] = 0;
        int midx = M / 2 -1;
        int midy = N / 2 -1;
        flag=0;
        board[midx][midy] = 1; //从棋盘的中间的位置开始马周游
        BackTrace(1, midx, midy,xstart,ystart,M,N,board,step);
        return photodata;
    }



}

前端主要代码：

start(){
							if(this.startr==0&&this.startc==0){
								this.$message({
								          message: '请选择棋子开始位置！',
								          type: 'warning'
								        });
							}else{
							this.$axios.get('/ssm/getPhotoData.action', {
								params: {
									startx:this.startr-1,
									starty:this.startc-1,
								}
							}).then(response => {
								if(response.data.code==0){
									this.rephotodata=response.data.photodata;
									this.go(this.startr,this.startc);
									console.log(this.rephotodata);
									console.log(this.photodata);
								}else{
									alert('错误！');
								}
							}).catch(error => {
								console.error(error);
							});
							
							}
						}，
walk(){
			               let flag=0;
				
							for(let i=0;i<8;i++){
								for(let j=0;j<8;j++){
									if(this.rephotodata[i][j]==this.step+1){
										this.photodata[this.startr-1][this.startc-1]=this.step;
										this.startr=i+1;
										this.startc=j+1;
										this.photodata[i][j]=65;
										this.step=this.step+1;
										flag=1;
										break;
									}
								}
								if(flag==1){
									break;
								}
							}	
						},
lastwalk(x,y){
							this.photodata[this.startr-1][this.startc-1]=64;
							this.startr=x;
							this.startc=y;
							this.photodata[x-1][y-1]=65;
							this.step=this.step+1;
						},
go(x,y){
							
							for(let i=1;i<=64;i++){
								setTimeout(() => this.walk(), i*500)
							}
							
							setTimeout(() => this.lastwalk(x,y), 32500)
}

主要是动态展示的实现方法，页面布局就不放代码了。