電脳麻将UI 〜 preload

麻雀 JavaScript

電脳麻将UI 〜 牌 - koba::blog と 電脳麻将UI 〜 音声 - koba::blog で、電脳麻将 では牌の画像や音声データを「DOMをコピーして使う」と説明しましたが、画像や音声データをブラウザが読み込む前に使ってしまうと、ダウンロード中の画像が表示されたり音声が遅れて再生されたりします。jQuery では

  $(function(){ /* ... */ })

の中にプログラムを書くことで、HTMLが読み込まれDOMが構成されるより前にアプケーションが実行されるのを避けるのが「作法」となっていますが、このタイミングでDOMは完成していても外部リソースの読み込みは終わっていないことが多々あります。

続きを読む

電脳麻将UI 〜 音声

麻雀 JavaScript

電脳麻将UI 〜 牌 - koba::blog で 電脳麻将 では牌の表示を「雛形のコピー」で実装していることを説明しましたが、チー・ポンなどの鳴きの発声に使う音声データも同様の方法で処理しています。

具体的な雛形は下記としています*1。

*1:preload を指定していますが、事前にダウンロードするブラウザはなさそうです

続きを読む

電脳麻将UI 〜 牌

麻雀 JavaScript

電脳麻将 では牌を画像として表示していますが、JavaScriptのプログラムではこの画像がどこにあるか知らず、画像のURLも使用していません。HTML内に非表示の雛形があり、それをコピーして表示しています。

具体的にはHTML内に以下のような非表示の「雛形」があり、このDOM要素をコピーして使用します。

続きを読む

電脳麻将UI 〜 flipInput

麻雀 JavaScript

電脳麻将 の 牌譜エディタ では「牌画像と入力フィールドを切り替える」UIを採用しています。通常は牌画像を表示し、フォーカスが当たると入力フィールドに切り替わります。この動きを実現しているのが flipInput*1 です。

子要素 A、B を持つ要素 X に flipInput を適用すると、

  • 通常は A を表示
  • X がフォーカスされたときは B を表示

と動作するように変化します。B に入力フィールドを置けば、フォーカスを当てて入力し、フォーカスを失えば元に戻るUIを実現できる訳です。

*1:flip は「ひっくり返る」という意味で、このUIの動作する感じを表しています

続きを読む

電脳麻将UI 〜 selector

麻雀 JavaScript

電脳麻将 は ver.2.0.0 からキーボードで打牌選択できるようになりました。これを実現しているのが selector です。リストを表すDOMノードに selector を適用すると、

  • 矢印キーなどで1つ1つ選択し、Enterキーで確定
  • マウスを合わせることで選択し、クリックで確定
  • タッチデバイスではタップで選択し、再度タップで確定

という選択UIが実現できます。

続きを読む

電脳麻将UI 〜 scale

麻雀 JavaScript CSS

電脳麻将 のスマートフォン表示では、画面サイズに関わらず画面いっぱいに卓を表示していますが、それを実現しているのが関数 scale() です。

スマートフォン用の表示では、卓は 800x450px の固定サイズで描画し、スマートフォン画面の縮尺をそれに合わせています。まず、卓を画面の横幅いっぱいに表示するために、meta 要素の viewport で画面幅を指定します。

続きを読む

電脳麻将UI 〜 fade-in/out

麻雀 JavaScript CSS

かつて 電脳麻将 では、画面要素の fade-in/out を jQuery の メソッド で行っていましたが、ver.1.4.2 でCSSの機能で行うように変更しています。

jQuery ではCSSの opacity の値をタイマーイベントで徐々に変更することで実装していたようです。これをCSSの transition を使用するように変更します。

続きを読む

電脳麻将UIのリファクタリング

麻雀 JavaScript

1年半ほど前に 電脳麻将 のUIのリファクタリングを始めたのですが、気力が続かずこの一年以上放置状態になっていました。

どこまで続くか分かりませんが、このプロジェクトを再開しようと思います。

続きを読む

牌の危険度計算アルゴリズム(5) 〜 危険度閾値の再調整

麻雀 JavaScript

打牌選択アルゴリズム(10) 〜 残り牌数の正規化 - koba::blog で残り牌数の数え方を変え、それにより変化した手牌の評価値に合わせて 押し引きアルゴリズムの改善(4) 〜 押し引き閾値の再調整 - koba::blog で押し引きの閾値を再調整しました。今回は牌の危険度の閾値を再調整します。危険度決定アルゴリズム自体は変更しないので、調整は不要な可能性が高いです。

続きを読む