三局比赛

Question

我正在研究一个项目，我需要制作三消游戏，并且需要使用jQuery检查是否有3个或更多的糖果彼此相邻，但无法弄清。

共有7列，这是用随机图像填充它的代码：

$(".element").attr('src', function() {
  var candy = Math.floor(Math.random() * 4 + 1);
  return "image/" + candy + ".png";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-1">
  <img src="" class="element">
  <img src="" class="element">
  <img src="" class="element">
  <img src="" class="element">
  <img src="" class="element">
  <img src="" class="element">
  <img src="" class="element">
</div>

如您所见，我有4种不同的糖果。我需要的是程序检查3个或更多的糖果是否对齐并移除。

任何帮助或小费将不胜感激。

Answer 1

这是一个尝试，看看

function draw(){
$(".element").each(function(){
 var candy = Math.floor(Math.random() * 4 + 1);
  var src=  "image/" + candy + ".png";
$(this).attr('src',src);
$(this).attr('candy',candy);
});
}
function validate(){

 var v= -1;
 var counter = [];
 $(".element").each(function(){
   var candy = $(this).attr("candy");
      if (counter.length<=3){
   if (v == candy)
    {
       counter.push(this);         
    }else {
    if (counter.length<=3){
       v = candy;
      counter =[];
      counter.push(this)
      }
   }
  }
 
 });
 
 
 console.clear();
console.log(counter.length + " elements next to eachother") 
if (counter.length>2)
    console.log(counter) // here you could remove then or whatever
    else console.log("fail, there is less then three element next to eachother, try agen")
draw()
}

draw()

<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-1">
  <img src="" class="element">
  <img src="" class="element">
  <img src="" class="element">
  <img src="" class="element">
  <img src="" class="element">
  <img src="" class="element">
  <img src="" class="element">
</div>

<input type="button" onclick="validate()" value="validate" />