小粒プログラミング 牌山

#02 牌山を画像で表示させる

更新日:

Javascriptで遊ぶ麻雀小粒プログラミング

今回のお題は、前回のお題で生成した牌山を牌画で表示させる処理を紹介します。牌画はCSSスプライトを利用して表示します。

プログラムの解説と実行

前回のお題の牌山を生成するで生成した牌山を牌画で表示させます。配列(yama)に保存されている値を0番地から順番に抜き出します。抜き出した値とJSON形式の配列(paiType)に対応した値(cssSprite)を使ってcssスプライト画像を表示させます。

牌山の牌に割り振られた番号
▲配列に保存されている牌山のイメージ(一番目の牌山)

生成した牌山を画像で表示(シャッフル済み)

注意牌画は牌山の配列を順番の並べただけです。実際の牌山のイメージとは異なります。



JavaScriptソースコード

本記事で紹介したサンプルプログラムをダウンロードできます。

ダウンロードをする前にお読みください

  • サイトで紹介している記事の内容や公開しているプログラムの動作は100%保障するものではありません。
  • 当プログラム使用による如何なる不具合やトラブル、損害の責任も負いかねます。
  • 当プログラムは断り無く内容が変わることがあります。
  • 当プログラムを別サイトで配布することは禁止します。
  • サポートはいたしません。
  • 自己責任にてご利用くださいませ。

以上をご確認の上、プログラムのダウンロードをお願いいたします。

サンプルプログラムのソースコード

ソースコードは折りたたんであります。[+]を押すと、折りたたまれたソースコードが開きます。[-]を押すと、コードは折りたたまれます。

program_002.jsを開く
program2.cssを開く
サイト内関連記事

おすすめレンタルサーバー

エックスサーバー|高速・高機能レンタルサーバー

オールSSDの快適ハイスペック環境」「国内管理、大容量バックボーン」「独自SSLが無料」「FastCGIなどの高速化機能」「最新のPHP7を実装」など、高機能・高コストパフォーマンスなレンタルサーバーです。※当サイトも「エックスサーバー」で運用しています。

 

独自ドメインプレゼントキャンペーン情報

キャンペーン期間中にサーバーアカウントを契約すると、独自ドメインが1つもらえます。しかも、更新料も無料。運用コストを軽減します。

期間は、2017年10月16日より2017年11月30日まで、お見逃しなく。

-小粒プログラミング, 牌山
-

Copyright© 麻雀ツール点数計算ラボ , 2017 All Rights Reserved.