问题描述
每点击一个数字，就会出现一个变量，并且三个数字都相等，就是成功。 每个数字都变成一个从 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]
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>解决方法
你该怎么办？你应该阅读你的控制台日志。
你在哪里；
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 *
.innerHTML 将定位元素内的 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>