麻雀のカウント
選んだ麻雀牌を半透明にして残り牌を管理するツール
1F000 🀀 Mahjong Tile East Wind 東 1F001 🀁 Mahjong Tile South Wind 南 1F002 🀂 Mahjong Tile West Wind 西 1F003 🀃 Mahjong Tile North Wind 北 1F004 🀄 Mahjong Tile Red Dragon 中 1F005 🀅 Mahjong Tile Green Dragon 發 1F006 🀆 Mahjong Tile White Dragon 白 1F007 🀇 Mahjong Tile One Of Characters 一萬 1F008 🀈 Mahjong Tile Two Of Characters 二萬 1F009 🀉 Mahjong Tile Three Of Characters 三萬 1F00A 🀊 Mahjong Tile Four Of Characters 四萬 1F00B 🀋 Mahjong Tile Five Of Characters 五萬 1F00C 🀌 Mahjong Tile Six Of Characters 六萬 1F00D 🀍 Mahjong Tile Seven Of Characters 七萬 1F00E 🀎 Mahjong Tile Eight Of Characters 八萬 1F00F 🀏 Mahjong Tile Nine Of Characters 九萬 1F010 🀐 Mahjong Tile One Of Bamboos 一筒 1F011 🀑 Mahjong Tile Two Of Bamboos 二筒 1F012 🀒 Mahjong Tile Three Of Bamboos 三筒 1F013 🀓 Mahjong Tile Four Of Bamboos 四筒 1F014 🀔 Mahjong Tile Five Of Bamboos 五筒 1F015 🀕 Mahjong Tile Six Of Bamboos 六筒 1F016 🀖 Mahjong Tile Seven Of Bamboos 七筒 1F017 🀗 Mahjong Tile Eight Of Bamboos 八筒 1F018 🀘 Mahjong Tile Nine Of Bamboos 九筒 1F019 🀙 Mahjong Tile One Of Circles 一索 1F01A 🀚 Mahjong Tile Two Of Circles 二索 1F01B 🀛 Mahjong Tile Three Of Circles 三索 1F01C 🀜 Mahjong Tile Four Of Circles 四索 1F01D 🀝 Mahjong Tile Five Of Circles 五索 1F01E 🀞 Mahjong Tile Six Of Circles 六索 1F01F 🀟 Mahjong Tile Seven Of Circles 七索 1F020 🀠 Mahjong Tile Eight Of Circles 八索 1F021 🀡 Mahjong Tile Nine Of Circles 九索
萬子
筒子
索子
view source
JavaScript
var text = $('#text').text();
$('#text').hide();
var lines = text.split("\n");
console.log(lines);
var tiles = [];
lines.pop();
lines.forEach(function(v){
var rows = v.split('\t');
var unicode = rows[0];
var text = rows[1];
var name = rows[2];
var kanji = rows[3];
tiles.push({
unicode:unicode,
text:text,
name:name,
kanji:kanji,
});
});
console.log(tiles);
var wrap = $('<div>').addClass('table');
$('#demo').append(wrap);
var setI = function(ele, n){
var is = ele.find('i');
is.remove();
for(i=0;i<n;i++){
var $i = $('<i>');
ele.append($i);
}
}
tiles.forEach(function(v, i){
var a = $('<a>',{title:v.kanji+' '+v.name+' '+v.unicode}).text(v.text);
if(i===7 || i=== 16|| i=== 25){
wrap.append($('<br>'));
}
setI(a,4);
a.on('click', function(){
var a = $(this);
var is = $(this).find('i');
var n = is.length;
n--;
if(n<0){
n=4;
}
setI(a,n);
if(n===0){
$(this).addClass('clicked');
} else {
$(this).removeClass('clicked');
}
});
wrap.append(a);
});
var btn = $('<button>').text('reset');
btn.on('click', function(){
var aa = $('.table a');
aa.removeClass('clicked');
aa.each(function(){
var a = $(this);
setI(a,4);
});
});
wrap.append(btn);
CSS
#cards{
font-size:7.5vw;
}
.table{
margin:4vh auto;
user-select:none;
}
.table a{
display:inline-block;
height:18vh;
line-height: 18vh;
width:10vw;
font-size:10vw;
text-align:center;
position:relative;
top:0;
left:0;
padding-bottom:2%;
pointer:cursor;
}
.table a:hover{
background-color:#ccc;
}
.table a.clicked{
opacity:0.1;
}
.table a.red{
color:#f00;
}
.table i{
position:absolute;
bottom:10%;
width:10%;
height:10%;
border-radius:50%;
border:#000 4px solid;
background-color:#a00;
z-index:2;
}
i:nth-child(1){
left:20%;
background-color:#200;
}
i:nth-child(2){
left:40%;
background-color:#600;
}
i:nth-child(3){
left:60%;
background-color:#a00;
}
i:nth-child(4){
left:80%;
background-color:#f00;
}
button{
height:8vh;
width:80vw;
}
h2 a{
font-size:18px;
}
h3{
display:none;
}
@media (max-width: 640px) {
.table a{
width:10vw;
font-size:10vw;
height:9vh;
line-height: 9vh;
}
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-game-mahjong/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。