Throw a dice(random numbers) and move in a table

Question

the html code is this

<input type="button" value="Throw the Dice" onmouseup="throwTwoDice(6,6)"> 
            <div id="dice1" style="padding:10px;font-style:bold;font-size:xx-large">0 - 0</div>
        </div> 

the javascript code is this

function dice(sides){
        var rand = Math.floor(Math.random()*sides) + 1;
        return rand;
    };


function throwTwoDice(dice1Sides, dice2Sides){
        var rand1 = dice(dice1Sides);
        var rand2 = dice(dice2Sides);
        document.getElementById('dice1').innerHTML = rand1 + ' - ' + rand2;
        return true;
    };

I have to randoms numbers rand1 and rand2. I want to be rand1 = x1 and rand2 = x2. I have a table with 2 lines and 12 columns,the line 1 is x1 and line 2 is x2. I have images on [1,1] and in [12,2]. The code is this of javascript

let colors={black:"https://media2.giphy.com/media/htSM5MPkwlKaSYE7yN/giphy.gif?cid=ecf05e47pftg0oul854g6z0mypnv4564axlqcaxsrlttxl5o&rid=giphy.gif"
,red:"https://media3.giphy.com/media/fxhEoiBJo7NNXc7ozy/giphy.gif?cid=ecf05e474lq8uatdu2wyyun0cpf096zqy78hsopz0pxzvete&rid=giphy.gif"}

let items = [{
    "x": 1,
    "y": 1,
    "piece": "p",
    "piece_color": "black",
    "b_color": "black"
  },
  {
    "x": 12,
    "y": 2,
    "piece": "p",
    "piece_color": "red",
    "b_color": "red"
  }
];
$(function() {
  draw_empty_board();
  fill_board();
});





function fill_board() {
  fill_board_by_data(items);
}

function fill_board_by_data(data) {
    
    
    
    for (var i = 0; i < data.length; i++) {
    var o = data[i];
    var id = '#square_' + o.x + '_' + o.y;
    var c = (o.piece != null) ? o.piece_color : '';
    var im = (o.piece != null) ? '<img class="piece" src="' + colors[c] + '.png">' : '';
    var htmls = ''; //delcare this
    //check color if black 14 or 15(red)
    var count = (o.piece_color == "black") && (o.piece != null) ? 15 : 15
    //loop till count
    for (var j = 0; j < count; j++) {
      //append img
      htmls += '<img class="piece" src="' + colors[c] + '.png">';
    }
    //finally add img inside td
    $(id).addClass(o.b_color + '_square').html(htmls)


  }
  
  
  
  
  
  
  
    var t = '<table id="chess_table">';
        for (var i = rowCount; i > 0; i--) {

            t += '<tr>';
            t += '<td class="line_label">' + i + '</td>';
            for (var j = 1; j < columnCount; j++) {


                t += '<td class="chess_square" id="square_' + j + '_' + i + '">' + j + ',' + i + '</td>';

            }
            t += '</tr>';
        }
        t += '<tr><td class="column_label line_label"></td>';
        for (var j = 1; j < 13; j++) {

            t += '<td class="column_label">' + j + '</td>';
        }
        t += '</tr>';
        t += '</table>';
  
  
  
  
  
  
  
  
  
  
  
  
}
  

I want when the random numbers come example 3 - 6 . Then the first,the (3 in that case) will be position [3,1].Then 1image from black will go to that slot. Also,about the (6 in that case) will be the position [6,2] and one of the red image will go on that slot. As a result,to sum up 3 is the x1 and 6 is the x2.More detailed x1 line is have 1 and x2 line has the 2.So numbers will be like this ( ,1) ( ,1) etc and for the x2 ( ,x2) ( ,x2) etc.I replace the empty place with a random number.I am trying so far to make my images moved or to do that ,but I losing the images or the values are not going well. hint: black images are moving only in the x1 line. Red images move only in x2 line.

Answer 1

What do you think about this:

// basic game settings
const gameSettings = {
  length: 12,
  die: {
    min: 1,
    max: 8,
  }
}

// define "actors"
let gameItems = [{
    name: "R",
    bgColor: "red",
    color: "white",
    position: 11,
    direction: -1,
    startingPosition: 11,
    imgUrl: `https://picsum.photos/seed/red/40/20`,
  },
  {
    name: "B",
    bgColor: "black",
    color: "white",
    position: 0,
    direction: 1,
    startingPosition: 0,
    imgUrl: `https://picsum.photos/seed/black/40/20`,
  },
]

// the random function
// source: https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript
function randomIntFromInterval(min, max) { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// -----------------

// creating a row & cells
const rowHtml = (gameItem, cols) => {
  let html = `<div class="row" style="grid-template-columns: repeat(${ cols }, 1fr)">`
  for (let i = 0; i < cols; i++) {
    let content = "-"
    let background = "white"
    let color = "black"

    if (gameItem.position === i) {
      marker = gameItem.name
      background = gameItem.bgColor
      color = gameItem.color
      content = `<img src="${ gameItem.imgUrl }" />`
    }

    html += `<div class="cell" style="background: ${ background }; color: ${ color }">${ content }</div>`
  }
  html += `</div>`
  return html
}

// updating rows
const updateRows = (container, gameItems, cols) => {
  let html = ''
  for (let i = 0; i < gameItems.length; i++) {
    html += rowHtml(gameItems[i], cols)
  }
  container.innerHTML = html
}

// setting container
const container = document.getElementById('container')

// set up board for first time
updateRows(container, gameItems, gameSettings.length)

// -----------------
// action buttons
const btnRoll = document.getElementById("rollTheDice")
const btnResetBoard = document.getElementById("resetBoard")

// roll action
btnRoll.addEventListener('click', function() {
  const {
    length,
    die: {
      min
    },
    die: {
      max
    }
  } = gameSettings

  gameItems = gameItems.map(item => ({
    ...item,
    position: item.position + (randomIntFromInterval(min, max) * item.direction),
  }))
  updateRows(container, gameItems, length)
})

// reset action
btnResetBoard.addEventListener('click', function() {
  const {
    length
  } = gameSettings
  gameItems = gameItems.map(item => ({
    ...item,
    position: item.startingPosition,
  }))
  updateRows(container, gameItems, length)
})

.row {
  display: grid;
  grid-template-rows: 1fr;
}

.cell {
  box-sizing: border-box;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
}

.cell img {
  max-width: 100%;
  min-width: 100%;
}

<div id="container"></div>
<hr />
<button id="rollTheDice">ROLL THE DICE</button><br />
<button id="resetBoard">RESET BOARD</button>

In this snippet, you can set the number of players, the length of the board, the range of the dice (min-max), and some settings of the "players".

EDIT

Added three new attributes to the gameItems:

• direction controls the direction of steps of a gameItem (1 is left to right, -1 is right to left
• startingPosition sets where a gameItem starts after resetting the board
• imgUrl is the URL of an image that is shown as the gameItem on the board