Цикл рекурсии, чтобы проверить, если условия хороши, или попробуйте снова - PullRequest
0 голосов
/ 24 января 2019

Мне нужно создать несколько объектов на холсте. Проблема заключается в том, что если мои условия (операторы 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>

Фактические результаты: Иногда все работает хорошо, но есть 2 проблемы: - Часть не может быть установлена ​​на доске (холст). - Произошла ошибка с объектом player, потому что условие IF (random + или - x / y) пытается проверить за пределами длины доски, поэтому я получаю ошибку Undefined. Не знаю, как решить.

Ожидаемое: Понимать, как генерировать динамическое создание объектов на этом холсте, и повторять цикл с несколькими условиями. Также узнайте, как реализовать ограничения canvas, чтобы не было неопределенной ошибки.

1 Ответ

0 голосов
/ 24 января 2019

Я думаю, что проблема в том, чтобы выйти за пределы этих случайных приращений и приращений.Если вы используете console.log (randomY) сразу после else if (piece instanceof Player) { ..., то кажется, что в этих сценариях вы получаете только одного игрока, только когда randomY равно 0 или 9.

Вы можете попробовать что-то сделать по этим правилам сразу послеelse if (piece instanceof Player) { ... и это должно решить проблему.

if (randomY === 0){
  randomY = randomY+1
}

if (randomY === 9){
  randomY = randomY-1
}

Я не уверен, что это все еще будет считаться "случайным".Тем не менее, плитки все еще могут брать края, поэтому механики все еще чувствуют себя «случайными».

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...