javascript - 递归循环检查条件是否良好，或重试

问题描述

我必须在画布上生成几个对象。问题是，如果我的条件（IF 语句）有效，如果条件不满足，它就不会再次循环。所以我有时只有 1 个玩家而不是 2 个，等等。

设置棋子的函数是 setPiece()，根据对象（障碍物、武器、玩家）具有不同的条件。每个对象都有自己的调用 setPiece 的函数：setObstacles、setWeapons、setPlayers。

我已经尝试在 "else" 之后调用这些函数，所以再次调用 setPiece 循环。但这会导致控制台中的堆栈错误，循环太多。

我也尝试了一个While 循环，但没有成功实现它，所以它也是一个无限循环。

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

  <title>Lava Temple</title>

<style>
* {
  padding: 0;
  border: 0;
}

body{
  background-color: #181818;
}

#board {
  display: block;
  background-color: white;
  margin: 0 auto;
  margin-top: 100px;
}
</style>

</head>
<body>
    <canvas id="board" width="800" height="800"></canvas>

<script>

// BOARD OBJECT

function Board(width, height) {
    this.width = width;
    this.height = height;
    this.chartBoard = [];

    // Création du plateau logique
    for (var i = 0; i < this.width; i++) {
        const row = [];
        this.chartBoard.push(row);
        for (var j = 0; j < this.height; j++) {
            const col = {};
            row.push(col);
        }
    }
}

let board = new Board(10, 10);
console.log(board);

const ctx = $('#board').get(0).getContext('2d');

Board.prototype.drawBoard = function () {
    for (var i = 0; i < this.width; i++) {
        for (var j = 0; j < this.height; j++) {
            ctx.beginPath();
            ctx.strokeStyle = 'black';
            ctx.strokeRect(j * 64, i * 64, 64, 64);
            ctx.closePath();
        }
    }
};
board.drawBoard();



// OBJECTS OF THE GAME

function Obstacle(name, sprite) {
    this.name = name;
    this.sprite = sprite;
}
const lava = new Obstacle("Lave", "assets/lave.png");
const lava1 = new Obstacle("Lave1", "assets/lave.png");
const lava2 = new Obstacle("Lave2", "assets/lave.png");
const lava3 = new Obstacle("Lave3", "assets/lave.png");
const lava4 = new Obstacle("Lave4", "assets/lave.png");
const lava5 = new Obstacle("Lave5", "assets/lave.png");
const lava6 = new Obstacle("Lave6", "assets/lave.png");
const lava7 = new Obstacle("Lave7", "assets/lave.png");
const lava8 = new Obstacle("Lave8", "assets/lave.png");
const lava9 = new Obstacle("Lave9", "assets/lave.png");
const lavaArray = [lava, lava1, lava2, lava3, lava4, lava5, lava6, lava7, lava8, lava9];


function Weapon(name, sprite, damage) {
    this.name = name;
    this.sprite = sprite;
    this.damage = damage;
}
const dagger = new Weapon("Dague", "assets/dague.png", 5);
const sword = new Weapon("Epée", "assets/epee.png", 10);
const axe = new Weapon("Hache", "assets/hache.png", 15);
const flail = new Weapon("Fléau", "assets/fleau.png", 20);
const weaponArray = [dagger, sword, axe, flail];


function Player(name, sprite, life) {
    this.name = name;
    this.sprite = sprite;
    this.life = life;
}
const player1 = new Player("Joueur 1", "assets/joueur1.png", 100);
const player2 = new Player("Joueur 2", "assets/joueur2.png", 100);
const playerArray = [player1, player2];



// INIT OF THE GAME (code about my question)

Board.prototype.setPiece = function (piece) {

    let randomX = Math.floor(Math.random() * board.width);
    let randomY = Math.floor(Math.random() * board.height);

    let drawX = randomX * 64;
    let drawY = randomY * 64;


    if (randomX >= this.width || randomY >= this.height) {
        throw new Error('Pièce hors limite');
    }

    if (piece instanceof Obstacle) {

        if (!(this.chartBoard[randomY][randomX] instanceof Obstacle)) {
            this.chartBoard[randomY][randomX] = piece;
              ctx.fillRect(drawX, drawY,64,64);
        }

    } else if (piece instanceof Weapon) {

        if (!(this.chartBoard[randomY][randomX] instanceof Obstacle) && (!(this.chartBoard[randomY][randomX] instanceof Weapon))) {
            this.chartBoard[randomY][randomX] = piece;
            ctx.fillStyle = "red";
            ctx.fillRect(drawX, drawY,64,64);
        }

    } else if (piece instanceof Player) {

            if  (!(this.chartBoard[randomY][randomX] instanceof Obstacle) &&
                (!(this.chartBoard[randomY][randomX] instanceof Weapon) &&
                (!(this.chartBoard[randomY][randomX] instanceof Player) &&
                ((!(this.chartBoard[randomY][randomX + 1] instanceof Player)) || (typeof this.chartBoard[randomY][randomX + 1] === undefined)) &&
                ((!(this.chartBoard[randomY][randomX - 1] instanceof Player)) || (typeof this.chartBoard[randomY][randomX - 1] === undefined)) &&
                ((!(this.chartBoard[randomY + 1][randomX] instanceof Player)) || (typeof this.chartBoard[randomY + 1][randomX] === undefined)) &&
                ((!(this.chartBoard[randomY - 1][randomX] instanceof Player)) || (typeof this.chartBoard[randomY - 1][randomX] === undefined))))) {

                this.chartBoard[randomY][randomX] = piece;
                ctx.fillStyle = "blue";
                ctx.fillRect(drawX, drawY,64,64);
            }

    } else {
        throw new Error('Pièce non valide');
    }
};


Board.prototype.setObstacles = function () {
    for (let lava of lavaArray) {

        const obstacle = board.setPiece(lava);
    }
};
board.setObstacles();


Board.prototype.setWeapons = function () {
    let numWeapons = 4;
    let randomWeapon;
    let spawnWeapon;

    for (let i = 0; i < numWeapons; i++) {
        randomWeapon = Math.floor(Math.random() * weaponArray.length);
        spawnWeapon = board.setPiece(weaponArray[randomWeapon]);
    }
};
board.setWeapons();


Board.prototype.setPlayers = function () {

    for (let player of playerArray) {

        const spawnPlayer = board.setPiece(player);
    }
};
board.setPlayers();

</script>

</body>
</html>

实际结果：有时一切都很好，但有两个问题： - 一块可能没有放在板上（画布）。- 播放器对象出错，因为 IF 条件（随机 + 或 - x / y）试图检查棋盘长度之外，所以我得到一个错误未定义。不知道怎么解决。

预期：了解如何在此画布上生成对象的动态生成，并在多个条件下重复循环。还要学习如何实现画布的限制，以免出现未定义的错误。

标签： javascriptloopsobjectrecursioncanvas

javascript - 递归循环检查条件是否良好，或重试

问题描述

解决方案

推荐阅读