Question

我在这里遇到问题，基本上我希望我的骰子游戏显示3行。第一行说明了我得到的模具数量第二行添加了我从第一个模具得到的数字和第二个模具我滚动等等...（基本上每次我点击按钮）。第三行只计算我掷骰子的次数。

我的问题是，在我的第二行，我不确定每次点击按钮时如何将我当前的掷骰子加起来。

var count=0;
function swap_pic()
{
var x = Math.floor(Math.random()*6)+1;
var pic = document.getElementById("dice");
var xx = x+x;
count++;
document.getElementById("result").innerHTML = "You got " + x;
document.getElementById("result").innerHTML += "<br>Your score is: " + xx;
document.getElementById("result").innerHTML += "<br>Number of tries = " + count;
    if (count==5)
    {
    document.getElementById("result").innerHTML += "<br><span style='color:red;font-weight:bold;font-size:14px;'>Game Over!</span>";
    count = 0;
    document.getElementById('button').setAttribute("style","visibility:hidden");
    }
    if (x==1)
    {
    pic.src = "images/die1.png";
    }
    else if (x==2)
    {
    pic.src = "images/die2.png";
    }
    else if (x==3)
    {
    pic.src = "images/die3.png";
    }
    else if (x==4)
    {
    pic.src = "images/die4.png";
    }
    else if (x==5)
    {
    pic.src = "images/die5.png";
    }
    else if (x==6)
    {
    pic.src = "images/die6.png";
    }
}

问题在于这一行

document.getElementById("result").innerHTML += "<br>Your score is: " + xx;

谢谢你的帮助！

Answer 1

应避免使用innerHTML的多个连接，并尽可能重复else if。试试这个：

var count = 0;
var sum = 0;

function swap_pic() {
    var x = Math.floor(Math.random() * 6) + 1;
    var pic = document.getElementById("dice");
    sum += x;
    count++;
    var html = "You got " + x;
    html += "<br>Your score is: " + sum;
    html += "<br>Number of tries = " + count;
    if (count == 5) {
        html += "<br><span style='color:red;font-weight:bold;font-size:14px;'>Game Over!</span>";
        count = 0;
        document.getElementById('button').setAttribute("style", "visibility:hidden");
    }
    document.getElementById("result").innerHTML = html;
    pic.src = "images/die" + x +".png";
}

Answer 2

尝试使用尺寸

//create these as global variables
var totalScore;
var rollCount;
var lastRoll;
var image;
var text;
var button;

function reload(){
    totalScore  = 0;
    rollCount   = 0;
    lastRoll    = 0;
    image       = document.getElementById('dice'); //store image element
    text        = document.getElementById('result'); //store result element
    button      = document.getElementById('button'); //store button element
    button.style.visibility = visible; //restore button visibility
}

function roll(){
    lastRoll = Math.floor(Math.random()*6)+1; //generate random number
    rollCount++; //increase our roll counter
    totalScore+= lastRoll; //add new roll to score
    image.src = "images/die" +lastRoll+ ".png"; //update dice image

    text.innerHTML  = "You got " // generate result string
                    + lastRoll
                    + "<br>Your score is: " 
                    + totalScore
                    + "<br>Number of tries = " 
                    + rollCount;

    if(rollCount >= 5){ //end game parameter!!
        text.innerHTML  += "<br><span style='color:red;font-weight:bold;font-size:14px;'>Game Over!</span>"; //add game over text
        button.style.visibility = 'hidden';//hide button
        //reload();  //uncomment to reset game now?
    }
}

window.onload = reload; //set up on page load

使用前一个变量添加当前变量

2 个答案: