javascript - 随机将Twos对象一起传递到一组数组中(Passing twos Object together into a set of arrays at random)

Question

I am trying to output a random Object from a Constructor function with it's own image with belongs with each object.

(我试图从构造函数输出一个随机对象，它带有自己的图像，并且每个对象都属于它。)

So in the const of players array holds 2 Players objects from a constructor function .

(所以在玩家数组的const中，包含一个构造函数的2个Players对象。)

The parameters of the constructor function are (id, name,src, life).

(构造函数的参数为??（id，name，src，life）。)

I would like to output a Player object at random to game.grid game.grid is a 10x10 set of array to mimic a game board.

(我想将一个Player对象随机输出到game.grid game.grid是一组10x10的数组，用于模拟游戏板。)

I have managed to do this so far but I would also like each Player object to have it's own Image file which gets passed through together the Player object too so that it can be displayed through HTML on the frontend to the user.

(到目前为止，我已经设法做到了这一点，但我也希望每个Player对象都具有它自己的Image文件，该文件也一起通过Player对象传递，以便可以通过HTML在前端显示给用户。)

Example

new Player(1, "Alpha Centri', '/assets/icons/player/player1.png", 100)
// Gets passed to game.grid together with //
let playerIcon1 = new Image(50, 50) 
playerIcon1.src = '/assets/icons/player/player1.png'

// This will display an image to user and as well as placing both objects 
into an array too//



   function Grid(row, cell) {

    this.grid = []
    this.row = row
    this.cell = cell
    this.newPrototype = (" ")

    for (let i = 0; i < row; i++) {
     this.grid.push([])

     for (let j = 0; j < cell; j++) {
      this.grid[i].push([])  
     };
    };

   }


   Grid.prototype.display = function () {

    const grid = document.getElementById("grid")

    for (let i = 0; i < this.row; i++) { 
     for (let j = 0; j < this.cell; j++) {  
      const cell = document.createElement("div");
      grid.appendChild(cell) 
      cell.setAttribute('id', "grid-" + i + "_" + j)
      cell.setAttribute("class", "grid-item cell")

     }
    }

   }

   class Player {
    constructor(id, name, type, src, life) {

      this.id = id;
      this.name = name;
      this.type = type;
      this.src = src;
      this.life = life;
    }
   }


   //GRID SECTION//
   const game = new Grid(10, 10) // this makes the grids size//


   // CREATING THE GAMEBOARD USIGN CANVAS //
   window.onload = function () {

     // this is the images canavas //
     let canvas = document.getElementById('game-container')
     canvas.getContext('2d'); // here you reference the context of the canvas//
     let gameGridImage = new Image();
     gameGridImage.onload = function () {

       canvas.src('/assets/images/tiles.png') // set in CSS //
     }


   };


           // PLAYER SECTION - BACKEND - //
           // (id, name,src, life) //

           const players = [
             new Player(1, "Alpha Centri', '/assets/icons/player/player1.png", 100),
             new Player(2, "Omega Moon Pie', '/assets/icons/player/player2.png", 100)
           ];


           // create PLAYER image objects and set the dimentions//
           let playerIcon1 = new Image(50, 50)
           playerIcon1.src = '/assets/icons/player/player1.png'

           let playerIcon2 = new Image(50, 50)
           playerIcon2.src = '/assets/icons/player/player2.png'


           // Random placement of players (BACKEND)

           players.forEach(function (player) {

             let randPlayer1 = Math.floor(Math.random() * game.grid.length)
             let randPlayer2 = Math.floor(Math.random() * game.grid[randPlayer1].length)
             // use the id of the item inside the array to match it up with the correct image id and src file //

             game.grid[randPlayer1][randPlayer2].push(player);

           });

  ask by pablothefreelancer translate from so

Answer 1

等待大神答复