时间戳

首页 > 解决方案 > Javascript/CSS：条件高亮瓷砖麻将

javascript - Javascript/CSS：条件高亮瓷砖麻将

问题描述

我正在设计一个麻将风格的纸牌游戏。我遇到了两个问题：

  1. 有条件的瓷砖选择。当光标悬停在可用（可播放）的图块上时，将应用阴影。如果图块的右侧或左侧没有图块，则可以选择图块。我希望通过应用和删除类（'selectableTile'）来解决这个问题。问题是我不知道如何让瓷砖“感知”瓷砖是否在右侧和/或左侧使其可用（现在它们都突出显示）。在下面的示例中，可以使用 1、4、7 和 3、6、9 牌。如果 9 匹配/消失，这将使 8 可用。关于要研究什么的任何建议？我已经探索过 nextsibling 但这似乎只看 NEXT 兄弟而不是以前的兄弟？这可以只用 CSS 完成吗？

  2. 分层瓷砖（背负第一个问题）。游戏有 3-4 层，每一层都比上一层小。我的计划只是使用 flexbox 将所有内容居中，但这会根据上述解决方案影响可选图块

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.container {
  display:flex;
  justify-content:center;
  align-items:center;
  background: radial-gradient(ellipse at center, #1d9325 0%,#17752d 57%,#013a01 100%);
}

.bottomLayer{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100vh;
    border:solid purple 2px;
}

.row{
    display:flex;
    flex-direction: row;
  
}
.tile{
    height:5.75rem;
    width: 4.5rem;
    background: #f2f2f2;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid rgb(59, 59, 59) .2px;
}

.selectableTile:hover{
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 12px 5px rgba(0,0,0,0.4); 
    box-shadow: 0px 0px 12px 5px rgba(0,0,0,0.4);

}
<div class="container">
   <div class="bottomLayer">
     <div class="row 1">
       <div class="tile one selectableTile" id="gameTile">1</div>
       <div class="tile one selectableTile" id="gameTile">2</div>
       <div class="tile one selectableTile" id="gameTile">3</div>
     </div>
     <div class="row 2">
       <div class="tile one selectableTile" id="gameTile">4</div>
       <div class="tile one selectableTile" id="gameTile">5</div>
       <div class="tile one selectableTile" id="gameTile">6</div>
      </div>
      <div class="row 3">
        <div class="tile one selectableTile" id="gameTile">7</div>
        <div class="tile one selectableTile" id="gameTile">8</div>
        <div class="tile one selectableTile" id="gameTile">9</div>
       </div>
    </div>
</div>

?

标签： javascriptcss

解决方案

我会使用嵌套数组来映射事物并执行逻辑部分。另一种选择是使用唯一的 id 道具，例如瓷砖的编号。如果它们是整数值，您可以使用条件来检查图块编号是否等于当前悬停 id +/- 1；如果大于id，则突出右阴影等。

推荐阅读