ゲームの正誤判定に用いるif文が上手く動きません。
Q&A
Closed
解決したいこと
ゲーム制作をしています。
正誤判定に用いるif文が上手く動かないので、正しく動くようにしたいです。
解決方法を教えてください。
発生している問題・エラー
エラーメッセージは特に出ていません。
しかし、以下のソースコードで、altの値が等しくなくても「correct」という文字列が出てしまいます。
このゲームについて
このゲームはお客さんの注文に応じて料理をドラッグ＆ドロップすることで運び、正しい料理を運んだら点数が加算されるというルールです。
制限時間も設けようと考えていますが、現時点では注文に対して正しい料理を運んでも、間違った料理を運んでも正しい料理を運んだと判定されてしまいます。
該当するソースコード
'use strict';
{
const start = document.getElementById('start');
const order = document.getElementById('order');
const food1 = document.getElementById('food1');
const food2 = document.getElementById('food2');
const food3 = document.getElementById('food3');
setTimeout(() => {
start.classList.remove("disabled")
}, 0);
setTimeout(() => {
start.classList.add("disabled")
}, 2000);
const images = ['order1.png', 'order2.png', 'order3.png', 'order4.png', 'order5.png', 'order6.png', 'order7.png', 'order8.png', 'order9.png'];
const orderOne = document.getElementById('orderOne');
const imageNoOne = Math.floor(Math.random() * images.length);
if ((imageNoOne === 0) || (imageNoOne === 5) || (imageNoOne === 6)) {
orderOne.alt = '肉じゃが';
} else if ((imageNoOne === 1) || (imageNoOne === 4) || (imageNoOne === 7)) {
orderOne.alt = 'パフェ';
} else {
orderOne.alt = 'ラーメン';
}
orderOne.src = images[imageNoOne];
const orderTwo = document.getElementById('orderTwo');
const imageNoTwo = Math.floor(Math.random() * images.length);
if ((imageNoTwo === 0) || (imageNoTwo === 5) || (imageNoTwo === 6)) {
orderTwo.alt = '肉じゃが';
} else if ((imageNoTwo === 1) || (imageNoTwo === 4) || (imageNoTwo === 7)) {
orderTwo.alt = 'パフェ';
} else {
orderTwo.alt = 'ラーメン';
}
orderTwo.src = images[imageNoTwo];
const orderThree = document.getElementById('orderThree');
const imageNoThree = Math.floor(Math.random() * images.length);
if ((imageNoThree === 0) || (imageNoThree === 5) || (imageNoThree === 6)) {
orderThree.alt = '肉じゃが';
} else if ((imageNoThree === 1) || (imageNoThree === 4) || (imageNoThree === 7)) {
orderThree.alt = 'パフェ';
} else {
orderThree.alt = 'ラーメン';
}
orderThree.src = images[imageNoThree];
food1.addEventListener('drag', () => {
food1.style.display = 'none';
});
food1.addEventListener('dragend', () => {
food1.style.display = 'inline';
});
food2.addEventListener('drag', () => {
food2.style.display = 'none';
});
food2.addEventListener('dragend', () => {
food2.style.display = 'inline';
});
food3.addEventListener('drag', () => {
food3.style.display = 'none';
});
food3.addEventListener('dragend', () => {
food3.style.display = 'inline';
});
orderOne.addEventListener('dragenter', () => {
orderOne.style.borderBottom = 'solid 10px brown';
});
orderOne.addEventListener('dragleave', () => {
orderOne.style.borderBottom ='none';
});
const food1Alt = food1.getAttribute('alt');
const food2Alt = food2.getAttribute('alt');
const food3Alt = food3.getAttribute('alt');
orderOne.addEventListener('drop', () => {
orderOne.style.borderBottom ='none';
if (orderOne.alt.value === food1Alt.value) {
// textContentやvalueを付けた時にはcorrectに、textContentやvalueを外した時にはwrongになる。
console.log("correct");
} else {
console.log("wrong");
}
});
orderTwo.addEventListener('dragenter', () => {
orderTwo.style.borderBottom ='solid 10px brown';
});
orderTwo.addEventListener('dragleave', () => {
orderTwo.style.borderBottom ='none';
});
orderTwo.addEventListener('drop', () => {
orderTwo.style.borderBottom ='none';
});
orderThree.addEventListener('dragenter', () => {
orderThree.style.borderBottom ='solid 10px brown';
});
orderThree.addEventListener('dragleave', () => {
orderThree.style.borderBottom ='none';
});
orderThree.addEventListener('drop', () => {
orderThree.style.borderBottom ='none';
});
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Restaraunt</title>
<link rel="stylesheet" href="playStyles.css">
</head>
<body>
<main>
<div id="start" class="disabled">
ゲーム開始！
</div>
<div id="order">
<img src="" id="orderOne" class="order1" alt="" tabindex="0" ondragover="event.preventDefault()" alt="">
<img src="" id="orderTwo" class="order2" alt="" tabindex="0" ondragover="event.preventDefault()" alt="">
<img src="" id="orderThree" class="order3" alt="" tabindex="0" ondragover="event.preventDefault()" alt="">
</div>
<div id="food">
<img src="food1.png" id="food1" alt="ラーメン">
<img src="food2.png" id="food2" alt="パフェ">
<img src="food3.png" id="food3" alt="肉じゃが">
</div>
</main>
<script src="playMain.js"></script>
</body>
</html>
main {
padding: 0;
margin: 0;
}
#start {
margin-top: 200px;
animation-name: move;
animation-duration: 2s;
text-align: center;
}
@keyframes move {
0% {
opacity: 0;
font-size: 150px;
}
75% {
opacity: 1;
font-size: 30px;
}
100% {
opacity: 0;
font-size: 150px;
}
}
#order {
margin-top: 100px;
margin-bottom: 20px;
text-align: center;
}
.order1, .order2, .order3 {
width: 120px;
}
.order2 {
margin-right: 140px;
margin-left: 140px;
}
#food {
text-align: center;
}
#food1, #food2, #food3 {
cursor: pointer;
}
#food1:active, #food2:active, #food3:active {
position: relative;
top: 5px;
}
#food1 {
margin-right: 50px;
}
#food2 {
margin-right: 100px;
margin-left: 100px;
}
#food3 {
margin-left: 50px;
}
#food1, #food2, #food3 {
margin-top: 50px;
height: 60px;
}
#correct, #wrong {
text-align: center;
margin-top: 100px;
}
.correct-mark {
width: 120px;
}
.wrong-mark {
width: 100px;
}
.disabled {
display: none;
}
自分で試したこと
textContentやvalueを外して実行してみましたが、その時にはwrongになってしまいます。
0 likes
