最近麻雀ずっとやってる

ずっとやってる。弱いからずっと負けてるけど。
あんなに一生懸命やっていたあつ森も最近はほったらかし気味です。
今頃雑草だらけになっているんだろうなぁ。

敷居が高い、おっさんの遊戯と思われがちな麻雀ですが、そんなことはありません。某有名オンラインRPGになぜか麻雀が実装されたり、VTuberがオンライン麻雀配信したりしていて、最近はかなり広い層で楽しまれているような気がします。

麻雀興味があるけどルールがわからん！マジで全くわからん！って言う人は、こちらの記事がおすすめです。

これを読めば上がれる！ソシャゲに慣れきった現代人のための、ド初心者向け楽しいネット麻雀講座

この上の記事内でも紹介されている雀魂というアプリでずっとやっています。
かなりユーザーが増えてきていて、初心者の人もいっぱい始めているみたいです。
「やってみたいけどボコボコにされそうで嫌だなぁ」という人こそ、是非今始めてみてください。「あれ？こいつ、さては……？」みたいなプレイヤーが結構いるはずです。

ついでに、CSSで麻雀牌っぽいものを書いてみました。
流石に絵柄は画像ですが……
あんまりチェックしていないので、変になっていたらごめんなさい。
chromeなら大丈夫なはず……

インライン用に調整したのがこちら。

たのしい麻雀大会

ソースは大体こんな感じです。

【HTML】
<div class="mahjong">
  <div class="mHai"><img src="tamago_hai.png" alt=""></div>
  <div class="mHai"><img src="tamago_hai_2.png" alt=""></div>
  <div class="mHai"><img src="tamago_hai_3.png" alt=""></div>
</div>
<p>たのしい<span class="mHai inline">
<img src="tamago_hai.png" alt=""></span>麻雀大会</p>

※<img>タグの前で改行していますが、実際は改行不要です。

【CSS】
.mahjong {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.mahjong > .mHai {
  margin-right: 2px;
}

.mHai {
  position: relative;
  height: 104px;
  width: 80px;
  border-radius: 8px;
  background-color: #fefefb;
  border-top: none;
  box-shadow: 1px 1px 0 0 #eee,
    -1px 1px 0 0 #eee,
    0 -20px 0 0 #f8f7f0,
    1px -20px 0 0 #eee,
    -1px -20px 0 0 #eee,
    1px -23px 0 0 #ff8d22,
    -1px -23px 0 0 #ff8d22;
}
.mHai::last-child {
  margin-right: 0;
}
.mHai > img {
  position: absolute;
  display: block;
  max-width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mHai.inline {
  display: inline-block;
  height: 1em;
  width: .77em;
  margin: 0 .1em;
  border-radius: .1em;
  box-shadow: 1px 1px 0 0 #eee,
    -1px 1px 0 0 #eee,
    0 -.2em 0 0 #f8f7f0,
    1px -.2em 0 0 #eee,
    -1px -.2em 0 0 #eee,
    1px -.3em 0 0 #ff8d22,
    -1px -.3em 0 0 #ff8d22;
  vertical-align: middle;
}

適当に書いたのでプロパティの順番とかがめちゃくちゃですが……
box-shadowで牌の立体感や背面部分、境界線を描画している感じですね。

しかし、たまいさん麻雀牌可愛いですね。商品化行けるか……？！

皆さんも是非麻雀で遊びましょう。
僕は今日も元気にロンされてきます。では。

Share プリーズ