PC版のオンラインカウンターを動く麻雀牌にしたのが去年の春ごろ。
その後少し改良して、牌をクリックすると咲-Saki-キャラのセリフがポップアップするようにしました。 ただこのセリフのセットを、アニメーション切り替えと同時にしていたので、
一つの動作が終わるまでセリフが変らない
→ゆっくり動いている牌は何度クリックしても同じセリフが表示され、あまり面白くない
ということが前から気になっていたので、クリックのタイミングで切り替わるように再改良しました。
たくさんクリックして遊んでくれるとうれしいなって…
以下は技術的なアレなので、興味のある方だけ御覧下さい。
最初から配列として定義するより楽なので、こういう書き方をしました。
カウンターの麻雀牌はもとのHTMLには存在せず、あとから生成している要素なので、
見た目は単純なのに、裏技を複雑に駆使した、結構難易度の高いCSSです。
ジェネレータサイトもありますが、仕組みから理解したい方は、こちらが参考になると思います。
その後少し改良して、牌をクリックすると咲-Saki-キャラのセリフがポップアップするようにしました。 ただこのセリフのセットを、アニメーション切り替えと同時にしていたので、
一つの動作が終わるまでセリフが変らない
→ゆっくり動いている牌は何度クリックしても同じセリフが表示され、あまり面白くない
ということが前から気になっていたので、クリックのタイミングで切り替わるように再改良しました。
たくさんクリックして遊んでくれるとうれしいなって…
以下は技術的なアレなので、興味のある方だけ御覧下さい。
JavaScript
セリフの配列
var words ='いっしょに楽しもうよ!!,(略),なんでスーツで谷間出してるの<br>この人…'.split(',');セリフを「,」でつなげてひとつの長い文字列にし、
split()
で分解、配列に変換します。最初から配列として定義するより楽なので、こういう書き方をしました。
イベントリスナー
$("#visitors").on("click", ".ancoro", function(e) {カウンターの表示枠
visitors
に含まれるancoro
というクラスの要素=麻雀牌がクリックされた時の処理を定義するイベントリスナーです。カウンターの麻雀牌はもとのHTMLには存在せず、あとから生成している要素なので、
click()
ではなくon()
メソッドの方を使います。
var serif = words[Math.floor(Math.random() * words.length)], balloon = $('<div class="pai-said">' + serif + "</div>");セリフの配列
words
からランダムに一つのセリフを選び、フキダシ要素baloon
を作ります。
e || (e = event); var x = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft), y = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop); balloon.css({ left: x + 20 + "px", top: y - 30 + "px" }),クリックされた座標からフキダシを表示する座標を算出し、
baloon
のCSSプロパティにセットします。
$(document.body).append(balloon), balloon.fadeIn("fast").delay(600).fadeOut("fast", function() { balloon.remove(); }); });
baloon
をbody
要素に挿入し、0.6秒表示してから削除します。
おまけ フキダシのCSS
.pai-said { position: absolute; background: ivory; font-size: 12px; font-weight: 700; color: #877; padding: 10px; border: 1px solid silver; border-radius: 10px 10px; z-index: 99; max-width: 200px; box-sizing: border-box } .pai-said::before { border-width: 4px 10px 4px 0; border-color: transparent silver; border-style: solid; display: block; position: absolute; bottom: 6px; left: -10px; width: 0; height: 0; content: ''; } .pai-said::after { border-width: 4px 10px 4px 0; border-color: transparent ivory; border-style: solid; display: block; position: absolute; bottom: 6px; left: -9px; width: 0; height: 0; content: ''; }
pai-said
はフキダシ本体、pai-said::before
はフキダシの尻尾の輪郭、pai-said::after
は尻尾の塗りです。見た目は単純なのに、裏技を複雑に駆使した、結構難易度の高いCSSです。
ジェネレータサイトもありますが、仕組みから理解したい方は、こちらが参考になると思います。
CSSで吹き出しを作ろう (全8回) - プログラミングならドットインストール
コメント