如何将字符从1到3个正方形移动到网格上?

问题描述

我需要在js和jquery中制作回合制游戏。规则是:

  • 2个字符,4个武器和15个障碍物是在网格上随机生成的(使用HTML表格制作并循环生成
  • 角色不能并排
  • 考虑到与障碍物的碰撞,角色可以移动1到3个正方形 用鼠标选择每转1至3个框以在网格中前进。

我已经迈出了第一步,但是我在搬家方面很挣扎,所以我想知道是否有人可以提供帮助? 谢谢!

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();

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)