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