[html]<div id="game"></div>

<style>
#game {
  width: 360px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  user-select: none;
}

.cell {
  width: 42px;
  height: 42px;
  background-size: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.cell.selected {
  outline: 3px solid #fff;
}

.cell.highlight {
  box-shadow: 0 0 15px 5px rgba(255,255,255,0.9);
  transform: scale(1.15);
}
</style>

<script>
/* ====== НАСТРОЙКИ ====== */
const SIZE = 8;

const COLORS = [
  { id:'red',    img:'https://upforme.ru/uploads/001c/84/76/2/401102.png' },
  { id:'blue',   img:'https://upforme.ru/uploads/001c/84/76/2/700139.png' },
  { id:'green',  img:'https://upforme.ru/uploads/001c/84/76/2/128242.png' },
  { id:'yellow', img:'https://upforme.ru/uploads/001c/84/76/2/330476.png' }
];

const ICONS = {
  'line-h': 'https://upforme.ru/uploads/001c/0f/f1/3/544551.png',
  'line-v': 'https://upforme.ru/uploads/001c/0f/f1/3/675860.png',
  'color' : 'https://upforme.ru/uploads/001c/0f/f1/3/753893.png',
  'area'  : 'https://upforme.ru/uploads/001c/0f/f1/77/689325.webp'
};

/* ====== СОСТОЯНИЕ ====== */
const game = document.getElementById('game');
let board = [];
let selected = null;

/* ====== ВСПОМОГАТЕЛЬНЫЕ ====== */
const idx = (x,y)=>y*SIZE+x;
const xy  = i=>[i%SIZE,Math.floor(i/SIZE)];
const neighbor=(a,b)=>{
  const [ax,ay]=xy(a),[bx,by]=xy(b);
  return Math.abs(ax-bx)+Math.abs(ay-by)===1;
};
const randColor=()=>COLORS[Math.floor(Math.random()*COLORS.length)];

/* ====== ИНИЦИАЛИЗАЦИЯ ====== */
function init(){
  board=[];
  for(let i=0;i<SIZE*SIZE;i++){
    const c=randColor();
    board.push({type:'normal',color:c.id,img:c.img});
  }
  draw();
  processMatches();
}

/* ====== ОТРИСОВКА ====== */
function draw(){
  game.innerHTML='';
  board.forEach((c,i)=>{
    const d=document.createElement('div');
    d.className='cell';
    if(i===selected) d.classList.add('selected');
    if(c){
      d.style.backgroundImage=`url(${c.img})`;
    }
    d.onclick=()=>click(i);
    game.appendChild(d);
  });
}

/* ====== КЛИК ====== */
function click(i){
  if(selected===null){ selected=i; draw(); return; }
  if(!neighbor(selected,i)){ selected=null; draw(); return; }

  swap(selected,i);

  if(activateSpecial(i,selected)||activateSpecial(selected,i)){
    selected=null;
    return;
  }

  if(!processMatches()) swap(selected,i);
  selected=null;
  draw();
}

/* ====== SWAP ====== */
function swap(a,b){
  [board[a],board[b]]=[board[b],board[a]];
}

/* ====== ПОИСК КОМБИНАЦИЙ ====== */
function findMatches(){
  let res=[];
  let specials={};

  // горизонталь
  for(let y=0;y<SIZE;y++){
    let run=[];
    for(let x=0;x<SIZE;x++){
      const i=idx(x,y),c=board[i];
      if(c&&run.length&&board[run[0]].color===c.color) run.push(i);
      else { if(run.length>=3) res.push(run); run=[i]; }
    }
    if(run.length>=3) res.push(run);
  }

  // вертикаль
  for(let x=0;x<SIZE;x++){
    let run=[];
    for(let y=0;y<SIZE;y++){
      const i=idx(x,y),c=board[i];
      if(c&&run.length&&board[run[0]].color===c.color) run.push(i);
      else { if(run.length>=3) res.push(run); run=[i]; }
    }
    if(run.length>=3) res.push(run);
  }

  return res;
}

/* ====== ОБРАБОТКА КОМБО ====== */
function processMatches(){
  const matches=findMatches();
  if(!matches.length) return false;

  let toRemove=new Set();

  matches.forEach(group=>{
    if(group.length===4){
      const i=group[1];
      board[i]={type:'line-h',img:ICONS['line-h']};
      group.forEach(j=>j!==i&&toRemove.add(j));
    }
    else if(group.length>=5){
      const i=group[2];
      board[i]={type:'color',img:ICONS['color']};
      group.forEach(j=>j!==i&&toRemove.add(j));
    }
    else{
      group.forEach(j=>toRemove.add(j));
    }
  });

  toRemove.forEach(i=>board[i]=null);
  setTimeout(()=>{
    drop();
    draw();
    setTimeout(processMatches,200);
  },200);

  return true;
}

/* ====== ПАДЕНИЕ ====== */
function drop(){
  for(let x=0;x<SIZE;x++){
    for(let y=SIZE-1;y>=0;y--){
      const i=idx(x,y);
      if(board[i]===null){
        for(let k=y-1;k>=0;k--){
          const j=idx(x,k);
          if(board[j]){
            board[i]=board[j];
            board[j]=null;
            break;
          }
        }
        if(board[i]===null){
          const c=randColor();
          board[i]={type:'normal',color:c.id,img:c.img};
        }
      }
    }
  }
}

/* ====== СПЕЦ-ФИШКИ ====== */
function activateSpecial(i,target){
  const c=board[i];
  if(!c||c.type==='normal') return false;

  let affected=new Set();
  const [x,y]=xy(i);

  if(c.type==='line-h')
    for(let xx=0;xx<SIZE;xx++) affected.add(idx(xx,y));

  if(c.type==='line-v')
    for(let yy=0;yy<SIZE;yy++) affected.add(idx(x,yy));

  if(c.type==='color'&&board[target])
    board.forEach((b,j)=>b&&b.color===board[target].color&&affected.add(j));

  highlightDestroy(affected,i);
  return true;
}

/* ====== ПОДСВЕТКА → УДАЛЕНИЕ ====== */
function highlightDestroy(cells,source){
  [...cells].forEach(i=>game.children[i]?.classList.add('highlight'));

  setTimeout(()=>{
    cells.forEach(i=>board[i]=null);
    board[source]=null;
    draw();
    setTimeout(()=>{
      drop();
      draw();
      processMatches();
    },200);
  },1000);
}

init();
</script>
[/html]