javascript - 在 Javascript 骰子游戏中为骰子分配数字-6ren

javascript - 在 Javascript 骰子游戏中为骰子分配数字

转载作者：行者123 更新时间：2023-11-28 05:39:44

我目前正在创建一个骰子滚筒。我试图解决的问题是我的骰子本身是图像元素，我想为它们分配数字，以便它们显示一条警报消息，显示所述掷骰子的数值。例如，如果第一个骰子值中滚动的图像是 3，当我单击“检查分数”按钮时，我希望警报在第一条消息中显示“3”。我现在的问题是警报显示 [object 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;


                }
            }

        }
    }           
}

如果您能提供帮助，那就太好了。这真是漫长的一天，我觉得我的大脑有点疲惫了。谢谢。如果有任何我需要澄清或涵盖的内容，请告诉我。

最佳答案

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

您可以使用:

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

或

gameDie[i].attributes.customAttr.value

喜欢this

关于javascript - 在 Javascript 骰子游戏中为骰子分配数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39031687/

文章推荐： css - 显示无效属性的背景图像

文章推荐： javascript - 如何覆盖全页按钮，按下该按钮将关闭浏览器

文章推荐： html - 网站上的定制 Twitter Feed

文章推荐： javascript - 在 meteor 中，如何通过单击按钮隐藏表单？

javascript - Threejs 骰子，如何把数字放在脸上
我刚刚向自己介绍了 WebGL 和 Threejs，作为开始，我正在尝试创建一个 3D 骰子。我已经到了创建立方体的地步，但我真的不知道如何在立方体的面上放置数字，我能找到的只是如何更改颜色。我已经查
javascript - 如何根据随机数(骰子)在游戏板上来回移动？
这就是我现在得到的...... var max = 7; var min = 1; $('#dice').click(function() { random = Math.floor(Math.r
c# - Unity 按钮滚动 3D 骰子，在按钮上寻找刚体而不是骰子对象
我是 Unity 的新手，一直在尝试掷骰子。我遇到了一组教程，它们允许我创建一个 3d 模具(模具使用 Rigidbody 和 Mesh Collider)并编写脚本使其在空格键上滚动，如下所示: 骰
javascript - 骰子、可变函数、数组切片、新按钮、不同函数
我是 JavaScript 新手，我需要一些想法/帮助来了解如何使我的脚本正常工作。所以我们的想法是，你掷两个骰子，通过按下“掷骰子”按钮然后按下重置按钮来重置整个 HTML 中的所有内容。所以事情
java - 如何使用 while 循环让骰子重新掷骰子，直到它达到 "point"(骰子)？
我正在尝试构建一个掷骰子游戏，如果计算机自动掷出一对骰子，并且如果 cpu 掷出 7 或 11，则用户获胜。然而，如果用户掷出 2、3 或 12，他们将自动失败。如果用户滚动任何其他数字(4、5、6、
python - 如何为 N 个骰子生成 "Go First"骰子？
背景如此处所述http://www.ericharshbarger.org/dice/#gofirst_4d12 , “先走”骰子是一组四个骰子，每个都有唯一的编号，因此: 任何两个或更多骰子都不会

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 Javascript 骰子游戏中为骰子分配数字