Question

我如何创建一个4X4图像的图块是一种轮次的游戏序列。当用户点击图像时，图块会关闭，因此用户无法看到颜色，但是当用户选择2个具有相同颜色的图块时，图像就会消失..当所有图像都被认为是图块时瓷砖是打开的。？你能帮忙吗？

功能：

function f1() {
    document.getElementById('tile1').style.backgroundColor="red";
}

function f2() {
    document.getElementById('tile2').style.backgroundColor="blue";
}

function f3() {
    document.getElementById('tile3').style.backgroundColor="yellow";
}

function f4() { 
    document.getElementById('tile4').style.backgroundColor="green";
}

function determineWinner() {  
    for(i=0;1<4;i++) {    
        if(tiles1[i]==tiles2[i] || tile3[1]==tile4[i]) {
            winner=false;
        }
    }
 }

HTML：

    <div id="main">
        <div onclick="f1();"id="tile1"></div>
        <div onclick="f2();"id="tile2"></div>
        <div onclick="f3();"id="tile3"></div>
        <div onclick="f4();"id="tile4"></div>
    </div>

Answer 1

根据你的问题我能理解的是，你正在尝试建立卡片匹配类型的游戏，我们翻转卡片以匹配前一张卡片。

为了达到同样的目的，我已经建立了这个样本：

HTML：

<div class="playground">
  <div id="pb1" class="playbox"></div>
  <div id="pb2" class="playbox"></div>
  <div id="pb3" class="playbox"></div>
  <div id="pb4" class="playbox"></div>
  <div id="pb5" class="playbox"></div>
  <div id="pb6" class="playbox"></div>
  <div id="pb7" class="playbox"></div>
  <div id="pb8" class="playbox"></div>
  <div id="pb9" class="playbox"></div>
  <div id="pb10" class="playbox"></div>
  <div id="pb11" class="playbox"></div>
  <div id="pb12" class="playbox"></div>
  <div id="pb13" class="playbox"></div>
  <div id="pb14" class="playbox"></div>
  <div id="pb15" class="playbox"></div>
  <div id="pb16" class="playbox"></div>
</div>
<button class="newgame">Start a New Game</button>

CSS：

.playground{
  width: 440px;
  height: 440px;
  background: #FFF;
  border: 1px solid #999;
  padding: 5px;
}
.playbox {
   width: 100px;
   height: 100px;
   background: #999999;
   border: 1px solid white;
   margin: 2px;
   display: inline-block;
 }

 .red {background: red;}
 .black {background: black;}
 .orange {background: orange;}
 .blue {background: blue;}
 .yellow {background: yellow;}
 .green {background: green;}
 .pink {background: pink;}
 .purple {background: purple;}

JavaScript的：

 function shuffleArray(array) {
   for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
 }
}

$(document).ready(function(){
  var color_arry = ['black', 'orange', 'blue', 'red', 'yellow', 'green', 'pink', 'purple', 'black', 'orange', 'blue', 'red', 'yellow', 'green', 'pink', 'purple']; //Array of 8 pairs of colors
  var last_indx = 17; // Any number outside the array index limit 
  var even_click = 0; // To check if it is even (2nd/4th) click to be used to close the tiles.
  var total_clicks = 0; //To calculate the total clicks used.

  $('.newgame').click(function(){
    //Reset the game.
    $('.playbox').attr('class', 'playbox');
    shuffleArray(color_arry);
    last_indx = 17;
    even_click = 0;
  });

  $('.playbox').click(function(){
var indx = parseInt($(this).attr('id').substring(2)) - 1; //Box id starts with "pb1" while the array index from 0.
$(this).addClass(color_arry[indx]); //Add the color class to current element
    $(this).addClass('flipped'); //Add flipped class to identify how many tiles have flipped.
    //alert(last_indx + " - " + indx);
    if(last_indx != indx) { //Do not do any thing if current tile is clicked again.
      //alert(last_indx);
      if(last_indx != 17){
        if(color_arry[indx] != color_arry[last_indx]) {
        setTimeout(function(){
        $('#pb' + (last_indx + 1).toString()).attr('class', 'playbox');
        $('#pb' + (indx + 1).toString()).attr('class', 'playbox');
        last_indx = even_click == 0 ? indx : 17;
        }, 200);
    }
    else {
        last_indx = 17;
      if($('.playbox.flipped').length == 16)
        alert('Congrats! You found all the matched in ' + total_clicks + ' clicks!!')
    }
    }
    else {
        last_indx = indx;
    }
    even_click = even_click == 0 ? 1 : 0;
    total_clicks += 1;
  }
});

  $('.newgame').click();
});

JavaScript函数shuffleArray将随机传递给它的数组。现在，当我们开始一个新游戏时，我们正在使用此功能来重新排列我们的颜色数组。

点击任何一个磁贴将检查当前索引和最后点击的索引。并根据比较，它将颜色类分配给当前图块（元素）。

单击

1 个答案: