我的脚本应该显示单击的卡片一和二。如果他们进行比较,他们应该两者都放弃。如果他们没有见面,他们应该再次展示卡片背景。在谷歌上,第二张卡片不会显示它的正面。即使两张卡都得到了类。正面和正确的值进行比较。这个问题只发生在谷歌chrome上。在Firefox上,console.debug中也没有显示任何问题。我将其设置为:[脚本在操作中][1]https://obs-design.de/index.php?design=1&mainmenu=游戏
有人看到这个虫子吗?
这是脚本:
<style>
.containerh1w1{
cursor: pointer;
}
.containerh1w1 img.backside,
.containerh1w1.backside img.backside{
display:block;
margin:auto auto;
object-fit:cover;
}
.containerh1w1 img.frontside,
.containerh1w1.backside img.frontside{
display:none;
}
.containerh1w1.frontside img.frontside{
display:block;
margin:auto auto;
object-fit:cover;
}
.containerh1w1.frontside img.backside{
display:none;
}
.containerh1w1.empty img.backside{
display:none;
}
.containerh1w1.empty img.frontside{
display:none;
}
#monitor{
position:absolute;
z-index:1100;
top: 0;
left:0;
width:210px;
height:20px;
background:#000;
}
#timerwrapper,
#zugoverviewwrapper{
float:left;
}
#timerwrapper span,
#zugoverviewwrapper span{
display:inline;
font-size:0.9rem;
line-height:20px;
color:#fff;
margin-right:10px;
float:left;
}
#timer{
display:block;
float:left;
width:30px;
height:20px;
font-size:1rem;
line-height:20px;
color:#fff;
text-align:center;
padding: 0 auto;
border:1px solid #fff;
float:right;
margin-right:15px;
}
#zugoverview{
display:block;
float:right;
width:20px;
height:20px;
font-size:1rem;
line-height:20px;
color:#fff;
border:1px solid #fff;
text-align:center;
}
</style>
<script>
shuffledarr = Array;
var array =[2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 21, 24, 30, 33, 39];
var imgno='';
var zug = 0;
var treffer = 0;
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
var randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
var arr;
shuffledarr = array;
var sek = 0;
function sec(){
sek = sek +1;
document.querySelector('#timer').innerHTML=sek;
}
function zuege(){
zug += 1;
return zug;
}
function shufflel(no){
imgno = shuffledarr[no];
return imgno;
}
function dataauslesen(no){
imgno = shuffledarr[no];
document.querySelector('#field' +no).innerHTML='<img src="games/images/card_'+ imgno +'.gif" id="bild + no" class="frontside">';
console.log(shuffledarr);
}
var firstchoice ='';
var secondchoice ='';
function front(no){
var elem = document.querySelector('#field' +no);
elem.classList.remove('backside');
elem.classList.add('frontside');
if(firstchoice==''){
firstno = no;
firstchoice =shufflel(no);
} else {
secondno = no;
secondchoice = shufflel(no);
zug = zug + 1;
document.querySelector('#zugoverview').innerHTML=zug;
if( 3*firstchoice == secondchoice || firstchoice == 3*secondchoice){
alert("Gratuliere, Treffer");
document.querySelector('#field'+firstno).classList.remove('backside');
document.querySelector('#field'+firstno).classList.remove('frontside');
document.querySelector('#field'+firstno).classList.add('empty');
document.querySelector('#field'+secondno).classList.remove('backside');
document.querySelector('#field'+secondno).classList.remove('frontside');
document.querySelector('#field'+secondno).classList.add('empty');
}
else {
alert("Schade, kein Treffer");
document.querySelector('#field' +firstno).classList.remove('frontside');
document.querySelector('#field' +firstno).classList.add('backside');
document.querySelector('#field' +secondno).classList.remove('frontside');
document.querySelector('#field' +secondno).classList.add('backside');
}
firstchoice = '';
firstno='';
}
secondchoice = '';
secondno='';
}
</script>
<div id="monitor">
<div id="timerwrapper">
<span>Sek.:</span>
<div id="timer"><script>setInterval(sec, 1000)</script></div>
</div>
<div id="zugoverviewwrapper">
<span>Anzahl Zuege:</span>
<div id="zugoverview"></div></div>
</div>
<div id="mainwrapper">
<div id="wrapper1">
<div id="field0" class="containerh1w1" style="text-align:center;" onclick="front(0)">
<script>dataauslesen(0)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field1" class="containerh1w1" style="text-align:center;" onclick="front(1)">
<script>dataauslesen(1)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field2" class="containerh1w1" style="text-align:center;" onclick="front(2)">
<script>dataauslesen(2)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field3" class="containerh1w1" style="text-align:center;" onclick="front(3)">
<script>dataauslesen(3)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field4" class="containerh1w1" style="text-align:center;" onclick="front(4)">
<script>dataauslesen(4)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field5" class="containerh1w1" style="text-align:center;" onclick="front(5)">
<script>dataauslesen(5)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field6" class="containerh1w1" style="text-align:center;" onclick="front(6)">
<script>dataauslesen(6)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field7" class="containerh1w1" style="text-align:center;" onclick="front(7)">
<script>dataauslesen(7)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field8" class="containerh1w1" style="text-align:center;" onclick="front(8)">
<script>dataauslesen(8)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
</div>
<div id="wrapper2">
<div id="field9" class="containerh1w1" style="text-align:center;" onclick="front(9)">
<script>dataauslesen(9)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field10" class="containerh1w1" style="text-align:center;" onclick="front(10)">
<script>dataauslesen(10)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field11" class="containerh1w1" style="text-align:center;" onclick="front(11)">
<script>dataauslesen(11)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field12" class="containerh1w1" style="text-align:center;" onclick="front(12)">
<script>dataauslesen(12)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field13" class="containerh1w1" style="text-align:center;" onclick="front(13)">
<script>dataauslesen(13)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field14" class="containerh1w1" style="text-align:center;" onclick="front(14)">
<script>dataauslesen(14)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field15" class="containerh1w1" style="text-align:center;" onclick="front(15)">
<script>dataauslesen(15)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field16" class="containerh1w1" style="text-align:center;" onclick="front(16)">
<script>dataauslesen(16)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
<div id="field17" class="containerh1w1" style="text-align:center;" onclick="front(17)">
<script>dataauslesen(17)</script>
<img src="games/images/card_backsite.gif" class="backside" />
</div>
</div>
</div>
在Chrome中,Alert显示在"正面";类已成功添加。您应该考虑使用async/awaithttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
代替
function front(no){
var elem = document.querySelector('#field' +no);
elem.classList.remove('backside');
elem.classList.add('frontside');
if(firstchoice==''){
firstno = no;
firstchoice =shufflel(no);
} else {
...
}
...
}
试试这个
function front(no){
evaluatePairs();
...
}
function updateClasses() {
return new Promise(() => {
var elem = document.querySelector('#field' +no);
elem.classList.remove('backside');
elem.classList.add('frontside');
});
}
async function evaluatePairs() {
const result = await updateClasses();
if (result) {
if(firstchoice==''){
firstno = no;
firstchoice =shufflel(no);
} else {
...
}
...
}
}