1
현재 주사위 롤러를 만드는 중입니다. 내가 해결하려고하는 내 문제는 내 주사위 자체가 이미지 요소라는 것인데, 나는 그 주사위 숫자 값을 보여주는 경고 메시지를 표시하기 위해 숫자를 할당하려고합니다. 예를 들어, 첫 번째 주사위 값에서 굴린 이미지가 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;
}
}
}
}
}
도움을받을 수 있다면 도움이 될 것입니다. 긴 하루 였고 내 두뇌가 조금 마모 된 것 같습니다. 고맙습니다. 내가 분명히하거나 숨길 필요가있는 것이 있으면 알려주세요.