Javascript 如何将角色从网格上的1个正方形移动到3个正方形？

我需要在js和jquery中制作一个基于回合的游戏。这些规则是：

• 2个字符、4件武器和15个障碍物在网格上随机生成（使用HTML表格生成，并在循环中生成）
• 字符不能并排排列
• 考虑到与障碍物的碰撞，角色可以移动1到3个方块 使用鼠标从1到3个框中进行选择，每次旋转可在网格中前进

我已经迈出了第一步，但我正挣扎着搬家，所以我想知道是否有人能帮忙？ 谢谢

let player1={}；
让player2={}；
变量工具箱={
InitializerEmptyTab:函数（nbLines、nbCols、car=''）{
var选项卡=[]；
对于（变量i=0；i=1
&&abs（player2.y-player1.y））{//检查两个玩家的行和列之间的绝对差异
console.log（“真”）；
这个.saveCoords（posPlayer，player）；
i++；
}否则{
console.log（false）；
player2=['']；
我--；
}
}
},
saveCoords（posPlayer，player）{//保存coords
for（posPlayer中的var Cellle）{
这个.grid[posPlayer[cellle].x][posPlayer[cellle].y]=player；
}
},
定位障碍物（名称、障碍物）{
var pos={}；//对象
var xRandom=0；
var-yRandom=0；
var-emptyBox=true；
对于（var i=1；i
let player1 = {};
let player2 = {};

var toolbox = {

    initialiserEmptyTab: function(nbLines, nbCols, car = ''){
        var tab = [];
        for(var i = 0;i < nbLines;i++){
            var lines = [];
            for(var j  =0;j < nbCols; j++){
                ligne.push(car);
            }
            tab.push(lines);
        }
        return tab;
    }
}

var game = {
    nbCols : 10,
    nbLines : 10,
    grid : [],

    // initialization of the elements and the grid via the toolbox
    initialisation() {
        this.grid = toolbox.initialisationEmptyTab(this.nbLines,this.nbCols,0);
        this.positioningP1(1,1); // nombre de cases(nombre), id(player)
        this.positioningP2(1,2);
        this.positioningObstacles(15, 3)
        this.positioningWeapons(1, 4)
        this.positioningWeapons(1, 5)
        this.positioningWeapons(1, 6)
        this.positioningWeapons(1, 7)
    },

    getCase(xRandom,yRandom) {  // to create x and y
        var cellule = {};
        cellule.x = xRandom;
        cellule.y = yRandom;
        return cellule;
    },

    verifEmptyBox(caseB) {  // to check if the box is empty
        if(this.grid[caseB.x][caseB.y] === 0){
            return true;
        } else {
            return false;
        } 
    },
    
    showGrid() {  // all of what we see on the grid
        const game = document.querySelector("#game");
        game.innerHTML = "";
        
        var content = "<table>";
            for(var i = 0; i < this.nbLines;i++) {
                content += "<tr>";
                for(var j = 0 ; j < this.nbCols;j++) {
                    content += "<td class='border border-dark text-center' style='width:60px;height:60px'>";
                    if(this.grid[i][j] === 0) {
                       // empty square
                    } 
                    if(this.grid[i][j] === 1) {
                        content += "<img src='/img/P1.png' class='bg-danger rounded-circle' style='width:50px;height:50px' />";
                    } 
                    if(this.grid[i][j] === 2) {
                        content += "<img src='/img/P2.png' class='bg-info rounded-circle' style='width:50px;height:50px' />";
                    }
                    if(this.grid[i][j] === 3) {
                        content += "<img src='/img/roche.png' style='width:50px;height:50px'/>";
                    }
                    if(this.grid[i][j] === 4) {
                        content += "<img src='/img/weapon1.png' style='width:40px;height:40px'/>";
                    }
                    if(this.grid[i][j] === 5) {
                        content += "<img src='/img/weapon2.png' style='width:40px;height:40px'/>";
                    }
                    if(this.grid[i][j] === 6) {
                        content += "<img src='/img/weapon3.png' style='width:40px;height:40px'/>";
                    }
                    if(this.grid[i][j] === 7) {
                        content += "<img src='/img/weapon4.png' style='width:40px;height:40px'/>";
                    }
                    content += "</td>";
                }
                content += "</tr>";
            }
        content += "</table>";
        game.innerHTML = content;
    },

    positioningP1(nombre, player) {
        for(var i = 0 ; i < nombre ; i++) {
            let xRandom = Math.floor(Math.random() * (this.nbLines-1));
            let yRandom = Math.floor(Math.random() * (this.nbCols-1));

            let posPlayer = {};
                posPlayer["case"+i] = this.getCase(xRandom, yRandom);
                player1 = posPlayer["case"+i];
                console.log(player1);

            let emptyBox = this.verifemptyBox(posPlayer["case"+i]);
            if(emptyBox == true) {
                this.saveCoords(posPlayer,player);
            } else {
                i--;
            }
        }
    },

    positioningP2(nombre, player) {
        let i = 0;
        while(i < nombre) {
            i = 0;
            let xRandom = Math.floor(Math.random() * (this.nbLines-1));
            let yRandom = Math.floor(Math.random() * (this.nbCols-1));
        
            let posPlayer = {};
            posPlayer["case"+i] = this.getCase(xRandom, yRandom);
            player2 = posPlayer["case"+i];
            console.log(player2);

            let emptyBox = this.verifemptyBox(posPlayer["case"+i]); // from there, avoids that the characters are side by side.
            if(emptyBox == true && (Math.abs(player2.x - player1.x) >= 1 
            && Math.abs(player2.y - player1.y))) { //checks the absolute difference between the rows and columns of the two players
                console.log("true");
                this.saveCoords(posPlayer,player);
                i++;
            } else {
                console.log(false);
                player2 = [''];
                i--;
            }
        }
    },

    saveCoords(posPlayer,player) { //save the coords
        for(var cellule in posPlayer) {
            this.grid[posPlayer[cellule].x][posPlayer[cellule].y] = player;
        }
    },

    positioningObstacles(nombre,obstacles) {
        var posObstacles = {}; //object
        var xRandom = 0;
        var yRandom = 0;
        var emptyBox = true;

        for(var i = 1 ; i <= nombre ; i++) {
            xRandom = Math.floor(Math.random() * (this.nbLines-1));
            yRandom = Math.floor(Math.random() * (this.nbCols-1));
            
            posObstacles["case"+i] = this.getCase(xRandom, yRandom);
            emptyBox = this.verifemptyBox(posObstacles["case"+i]);
            if(emptyBox == true) {
                this.saveCoordsObstacles(posObstacles,obstacles);
            } else {
                i--;
            }    
        }
    },

    saveCoordsObstacles(posObstacles,obstacles) {
        for(var cellule in posObstacles) {
            this.grid[posObstacles[cellule].x][posObstacles[cellule].y] = obstacles;
        }
    },

    positioningWeapons(nombre,Weapons) {
        var posWeapons = {}; //object
        var xRandom = 0;
        var yRandom = 0;
        var emptyBox = true;

        for(var i = 1 ; i <= nombre ; i++) {
            xRandom = Math.floor(Math.random() * (this.nbLines-1));
            yRandom = Math.floor(Math.random() * (this.nbCols-1));
            
            posWeapons["case"+i] = this.getCase(xRandom, yRandom);
            emptyBox = this.verifemptyBox(posWeapons["case"+i]);
            if(emptyBox == true) {
            this.saveCoordsObstacles(posWeapons,Weapons);
            } else {
                i--;
            }    
        }
    },

    saveCoordsWeapons(posWeapons,Weapons) {
        for(var cellule in posWeapons) {
            this.grid[posWeapons[cellule].x][posWeapons[cellule].y] = Weapons;
        }
    },
}

// initialisation of the map
game.initialisation();
game.showGrid();