在Javascript骰子滚轴游戏中为骰子分配数字

时间：2016-08-19 05:28:04

标签： javascript random dice

我目前正在制作骰子滚轮。我试图解决的问题是我的骰子本身就是图像元素，我想为它们分配数字，以便它们显示一条消息，显示所述掷骰子的数值。例如，如果在第一个骰子值中滚动的图像是三，当我点击我的＆＃34;检查得分＆＃34;按钮，我希望警报显示＆＃34; 3＆＃34;在第一条消息中。我现在的问题是警报显示[对象HTMLImageElement]。

我希望看看我的代码会更好地解释一下。 我的完整代码是在第一次剪切之下，仅供参考，我相信我应该修改的具体区域将在之后。

<!doctype html>

<title>Yahtzee Dice Roller</title>
<link rel="stylesheet" href="styles.css">

<!-- HIDDEN HTML IMAGES USED TO STORE THE SIX DIE ROLL IMAGES -->
<img id="srcImage1" class="srcImageClass" src="images/die1.jpg">
<img id="srcImage2" class="srcImageClass" src="images/die2.jpg">
<img id="srcImage3" class="srcImageClass" src="images/die3.jpg">
<img id="srcImage4" class="srcImageClass" src="images/die4.jpg">
<img id="srcImage5" class="srcImageClass" src="images/die5.jpg">
<img id="srcImage6" class="srcImageClass" src="images/die6.jpg">

<!-- THIS IS THE GAME BOARD AS SEEN ON THE BROWSER -->
<div id="stage">

    <img id="gameDie1" class="gameDieClass" src="images/die1.jpg">
    <img id="gameDie2" class="gameDieClass" src="images/die1.jpg">
    <img id="gameDie3" class="gameDieClass" src="images/die1.jpg">
    <img id="gameDie4" class="gameDieClass" src="images/die1.jpg">
    <img id="gameDie5" class="gameDieClass" src="images/die1.jpg">

    <span id="spanDie1" class="spanDieClass">HOLD</span>
    <span id="spanDie2" class="spanDieClass">HOLD</span>
    <span id="spanDie3" class="spanDieClass">HOLD</span>
    <span id="spanDie4" class="spanDieClass">HOLD</span>
    <span id="spanDie5" class="spanDieClass">HOLD</span>

    <button id="rollButton">Roll Dice</button>

    <button id = "reset">Reset Dice</button>

    <button id = "score">Check Score</button>

</div>

<script>

// ***********************************************************
// GLOBAL VARIABLES TO BE USED THROUGHOUT THE GAME
// ***********************************************************

// declare an array variable to store each of the html gameDie img tags
var gameDie = [];
gameDie[1] = document.querySelector("#gameDie1");
gameDie[2] = document.querySelector("#gameDie2");
gameDie[3] = document.querySelector("#gameDie3");
gameDie[4] = document.querySelector("#gameDie4");
gameDie[5] = document.querySelector("#gameDie5");

// declare an array variable to store each of the html span (freeze dice) tags
var spanDie = [];
spanDie[1] = document.querySelector("#spanDie1");
spanDie[2] = document.querySelector("#spanDie2");
spanDie[3] = document.querySelector("#spanDie3");
spanDie[4] = document.querySelector("#spanDie4");
spanDie[5] = document.querySelector("#spanDie5");



// declare an array to keep track of the "frozen" state of each die
var gameDieHold = [];
gameDieHold[1] = false;
gameDieHold[2] = false;
gameDieHold[3] = false;
gameDieHold[4] = false;
gameDieHold[5] = false;



var rollNum = 0;
var canRoll = true;


gameDie[1].addEventListener("click", gameDieClick.bind(this,1), false);
gameDie[2].addEventListener("click", gameDieClick.bind(this,2), false);
gameDie[3].addEventListener("click", gameDieClick.bind(this,3), false);
gameDie[4].addEventListener("click", gameDieClick.bind(this,4), false);
gameDie[5].addEventListener("click", gameDieClick.bind(this,5), false);


// declare an array variable to store each of the hidden html srcImage img tags
var srcImage = [];
srcImage[1] = document.querySelector("#srcImage1");
srcImage[2] = document.querySelector("#srcImage2");
srcImage[3] = document.querySelector("#srcImage3");
srcImage[4] = document.querySelector("#srcImage4");
srcImage[5] = document.querySelector("#srcImage5");
srcImage[6] = document.querySelector("#srcImage6");

// Grab the "roll dice" button and attach a "click" function to it
var rollButton = document.querySelector("#rollButton");
rollButton.addEventListener("click", rollButtonClick, false);

var reset = document.querySelector("#reset");
reset.addEventListener("click", resetButton, false);

var score = document.querySelector("#score");
score.addEventListener("click", scoreButtonClick, false);


renderGameDieSpans();

// ***********************************************************
// FUNCTIONS USED BY THE GAME
// ***********************************************************

function gameDieClick(zNum) {
    if (canRoll === true) {
    gameDieHold[zNum] =! gameDieHold[zNum];
    renderGameDieSpans();
    }
}


function renderGameDieSpans() {
    // loop through all of the dice, and only show the hold span if the die is set to HOLD
    for (var i=1; i<=5; i++) {
        if (gameDieHold[i]) {
            spanDie[i].style.visibility = "visible";
        } else {
            spanDie[i].style.visibility = "hidden";
        }
    }
}

function randomNum(zMin, zMax) {
    // This function generates, and returns, a random integer
    // between zMin and zMax
    return Math.floor(Math.random()*(zMax-zMin+1) + zMin);
}

function rollButtonClick() {
    rollNum++;
    // loop through each of the 5 game dice and set its "src" image 
    // to one of the 6 random hidden images
    for(i=1; i<=5; i++) {
        if (gameDieHold[i] === false) {
        var tempNumber = randomNum(1,6);
        gameDie[i].src = srcImage[tempNumber].src;

        if (rollNum === 3) {
            canRoll = false;

            if (canRoll === false) {
                console.log("working");
                    gameDieHold[1] = true;
                    gameDieHold[2] = true;
                    gameDieHold[3] = true;
                    gameDieHold[4] = true;
                    gameDieHold[5] = true;

                    renderGameDieSpans();

                    rollButton.removeEventListener("click", rollButtonClick, false);
                    rollButton.disabled = true;


                }
            }

        }
    }           
}

//reset variables
function resetButton() {
    console.log("button working");
    rollNum = 0;
    canRoll = true;
    gameDieHold[1] = false;
    gameDieHold[2] = false;
    gameDieHold[3] = false;
    gameDieHold[4] = false;
    gameDieHold[5] = false;

    rollButton.addEventListener("click", rollButtonClick, false);
    rollButton.disabled = false;



    renderGameDieSpans();


//below are if statements that check if various parts of the function is working    
    if (rollNum === 0) {
        console.log("rollNum equal to 0");
    }

    if (canRoll === true) {
        console.log("canRoll is true");

        if (gameDieHold[1] === false) {
            console.log("gameDieHold is false");
        }
    }

}


function scoreButtonClick() {
    var tempMsg = "";
    tempMsg = gameDie[1] + " ";
    tempMsg += gameDie[2] + " ";
    tempMsg += gameDie[3] + " ";
    tempMsg += gameDie[4] + " ";
    tempMsg += gameDie[5] + " ";
    alert(tempMsg);
}

</script>

特定区域 - 

function scoreButtonClick() {
    var tempMsg = "";
    tempMsg = gameDie[1] + " ";
    tempMsg += gameDie[2] + " ";
    tempMsg += gameDie[3] + " ";
    tempMsg += gameDie[4] + " ";
    tempMsg += gameDie[5] + " ";
    alert(tempMsg);
}

我还认为我可能需要做的是生成随机数，在警报中显示。我只是不知道采用哪种方式。

这些是控制随机数代的函数。

function randomNum(zMin, zMax) {
    // This function generates, and returns, a random integer
    // between zMin and zMax
    return Math.floor(Math.random()*(zMax-zMin+1) + zMin);
}

function rollButtonClick() {
    rollNum++;
    // loop through each of the 5 game dice and set its "src" image 
    // to one of the 6 random hidden images
    for(i=1; i<=5; i++) {
        if (gameDieHold[i] === false) {
        var tempNumber = randomNum(1,6);
        gameDie[i].src = srcImage[tempNumber].src;

        if (rollNum === 3) {
            canRoll = false;

            if (canRoll === false) {
                console.log("working");
                    gameDieHold[1] = true;
                    gameDieHold[2] = true;
                    gameDieHold[3] = true;
                    gameDieHold[4] = true;
                    gameDieHold[5] = true;

                    renderGameDieSpans();

                    rollButton.removeEventListener("click", rollButtonClick, false);
                    rollButton.disabled = true;


                }
            }

        }
    }           
}

如果你能提供帮助，那就太好了。这是漫长的一天，我认为我的大脑有点疲惫。谢谢。如果有任何需要澄清或覆盖的内容，请与我联系。

1 个答案:

答案 0 :(得分：0)

您的alert(tempMsg)设置为显示DOM元素document.querySelector("#gameDie1")。更改它以显示ID或添加该DOM元素的自定义属性。

您可以使用：

gameDie[i].match(/\d/)

或

gameDie[i].attributes.customAttr.value

赞this

相关问题
最新问题