Question

我正在制作一个非常适合学校项目的游戏，它应该是这样的：用户点击旋转，3张卡片将显示元素如果所有3张牌都匹配，余额将增加50美元，并弹出警报“你赢了！” 否则，每次旋转将减去10美元不匹配。如果余额低于10美元，则弹出警报“您的价格低于10美元。

我正在尝试在提供的插槽和平衡更新后弹出警报，但警报始终会提前弹出。知道怎么解决吗？

let slotsContainer = document.getElementById('slots');
let balanceContainer = document.getElementById("balance-container");
let tries = document.getElementById("tries");

const INITIAL_AMOUNT = 1000;

let values = ['❤', '', ''];
let number_of_spinners = 3;
let spinCount = 0;
let slot_els = [];
let balance = INITIAL_AMOUNT;

balanceContainer.innerHTML = balance;

function render(result) {
  slotsContainer.innerHTML = '';

  for (var i = 0; i < number_of_spinners; i++) {
    let spinner = document.createElement('div');
    spinner.innerHTML = result[i];
    slotsContainer.appendChild(spinner);
    slot_els.push(spinner);
  }
}

render(['?', '?', '?'])

function getOneRandomNumber() {
  return Math.floor(Math.random() * values.length);
}

function spin_func() {
  let firstRandomValue = getOneRandomNumber();
  let secondRandomValue = getOneRandomNumber();
  let thirdRandomValue = getOneRandomNumber();

  render([values[firstRandomValue], values[secondRandomValue], values[thirdRandomValue]]);


  if ((firstRandomValue === secondRandomValue) && (secondRandomValue === thirdRandomValue)) {
    balance += 50;
    balanceContainer.innerHTML = balance;
    alert("you won!");
  } else {
    if (balance >= 10) {
      balance -= 10;
      balanceContainer.innerHTML = balance;
    } else {
      alert("You have less than $10");
    }
  }
  console.log('spin!!!');
}

let spin_button = document.getElementById('spin');
spin_button.onclick = spin_func

Answer 1

确定。这是因为JS代码运行得如此之快，它旋转但你没有看到它。

此代码

for (var i = 0; i < number_of_spinners; i++) {
    let spinner = document.createElement('div');
    spinner.innerHTML = result[i];
    slotsContainer.appendChild(spinner);
    slot_els.push(spinner);
}

需要使用延迟减速。延迟需要说每个动画1/4秒。然后代码将允许您查看它。之后警报会响起，它会按预期工作。

现在的问题是你需要使代码异步。

否则它仍然无效。

这是一个带有延迟的循环问题

How do I add a delay in a JavaScript loop?

当循环完成时，你需要将此调用作为警报（完成）代码，否则它仍然无效。

原则是：

运行一个触发动画的循环
按照动画速度说600ms
在循环完成时调用警报/结束代码

Answer 2

DOM以异步方式呈现，因此您需要异步触发警报尝试将警告（“xyz”）; 替换为 setTimeout（警告，0，“xyz”）; ，您正在使用它。
如果您希望播放器在触发警报之前有时间读取结果，只需增加以毫秒为单位的延迟，从0到2000（2秒）。

Answer 3

尝试此操作，强制渲染函数返回一个值，然后将后处理逻辑包装在条件块中。像这样：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Sample Slots</title>
<script type="text/javascript" language="javascript">

var slotsContainer = null;
var balanceContainer = null;
var tries = null;

var INITIAL_AMOUNT = 1000;

var values = ['❤', '', ''];
var number_of_spinners = 3;
var spinCount = 0;
var slot_els = [];
var balance = INITIAL_AMOUNT;

var spin_button = null;
var totalSpins=0;

var timeOutVal = null;
var spinning = false;

function render(result) 
{
  var retValue=false;

  slotsContainer.innerHTML = '';

  for (var i = 0; i < number_of_spinners; i++) {
    let spinner = document.createElement('div');
    spinner.innerHTML = result[i];
    slotsContainer.appendChild(spinner);
    slot_els.push(spinner);
  }

  retValue = true; // Set the value to be returned
  return retValue; // return the value
}


function getOneRandomNumber() {
  return Math.floor(Math.random() * values.length);
}

function spin_func() 
{
  if(spinning) return; // If already spinning, exit function

  spinning = true; // Set spinning flag

  var firstRandomValue = getOneRandomNumber();
  var secondRandomValue = getOneRandomNumber();
  var thirdRandomValue = getOneRandomNumber();

  // Changed here, now the render function is part of a conditional statement block
  if(render([values[firstRandomValue], values[secondRandomValue], values[thirdRandomValue]]))
  {
      totalSpins++; // Increment sucessful spin total
      tries.innerHTML = totalSpins.toString() + " total spin(s)";

      if ((firstRandomValue === secondRandomValue) && (secondRandomValue === thirdRandomValue)) 
      {
        balance += 50;
        balanceContainer.innerHTML = balance.toString() + " balance";
    timeOutVal = setTimeout(displayWinAlert,500); // Set delay for displaying 'Win' alert
      } 
      else 
      {
        if (balance >= 10) 
        {
          balance -= 10;
          balanceContainer.innerHTML = balance.toString() + " balance";
        } 
        else 
        {
          alert("You have less than $10");
        }

    spinning = false; // Set spinning flag
      }

      console.log('spin!!!');
 }

}


function displayWinAlert()
{
    alert("you won!");
    clearTimeout(timeOutVal);
    spinning = false;
}

</script>
</head>
<body>
<div id="slots" ></div><div id="balance-container" ></div><div id="tries" ></div><hr/>
<input type="button" id="spinBtn" name="spinBtn" value="Spin" />
<script type="text/javascript" language="javascript">
    // Initialize Global variables
    slotsContainer = document.getElementById('slots');
    balanceContainer = document.getElementById("balance-container");
    tries = document.getElementById("tries");

    spin_button = document.getElementById('spinBtn');
    spin_button.onclick = spin_func

    balanceContainer.innerHTML = balance;   

    render(['?', '?', '?']);
</script>
</body>
</html>

如何在旋转结果后弹出警报？

3 个答案: