ESで作る「ガチャ」HTMLタグ "<cff-gatcha/>"！「打ち初め」したらプロコンに！

2022年、今年の「打ち初め」は HTMLタグ「ガチャ」。

HTMLの <head/> あたりで

<script type="module" src="https://code4fukui.github.io/Gatcha-tag/gatcha.js"></script>

しておけば、

<cff-gatcha proportion="0.33" ongatcha="doSomething();"></cff-gatcha>

で利用可能。

例えば、こんな「ガチャみくじ」なら、

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script type="module" src="gatcha.js"></script>
    <script>
        const COUNT = 10;
        let count = COUNT;

        function おみくじする(elmGatcha){
            if(0 < count){
                alert(["小吉","中吉","大吉"][Math.floor(Math.random()*3)]);
                elmGatcha.proportion = (--count)/COUNT;
            }else{
                alert("おみくじは空っぽ");
            }
        }
    </script>
</head>

<body>
    <cff-gatcha proportion="1.00" ongatcha="おみくじする(this);"></cff-gatcha>
</body>

</html>

こんな感じ。

Code for FUKUI から MITライセンスでどうぞ。