时间戳

首页 > 解决方案 > 传入一个新数组并显示一条消息 - 骰子首先完成

javascript - 传入一个新数组并显示一条消息 - 骰子首先完成

问题描述

我创建了两个从 1 到 11 个插槽的骰子。我想显示结果。如果红色获胜（例如，我想向我显示一条消息 R 获胜，或者如果 B 先结束则 B 获胜）。另外，我想显示结果在一个新表中。我正在尝试这样做，但我做不到。Javascript代码是这样的。

 // basic game settings
    const gameSettings = {
      length: 12,
      die: {
        min: 1,
        max: 8,
      }
    }
    
    // define "actors"
    let gameItems = [{
        name: "R",
        bgColor: "red",
        color: "white",
        position: 1,
      },
      {
        name: "B",
        bgColor: "black",
        color: "white",
        position: 1,
      },
    ]
    
    // 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 marker = "-"
        let background = "white"
        let color = "black"
    
        if (gameItem.position - 1 === i) {
          marker = gameItem.name
          background = gameItem.bgColor
          color = gameItem.color
        }
    
        html += `<div class="cell" style="background: ${ background }; color: ${ color }">${ marker }</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),
      }))
      updateRows(container, gameItems, length)
    })
    
    // reset action
    btnResetBoard.addEventListener('click', function() {
      const {
        length
      } = gameSettings
      gameItems = gameItems.map(item => ({
        ...item,
        position: 1,
      }))
      updateRows(container, gameItems, length)
    })

html,css的代码是这样的

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

.cell {
  box-sizing: border-box;
  border: 1px solid black;
  display: flex;
  justify-content: center;
}
<div id="container"></div>
<hr />
<button id="rollTheDice">ROLL THE DICE</button><br />
<button id="resetBoard">RESET BOARD</button>

标签： javascripthtmlcss

解决方案

它非常简单的解决方案，但您可以对其进行处理并扩展到真正拥有您想要的东西。

我会这样做，所以在每次点击roll the dice按钮时对每个玩家的得分进行一些检查，当然，毕竟随机化是为了防止需要再次点击来获得结果。

      let winnerScore = 0;
      let winner = '';
      
      gameItems.forEach(item => {
        if (item.position >= 11) {
          winner = item.name;
          winnerScore = item.position;
        }
      });
      
      if (winnerScore >= 11) {
        console.log('[winner_result]', winner, ' wins game!');
      }

当然console.log，您可以轻松地将其扩展为在屏幕上显示分数或真正想要的内容，而不是使用它来检测某人获胜。我认为最好的方法是在循环检查中真正从“actor”对象中获取所有属性。此解决方案将真正减少您需要执行的循环数。

要真正显示结果，您必须像这样添加函数或将其输出到 html div 元素中

      if (winnerScore >= 11) {
        console.log('[winner_result]', winner, ' wins game!');
        document.getElementById('results').innerHTML = `${winner} wins game!`;
      }

要让它真正工作，您还需要在 html 结构 div 中添加 id 为“results”或其他任何东西，但您必须记住在 js 脚本上也交换 ip

希望它能回答你的需求。

下面链接到我正在研究此解决方案的 codepen： https ://codepen.io/snoh666/pen/jOMamMy

推荐阅读