【テトリス #11】GameOver画面 - スマレジエンジニアyushiのブログ

久しぶりにテトリスの続きを作っています。

技術スタックは下記の通りです。

TypeScript
React
SCSS
Create React App

今回は、GameOver画面を作ります。

GameOver画面

完成形はこのイメージです。
ゲーム画面を黒くぼかし、色文字で「GAME OVER」と表示します。
ここで使っている色は、各ブロックの配色と一緒のものです。　

  const text = ['GAME', 'OVER']
    .map((item, index1) =>
      item
        .split('')
        .map((t, index2) => <span key={index1 * 100 + index2}>{t}</span>)
    )
    .reduce(
      (prev, cur, index) =>
        (prev.length > 0 ? [...prev, <br key={10000 + index} />] : []).concat([
          ...cur,
        ]),
      []
    );

<div className="GameOver">
  <div className="title-text">{text}</div>
</div>

少しややこしいロジックですが、要は一文字ごとに<span> で囲み、<br>で改行します。生成されたHTML構造を見るとわかりやすいです。

CSS適用します。

<span>囲ったので、これに対してnth-of-typeで順に色分けしていきます。

.GameOver {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);

  .title-text {
    font-size: 40px;
    font-weight: bold;

    span {
      &:nth-of-type(7n + 1) {
        color: $color-1;
      }
      &:nth-of-type(7n + 2) {
        color: $color-2;
      }
      &:nth-of-type(7n + 3) {
        color: $color-3;
      }
      &:nth-of-type(7n + 4) {
        color: $color-4;
      }
      &:nth-of-type(7n + 5) {
        color: $color-5;
      }
      &:nth-of-type(7n + 6) {
        color: $color-6;
      }
      &:nth-of-type(7n + 7) {
        color: $color-7;
      }
    }
  }
}

Pull Request

https://github.com/nek0meshi/tetris/pull/24

あとがき

nth-letterのような仕組みがあればいいのですが...。