#17 牌記号を生成する

2017年12月10日

何切る問題の作成に欠かせない牌記号の生成について解説します。今回は、ツイッターでよく見るMPS形式と天鳳の牌理入力で使われるMPSZ形式を紹介します。

プログラムの解説と実行

2種類の牌記号を生成します。ひとつは、天鳳民が何切るをツイッターに投稿する時によく使う牌記号です。MPS形式と呼ばれているそうです。もうひとつは、天鳳の牌理で使われている記号です。こちらはMPSZ形式と呼ばれているようです。MPSZ形式は牌記号から牌姿に復元しやすいので、よく利用しています。当サイトの天鳳牌理支援ツールもMPSZ形式の牌記号を生成して天鳳牌理ページに飛ぶようにしています。

リンク牌理/牌効率学習ツール

実行してみよう

牌画をクリックまたはタッチして牌姿を作ります。［牌記号の生成］ボタンを押すと、それぞれの牌記号が出力されます。

手牌：0牌（最大入力数は14牌）　※任意の牌をクリックして消すことができます。

MPS形式の牌記号

天鳳の牌理で使われる牌記号（MPSZ形式）

JavaScriptソースコード

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

サンプルプログラムのダウンロード

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

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

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

本プログラムはjQueryを組み込んだ状態じゃないと動作しません。ご注意ください。

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

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

+ program_017.jsを開く

//============================================================================
//牌の配列：JSON形式
//============================================================================
var paiType = [
	{"No":0,"paiName":"赤五萬","cssSprite":"man0","paigaNo":4},
	{"No":1,"paiName":"一萬","cssSprite":"man1","paigaNo":0},
	{"No":2,"paiName":"二萬","cssSprite":"man2","paigaNo":1},
	{"No":3,"paiName":"三萬","cssSprite":"man3","paigaNo":2},
	{"No":4,"paiName":"四萬","cssSprite":"man4","paigaNo":3},
	{"No":5,"paiName":"五萬","cssSprite":"man5","paigaNo":5},
	{"No":6,"paiName":"六萬","cssSprite":"man6","paigaNo":6},
	{"No":7,"paiName":"七萬","cssSprite":"man7","paigaNo":7},
	{"No":8,"paiName":"八萬","cssSprite":"man8","paigaNo":8},
	{"No":9,"paiName":"九萬","cssSprite":"man9","paigaNo":9},

	{"No":10,"paiName":"赤五筒","cssSprite":"pin0","paigaNo":14},
	{"No":11,"paiName":"一筒","cssSprite":"pin1","paigaNo":10},
	{"No":12,"paiName":"二筒","cssSprite":"pin2","paigaNo":11},
	{"No":13,"paiName":"三筒","cssSprite":"pin3","paigaNo":12},
	{"No":14,"paiName":"四筒","cssSprite":"pin4","paigaNo":13},
	{"No":15,"paiName":"五筒","cssSprite":"pin5","paigaNo":15},
	{"No":16,"paiName":"六筒","cssSprite":"pin6","paigaNo":16},
	{"No":17,"paiName":"七筒","cssSprite":"pin7","paigaNo":17},
	{"No":18,"paiName":"八筒","cssSprite":"pin8","paigaNo":18},
	{"No":19,"paiName":"九筒","cssSprite":"pin9","paigaNo":19},

	{"No":20,"paiName":"赤五索","cssSprite":"sou0","paigaNo":24},
	{"No":21,"paiName":"一索","cssSprite":"sou1","paigaNo":20},
	{"No":22,"paiName":"二索","cssSprite":"sou2","paigaNo":21},
	{"No":23,"paiName":"三索","cssSprite":"sou3","paigaNo":22},
	{"No":24,"paiName":"四索","cssSprite":"sou4","paigaNo":23},
	{"No":25,"paiName":"五索","cssSprite":"sou5","paigaNo":25},
	{"No":26,"paiName":"六索","cssSprite":"sou6","paigaNo":26},
	{"No":27,"paiName":"七索","cssSprite":"sou7","paigaNo":27},
	{"No":28,"paiName":"八索","cssSprite":"sou8","paigaNo":28},
	{"No":29,"paiName":"九索","cssSprite":"sou9","paigaNo":29},

	{"No":30,"paiName":"裏","cssSprite":"ji0","paigaNo":30},
	{"No":31,"paiName":"東","cssSprite":"ji1","paigaNo":31},
	{"No":32,"paiName":"南","cssSprite":"ji2","paigaNo":32},
	{"No":33,"paiName":"西","cssSprite":"ji3","paigaNo":33},
	{"No":34,"paiName":"北","cssSprite":"ji4","paigaNo":34},
	{"No":35,"paiName":"白","cssSprite":"ji5","paigaNo":35},
	{"No":36,"paiName":"發","cssSprite":"ji6","paigaNo":36},
	{"No":37,"paiName":"中","cssSprite":"ji7","paigaNo":37}
];
//============================================================================
//グローバル変数
//============================================================================
var tehai = new Array(37);//手牌の配列：37種
tehai = [0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0];
var red5manCount = 0;//赤5マンの数
var red5pinCount = 0;//赤5ピンの数
var red5souCount = 0;//赤5ソウの数
//============================================================================
//赤ドラの有無をチェックする処理
//============================================================================
function checkReddora(){
	//グローバル変数の初期化
	red5manCount = 0;//赤5マンの数
	red5pinCount = 0;//赤5ピンの数
	red5souCount = 0;//赤5ソウの数

	//赤五萬の有無をチェックしてカウントする
	if(tehai[0]){
		red5manCount += tehai[0];//赤五萬の牌数を格納
	}
	//赤五筒の有無をチェックしてカウントする
	if(tehai[10]){
		red5pinCount += tehai[10];//赤五筒の牌数を格納
	}
	//赤五索の有無をチェックしてカウントする
	if(tehai[20]){
		red5souCount += tehai[20];//赤五索の牌数を格納
	}
}
//============================================================================
//牌記号を出力する処理
//============================================================================
$("#PaikigouMakeBtn").click(function() {
	var paikigou;

	//MPS形式の牌記号出力する
	paikigou = makeMpsPaikigou();
	$("#paiKigou_MPS").empty().append(paikigou);

	//天鳳牌理形式（MPSZ形式）の牌記号出力する
	paikigou = makeTenhouPakigou();
	$("#paikigou_tenhou").empty().append(paikigou);
});
//============================================================================
//天鳳の牌理で使われる牌記号（MPSZ形式）を生成する関数
//============================================================================
function makeTenhouPakigou(){
	var paiFlg = 0;//マンズ・ピンズ・ソウズ・字牌の有無をチェックするフラグ
	var paikigou="";
	var i,j;

	//マンズの牌記号を生成する
	for(i=1;i<10;i++){
		//赤五萬を配置する
		if(i==5 && red5manCount==1){//red5manCountはグローバル変数
			paikigou += "0";//赤ドラ
			paiFlg = 1;//マンズが存在するのでフラグを立てる
		}
		//赤五萬以外のマンズを配置する
		for(j=1;j<tehai[i]+1;j++){
			if(!tehai[i]){continue;}
			paikigou += i;
			paiFlg = 1;//マンズが存在するのでフラグを立てる
		}
	}
	if(paiFlg){
		paikigou += "m";//末尾に付ける文字
		paiFlg = 0;//フラグのリセット
	}

	//ピンズの牌記号を生成する
	for(i=11;i<20;i++){
		//赤五筒を配置する
		if(i==15 && red5pinCount==1){//red5pinCountはグローバル変数
			paikigou += "0";//赤ドラ
			paiFlg = 1;//ピンズが存在するのでフラグを立てる
		}
		//赤五筒以外のピンズを配置する
		for(j=1;j<tehai[i]+1;j++){
			if(!tehai[i]){continue;}
			paikigou += (i-10);
			paiFlg = 1;//ピンズが存在するのでフラグを立てる
		}
	}
	if(paiFlg){
		paikigou += "p";//末尾に付ける文字
		paiFlg = 0;//フラグのリセット
	}

	//ソーズの牌記号を生成する
	for(i=21;i<30;i++){
		//赤五索を配置する
		if(i==25 && red5souCount==1){//red5souCountはグローバル変数
			paikigou += "0";//赤ドラ
			paiFlg = 1;//ソーズが存在するのでフラグを立てる
		}
		//赤五索以外のソーズを配置する
		for(j=1;j<tehai[i]+1;j++){
			if(!tehai[i]){continue;}
			paikigou += (i-20);
			paiFlg = 1;//ソーズが存在するのでフラグを立てる
		}
	}
	if(paiFlg){
		paikigou += "s";//末尾に付ける文字
		paiFlg = 0;//フラグのリセット
	}

	//字牌の牌記号を生成する
	for(i=31;i<38;i++){
		for(j=1;j<tehai[i]+1;j++){
			if(!tehai[i]){continue;}
			paikigou += (i-30);
			paiFlg = 1;//字牌が存在するのでフラグを立てる
		}
	}
	if(paiFlg){
		paikigou += "z";//末尾に付ける文字
		paiFlg = 0;//フラグのリセット
	}

	return paikigou;//牌記号を返す
}
//============================================================================
//MPS形式の牌記号を生成する関数
//============================================================================
function makeMpsPaikigou(){
	var paiFlg = 0;//マンズ・ピンズ・ソウズ・字牌の有無をチェックするフラグ
	var paikigou="";
	var i,j;

	//マンズの牌記号を生成する
	for(i=1;i<10;i++){
		//赤五萬を配置する
		if(i==5 && red5manCount==1){//red5manCountはグローバル変数
			//paikigou += "赤5";//赤ドラ
			paikigou += "r5";//赤ドラ
			paiFlg = 1;//マンズが存在するのでフラグを立てる
		}
		//赤五萬以外のマンズを配置する
		for(j=1;j<tehai[i]+1;j++){
			if(!tehai[i]){continue;}
			paikigou += i;
			paiFlg = 1;//マンズが存在するのでフラグを立てる
		}
	}
	if(paiFlg){
		paikigou += "m";//末尾に付ける文字
		paiFlg = 0;//フラグのリセット
	}

	//ピンズの牌記号を生成する
	for(i=11;i<20;i++){
		//赤五筒を配置する
		if(i==15 && red5pinCount==1){//red5pinCountはグローバル変数
			//paikigou += "赤5";//赤ドラ
			paikigou += "r5";//赤ドラ
			paiFlg = 1;//ピンズが存在するのでフラグを立てる
		}
		//赤五筒以外のピンズを配置する
		for(j=1;j<tehai[i]+1;j++){
			if(!tehai[i]){continue;}
			paikigou += (i-10);
			paiFlg = 1;//ピンズが存在するのでフラグを立てる
		}
	}
	if(paiFlg){
		paikigou += "p";//末尾に付ける文字
		paiFlg = 0;//フラグのリセット
	}

	//ソーズの牌記号を生成する
	for(i=21;i<30;i++){
		//赤五索を配置する
		if(i==25 && red5souCount==1){//red5souCountはグローバル変数
			//paikigou += "赤5";//赤ドラ
			paikigou += "r5";//赤ドラ
			paiFlg = 1;//マンズが存在するのでフラグを立てる
		}
		//赤五索以外のソーズを配置する
		for(j=1;j<tehai[i]+1;j++){
			if(!tehai[i]){continue;}
			paikigou += (i-20);
			paiFlg = 1;//ソーズが存在するのでフラグを立てる
		}
	}
	if(paiFlg){
		paikigou += "s";//末尾に付ける文字
		paiFlg = 0;//ソーズのリセット
	}

	//字牌の牌記号を生成する
	for(i=31;i<38;i++){
		for(j=1;j<tehai[i]+1;j++){
			if(!tehai[i]){continue;}

			switch (i){
				case 31:
					paikigou += "東";
					break;
				case 32:
					paikigou += "南";
					break;
				case 33:
					paikigou += "西";
					break;
				case 34:
					paikigou += "北";
					break;
				case 35:
					paikigou += "白";
					break;
				case 36:
					paikigou += "發";
					break;
				case 37:
					paikigou += "中";
					break;
			}
		}
	}

	return paikigou;//牌記号を返す
}
//============================================================================

+ paiput3.jsを開く

//============================================================================
//牌画を操作するための配列：JSON形式
//============================================================================
var paigaType = [
	{"No":0,"paiName":"一萬","cssSprite":"man1","paigaNo":1},
	{"No":1,"paiName":"二萬","cssSprite":"man2","paigaNo":2},
	{"No":2,"paiName":"三萬","cssSprite":"man3","paigaNo":3},
	{"No":3,"paiName":"四萬","cssSprite":"man4","paigaNo":4},
	{"No":4,"paiName":"赤五萬","cssSprite":"man0","paigaNo":0},
	{"No":5,"paiName":"五萬","cssSprite":"man5","paigaNo":5},
	{"No":6,"paiName":"六萬","cssSprite":"man6","paigaNo":6},
	{"No":7,"paiName":"七萬","cssSprite":"man7","paigaNo":7},
	{"No":8,"paiName":"八萬","cssSprite":"man8","paigaNo":8},
	{"No":9,"paiName":"九萬","cssSprite":"man9","paigaNo":9},

	{"No":10,"paiName":"一筒","cssSprite":"pin1","paigaNo":11},
	{"No":11,"paiName":"二筒","cssSprite":"pin2","paigaNo":12},
	{"No":12,"paiName":"三筒","cssSprite":"pin3","paigaNo":13},
	{"No":13,"paiName":"四筒","cssSprite":"pin4","paigaNo":14},
	{"No":14,"paiName":"赤五筒","cssSprite":"pin0","paigaNo":10},
	{"No":15,"paiName":"五筒","cssSprite":"pin5","paigaNo":15},
	{"No":16,"paiName":"六筒","cssSprite":"pin6","paigaNo":16},
	{"No":17,"paiName":"七筒","cssSprite":"pin7","paigaNo":17},
	{"No":18,"paiName":"八筒","cssSprite":"pin8","paigaNo":18},
	{"No":19,"paiName":"九筒","cssSprite":"pin9","paigaNo":19},

	{"No":20,"paiName":"一索","cssSprite":"sou1","paigaNo":21},
	{"No":21,"paiName":"二索","cssSprite":"sou2","paigaNo":22},
	{"No":22,"paiName":"三索","cssSprite":"sou3","paigaNo":23},
	{"No":23,"paiName":"四索","cssSprite":"sou4","paigaNo":24},
	{"No":24,"paiName":"赤五索","cssSprite":"sou0","paigaNo":20},
	{"No":25,"paiName":"五索","cssSprite":"sou5","paigaNo":25},
	{"No":26,"paiName":"六索","cssSprite":"sou6","paigaNo":26},
	{"No":27,"paiName":"七索","cssSprite":"sou7","paigaNo":27},
	{"No":28,"paiName":"八索","cssSprite":"sou8","paigaNo":28},
	{"No":29,"paiName":"九索","cssSprite":"sou9","paigaNo":29},

	{"No":30,"paiName":"裏","cssSprite":"ji0","paigaNo":30},
	{"No":31,"paiName":"東","cssSprite":"ji1","paigaNo":31},
	{"No":32,"paiName":"南","cssSprite":"ji2","paigaNo":32},
	{"No":33,"paiName":"西","cssSprite":"ji3","paigaNo":33},
	{"No":34,"paiName":"北","cssSprite":"ji4","paigaNo":34},
	{"No":35,"paiName":"白","cssSprite":"ji5","paigaNo":35},
	{"No":36,"paiName":"發","cssSprite":"ji6","paigaNo":36},
	{"No":37,"paiName":"中","cssSprite":"ji7","paigaNo":37}
];

//============================================================================
//グローバル変数
//============================================================================
var PaiCount = 0;	//入力された牌の枚数
var PaiNo = [];//牌画表示用
//============================================================================
//牌画を挿入する関数
//============================================================================
$("span","#haiga").on('click', function(event){
	var paiCountMax = 14;//手牌最大数
	var paiNo = $(this).attr("name"); //牌の番号を取得
	var paiName = $(this).attr("class"); //CSSスプライト用のクラス名を取得
	if(PaiCount<paiCountMax){
		if(tehai[paiNo]==4||tehai[5]+tehai[0]==4||tehai[15]+tehai[10]==4||tehai[25]+tehai[20]==4){
			alert("同種牌を5枚以上入力することはできません。");
			return false;
		}else{
			if(paiNo===0&&red5manCount==1||paiNo==10&&red5pinCount==1||paiNo==20&&red5souCount==1){
				alert("赤ドラは各色1枚までです。");
				return false;
			}
			tehai[paiNo] ++;//手牌
			if(paiNo%10===0){checkReddora();}//赤ドラのチェック
			//PaiNo[PaiCount] = paiNo;//表示用手牌
			PaiNo[PaiCount] = paiType[paiNo].paigaNo;//表示用手牌
			paiSet(PaiCount,paiName);//牌画を表示させる関数を呼び出す
			PaiCount ++;
			$("#paikazu").empty().append(PaiCount);
		}
	}else{
		alert("これ以上は牌を置けません。");
		return false;
	}
});
//============================================================================
//牌を配置する関数
//============================================================================
function paiSet(i,paiName) {
	paiga = "<span class=\"" + paiName + "\"></span>";//cssスプライトの牌画を配置
	var putNo = "#pai" + i;
	$(putNo ,"#paisu").append(paiga);
	return;
}
//============================================================================
//任意の牌を1つ消す処理
//============================================================================
$("td","#paisu").click(function() {
var tdNo = $(this).attr("id"); //牌画を配置したセルのIDを取得
	var paikazu = PaiNo.length;
	if(paikazu === 0){
		alert("これ以上牌を消せません");
		return;
	}else{
		tdNo = tdNo.slice(3,5);//削って番号のみにする
		if(PaiNo[tdNo]==4){red5manCount--;}
		if(PaiNo[tdNo]==14){red5pinCount--;}
		if(PaiNo[tdNo]==24){red5souCount--;}
		tehai[paigaType[PaiNo[tdNo]].paigaNo] --;//手牌
		if(tdNo < paikazu){
			$("td","#paisu").empty();
			PaiNo.splice(tdNo,1);
			for(var i=0;i<paikazu -1 ;i++){
				paiSet(i,paigaType[PaiNo[i]].cssSprite);
			}
		}
		PaiCount --;
		$("#paikazu").empty().append(PaiCount);
	}
});
//============================================================================
//手牌を並べ替える処理
//============================================================================
$("#PaiSortBtn").on('click', function(event){
	paiSort();
});
//============================================================================
//牌を並べ替える関数
//============================================================================
function paiSort() {
	//手牌を並び替える
	var paikazu = PaiNo.length;
	PaiNo.sort(function(b,c){
		return b - c;
	});
	$("td","#paisu").empty();
	for (var i = 0;i<paikazu ;i++){
		paiSet(i,paigaType[PaiNo[i]].cssSprite);
	}
	return;
}
//============================================================================
//リセット処理
//============================================================================
$("#PaiClreaBtn").on('click', function(event){
	resetTehai();
});
//============================================================================
//リセット関数
//============================================================================
function resetTehai(){
	tehai = [0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0];
	PaiNo.length = 0;//牌を格納した配列の要素をすべて削除
	PaiCount = 0;//カウントのリセット
	$("#paikazu").empty().append("0");
	$("td","#paisu").empty();
	$("#paiKigou_MPS").empty();
	$("#paikigou_tenhou").empty();
	red5manCount = 0;//赤5マンの数
	red5pinCount = 0;//赤5ピンの数
	red5souCount = 0;//赤5ソウの数
}
//============================================================================

+ program17.cssを開く

@charset "utf-8";

#haiga > span, #paisu td > span{
	background-color:transparent;
	background-image:url(../images/pai.png);
	background-repeat:no-repeat;
	background-attachment:scroll;
	display:inline-block;
}

.man1{background-position:0px 0px;height:47px;width:31px;}
.man2{background-position:-31px 0px;height:47px;width:31px;}
.man3{background-position:-62px 0px;height:47px;width:31px;}
.man4{background-position:-93px 0px;height:47px;width:31px;}
.man5{background-position:-124px 0px;height:47px;width:31px;}
.man6{background-position:-155px 0px;height:47px;width:31px;}
.man7{background-position:-186px 0px;height:47px;width:31px;}
.man8{background-position:-217px 0px;height:47px;width:31px;}
.man9{background-position:-248px 0px;height:47px;width:31px;}
.man0{background-position:-279px 0px;height:47px;width:31px;}
.pin1{background-position:0px -47px;height:47px;width:31px;}
.pin2{background-position:-31px -47px;height:47px;width:31px;}
.pin3{background-position:-62px -47px;height:47px;width:31px;}
.pin4{background-position:-93px -47px;height:47px;width:31px;}
.pin5{background-position:-124px -47px;height:47px;width:31px;}
.pin6{background-position:-155px -47px;height:47px;width:31px;}
.pin7{background-position:-186px -47px;height:47px;width:31px;}
.pin8{background-position:-217px -47px;height:47px;width:31px;}
.pin9{background-position:-248px -47px;height:47px;width:31px;}
.pin0{background-position:-279px -47px;height:47px;width:31px;}
.sou1{background-position:0px -94px;height:47px;width:31px;}
.sou2{background-position:-31px -94px;height:47px;width:31px;}
.sou3{background-position:-62px -94px;height:47px;width:31px;}
.sou4{background-position:-93px -94px;height:47px;width:31px;}
.sou5{background-position:-124px -94px;height:47px;width:31px;}
.sou6{background-position:-155px -94px;height:47px;width:31px;}
.sou7{background-position:-186px -94px;height:47px;width:31px;}
.sou8{background-position:-217px -94px;height:47px;width:31px;}
.sou9{background-position:-248px -94px;height:47px;width:31px;}
.sou0{background-position:-279px -94px;height:47px;width:31px;}
.ji1{background-position:0px -141px;height:47px;width:31px;}
.ji2{background-position:-31px -141px;height:47px;width:31px;}
.ji3{background-position:-62px -141px;height:47px;width:31px;}
.ji4{background-position:-93px -141px;height:47px;width:31px;}
.ji5{background-position:-124px -141px;height:47px;width:31px;}
.ji6{background-position:-155px -141px;height:47px;width:31px;}
.ji7{background-position:-186px -141px;height:47px;width:31px;}
.ji0{background-position:-217px -141px;height:47px;width:31px;}

#paisu{
	height: 56px;
}


@media (max-width: 768px) {
	#haiga > span, #paisu td > span{
		background-color:transparent;
		background-image:url(../images/pai4.png);
		background-repeat:no-repeat;
		background-attachment:scroll;
		display:inline-block;
	}

	.man1{background-position:0px 0px;height:31px;width:23px;}
	.man2{background-position:-23px 0px;height:31px;width:23px;}
	.man3{background-position:-46px 0px;height:31px;width:23px;}
	.man4{background-position:-69px 0px;height:31px;width:23px;}
	.man5{background-position:-92px 0px;height:31px;width:23px;}
	.man6{background-position:-115px 0px;height:31px;width:23px;}
	.man7{background-position:-138px 0px;height:31px;width:23px;}
	.man8{background-position:-161px 0px;height:31px;width:23px;}
	.man9{background-position:-184px 0px;height:31px;width:23px;}
	.man0{background-position:-207px 0px;height:31px;width:23px;}
	.pin1{background-position:0px -31px;height:31px;width:23px;}
	.pin2{background-position:-23px -31px;height:31px;width:23px;}
	.pin3{background-position:-46px -31px;height:31px;width:23px;}
	.pin4{background-position:-69px -31px;height:31px;width:23px;}
	.pin5{background-position:-92px -31px;height:31px;width:23px;}
	.pin6{background-position:-115px -31px;height:31px;width:23px;}
	.pin7{background-position:-138px -31px;height:31px;width:23px;}
	.pin8{background-position:-161px -31px;height:31px;width:23px;}
	.pin9{background-position:-184px -31px;height:31px;width:23px;}
	.pin0{background-position:-207px -31px;height:31px;width:23px;}
	.sou1{background-position:0px -62px;height:31px;width:23px;}
	.sou2{background-position:-23px -62px;height:31px;width:23px;}
	.sou3{background-position:-46px -62px;height:31px;width:23px;}
	.sou4{background-position:-69px -62px;height:31px;width:23px;}
	.sou5{background-position:-92px -62px;height:31px;width:23px;}
	.sou6{background-position:-115px -62px;height:31px;width:23px;}
	.sou7{background-position:-138px -62px;height:31px;width:23px;}
	.sou8{background-position:-161px -62px;height:31px;width:23px;}
	.sou9{background-position:-184px -62px;height:31px;width:23px;}
	.sou0{background-position:-207px -62px;height:31px;width:23px;}
	.ji1{background-position:0px -93px;height:31px;width:23px;}
	.ji2{background-position:-23px -93px;height:31px;width:23px;}
	.ji3{background-position:-46px -93px;height:31px;width:23px;}
	.ji4{background-position:-69px -93px;height:31px;width:23px;}
	.ji5{background-position:-92px -93px;height:31px;width:23px;}
	.ji6{background-position:-115px -93px;height:31px;width:23px;}
	.ji7{background-position:-138px -93px;height:31px;width:23px;}
	.ji0{background-position:-161px -93px;height:31px;width:23px;}

	#paisu{
		height: 42px;
	}
}

@media (max-width: 360px) {
	#haiga > span, #paisu td > span{
		background-color:transparent;
		background-image:url(../images/pai3.png);
		background-repeat:no-repeat;
		background-attachment:scroll;
		display:inline-block;
	}

	.man1{background-position:0px 0px;height:26px;width:19px;}
	.man2{background-position:-19px 0px;height:26px;width:19px;}
	.man3{background-position:-38px 0px;height:26px;width:19px;}
	.man4{background-position:-57px 0px;height:26px;width:19px;}
	.man5{background-position:-76px 0px;height:26px;width:19px;}
	.man6{background-position:-95px 0px;height:26px;width:19px;}
	.man7{background-position:-114px 0px;height:26px;width:19px;}
	.man8{background-position:-133px 0px;height:26px;width:19px;}
	.man9{background-position:-152px 0px;height:26px;width:19px;}
	.man0{background-position:-171px 0px;height:26px;width:19px;}
	.pin1{background-position:0px -26px;height:26px;width:19px;}
	.pin2{background-position:-19px -26px;height:26px;width:19px;}
	.pin3{background-position:-38px -26px;height:26px;width:19px;}
	.pin4{background-position:-57px -26px;height:26px;width:19px;}
	.pin5{background-position:-76px -26px;height:26px;width:19px;}
	.pin6{background-position:-95px -26px;height:26px;width:19px;}
	.pin7{background-position:-114px -26px;height:26px;width:19px;}
	.pin8{background-position:-133px -26px;height:26px;width:19px;}
	.pin9{background-position:-152px -26px;height:26px;width:19px;}
	.pin0{background-position:-171px -26px;height:26px;width:19px;}
	.sou1{background-position:0px -52px;height:26px;width:19px;}
	.sou2{background-position:-19px -52px;height:26px;width:19px;}
	.sou3{background-position:-38px -52px;height:26px;width:19px;}
	.sou4{background-position:-57px -52px;height:26px;width:19px;}
	.sou5{background-position:-76px -52px;height:26px;width:19px;}
	.sou6{background-position:-95px -52px;height:26px;width:19px;}
	.sou7{background-position:-114px -52px;height:26px;width:19px;}
	.sou8{background-position:-133px -52px;height:26px;width:19px;}
	.sou9{background-position:-152px -52px;height:26px;width:19px;}
	.sou0{background-position:-171px -52px;height:26px;width:19px;}
	.ji1{background-position:0px -78px;height:26px;width:19px;}
	.ji2{background-position:-19px -78px;height:26px;width:19px;}
	.ji3{background-position:-38px -78px;height:26px;width:19px;}
	.ji4{background-position:-57px -78px;height:26px;width:19px;}
	.ji5{background-position:-76px -78px;height:26px;width:19px;}
	.ji6{background-position:-95px -78px;height:26px;width:19px;}
	.ji7{background-position:-114px -78px;height:26px;width:19px;}
	.ji0{background-position:-133px -78px;height:26px;width:19px;}

	#paisu{
		height: 36px;
	}
}


#haiga{
  background-color:#173B0B;
  padding:5px 15px 3px 15px;
  margin-bottom:5px;
  color:#fff;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;}


#pai0,#pai1,#pai2,#pai3{width:0;}

table.style{margin-left:10px;}


.style > thead > tr > td {
  vertical-align: bottom;
  border-bottom: 5px solid #ddd;
}

サイト内関連記事

#17 牌記号を生成する

プログラムの解説と実行

実行してみよう

JavaScriptソースコード

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

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

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

ウザク式麻雀牌効率学習

凍牌〜裏レート麻雀闘牌録〜

麻雀放浪記： 1 (アクションコミックス)

「SUNPIE」ひらがな麻雀ひらがなじゃん言葉作りゲーム麻雀牌 27mm 脳トレ&語彙力アップ 2人以上日本語説明書付収納ケース付き携帯便利

ビバリー(BEVERLY) 【マンガで分かる説明書付】マスター麻雀 BOG-011 7歳から

大洋技研(TAIYO GIKEN) ジャンクマット牌セット COMPASS&HAYAHAYA付き

大洋技研(TAIYO GIKEN) 麻雀セットジャンクマットプライムギア

麻雀闘龍 - 初心者から楽しめる無料麻雀ゲーム

理麗麻雀７～最強女流ペア決定戦～

ウザク式麻雀学習牌効率

理麗麻雀８～最強女流ペア決定戦～