0

每点击一个数字，就会出现一个变量，并且三个数字都相等，即为成功。每个数字变成一个从 0 到 2 的随机数字。如果每个人都得到相同的数字，他们就赢了。即使按数字，画面也没有变化。我必须使用安排来解决问题。我尝试了很多方法，但它不起作用。有没有不修改 gen(event) 的方法？

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>게임</title>
    <style>
        table {
            border : 1px solid violet;
            border-collapse : collapse; 
        }
        td {
            width : 50px;
            height : 50px;
            padding : 0px;
            font : italic 50px consolas, sans-serif;
            color : blue;
            text-align : center;
            background : linen;
        }
        div#msg {
            font : italic 18px consolas, sans-serif;
            color : magenta;
            margin-top : 10px;
        }
        </style>
    <script>
        // to do
        var gameon = true; 
        var gameArray = [0, 0, 0]
        function gen(event){
            if(gameon == false) {
                return;
            }
            // generation 0~2 
            // to do
            else if(gameon == true){

                var rnum1 = Math.floor(Math.random()*3);
                document.getElementById("first") = rnum1;
                gameArray[0] = rnum1;

                var rnum2 = Math.floor(Math.random()*3);
                document.getElementById("second") = rnum2;
                gameArray[1] = rnum2;

                var rnum3 = Math.floor(Math.random()*3);
                document.getElementById("third") = rnum3;
                gameArray[2] = rnum3;

                if(gameArray[0] == gameArray[1] && gameArray[1] == gameArray[2]){
                    document.getElementById("msg").innerHTML = "Success(click here to do again)";
                }

                else {
                document.getElementById("msg").innerHTML = "fail(click here to do again)";
                }
            }
        }
        function reset(){
            for(var i=0; gameArray.length; i++)
                gameArray[i] = 0;

            document.getElementById("first").innerHTML = 0;
            document.getElementById("second").innerHTML = 0;
            document.getElementById("third").innerHTML = 0;
            gameon = true;
        }
    </script>
</head>
<body>
    <h3>게임</h3>
    <hr>
    <table>
    <tr>
    <td id="first" onclick="gen(event)">0</td>
    <td id="second" onclick="gen(event)">0</td>
    <td id="third" onclick="gen(event)">0</td>
    </tr>
    </table>
    <div id="msg" onclick="reset()"></div>
</body>
</html>

这是正常工作的代码。它必须像这样制作。

<!DOCTYPE html>
<html>
    <head>
        <title>겜블링 게임</title>
    </head>
    <style>
        #box {
            background-color : lightblue;
            width : 200px;
            height : 150px;
        }
        span {
            font-size : 100px;
            margin-left : 5px;
        }
    </style>
    <body>
        <script>
            function first_span() {
                let first = document.getElementById("first");
                let num = Math.floor(Math.random()*3);
                first.innerHTML = num;
            }
            function second_span() {
                let second = document.getElementById("second");
                let num = Math.floor(Math.random() * 3);
                second.innerHTML = num;
            }
            function third_span() {
                let third = document.getElementById("third");
                let num = Math.floor(Math.random() * 3);
                third.innerHTML = num;

                if(first.innerHTML == second.innerHTML && second.innerHTML == third.innerHTML) {
                    let rs1 = document.getElementById("result");
                    rs1.innerHTML = "Success(click here to do again)";
                }
                else {
                    let rs2 = document.getElementById("result");
                    rs2.innerHTML = "fail(click here to do again)";
                }
            }
            function again() {
                document.getElementById("result").innerHTML = " ";
                document.getElementById("first").innerHTML = 0;
                document.getElementById("second").innerHTML = 0;
                document.getElementById("third").innerHTML = 0;
            }
        </script>
        <h3>겜블링 게임</h3>
        <p>각 숫자를 클릭하면 0에서 2 사이의 난수로 바뀝니다.
            모두 같은 수가 나오면 승리합니다.
        </p>
        <hr>
        <div id = "box">
            <span id="first" onclick = "first_span()">0</span>
            <span id="second" onclick = "second_span()">0</span>
            <span id="third" onclick = "third_span()">0</span>
        </div>
        <div id = "result" onclick = "again()"></div>
    </body>
</html>

4

2 回答 2

1

你该怎么办？您应该阅读控制台日志。

你在哪里；

document.getElementById("first") = rnum1;

document.getElementById("second") = rnum2;

document.getElementById("third") = rnum3;

做这些；

document.getElementById("first").innerHTML = rnum1;

document.getElementById("second").innerHTML = rnum2;

document.getElementById("third").innerHTML = rnum3;

您要定位 NUMBER，而不是元素。您无法使用 HTML 进行数学运算。基本上你拥有它的方式是你要求你的数学做;

2 * <ahref="blahblahblah">

将.innerHTML定位元素内的 0，如果这有意义吗？

于 2021-05-19T23:58:04.537 回答
0

你可以做这样的事情......

const 
  gameTable = document.querySelector('table#game-table')
, gameTD    = gameTable.querySelectorAll('td')
, message   = document.getElementById('msg')
, randomVal =_=> Math.floor(Math.random() * gameTD.length)
, Played    =g=> ![...g].some(x=>x.classList.contains('play'))
, Success   =g=> [...g].reduceRight((test,{textContent},i,a)=>
    i ? (test && a[0].textContent === textContent) : test, true)
  ;
gameTable.onclick = ({target}) =>
  {
  if (!target.matches('td.play')) return
  target.textContent = randomVal()
  target.classList.remove('play')

  if ( Played(gameTD))
    {
    let win = Success(gameTD)
    gameTable.className = win ? 'played-win' : 'played-lost'

    message.innerHTML = win
      ? 'Success  :) <small>(click here to do again)</small>'
      : 'fail  :/  <small>(click here to do again)</small>'
    }
  }
message.onclick =_=>
  {
  gameTD.forEach(td=>
    {
    td.textContent = '-'
    td.classList.add('play')  
    })
  message.textContent = ''
  gameTable.className = ''
  }
table {
  border          : 1px solid violet;
  border-collapse : collapse;
  }
table.played-lost td {
  background      : orangered;
  }
table.played-win td {
  background      : goldenrod;
  }
td {
  width           : 50px;
  height          : 50px;
  padding         : 0px;
  font            : italic 50px consolas, sans-serif;
  color           : blue;
  text-align      : center;
  background      : linen;
  }
td.play:hover {
  background      : yellowgreen;
  cursor          : pointer;
  }
div#msg {
  font            : italic 18px consolas, sans-serif;
  color           : magenta;
  margin-top      : 10px;
  cursor          : pointer;
  }
<h3>겜블링 게임</h3>
<p>각 숫자를 클릭하면 0에서 2 사이의 난수로 바뀝니다.<br>
    모두 같은 수가 나오면 승리합니다.</p>
<hr>
<table id="game-table">
  <tr>
    <td class="play">-</td>
    <td class="play">-</td>
    <td class="play">-</td>
  </tr>
</table>
<div id="msg" onclick="reset()"></div>

于 2021-05-26T12:20:02.270 回答