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ライセンス でどうぞ。
新年の「打ち初め」したら、ぜひ PCNこどもプロコン2022 に応募しよう、応募締め切りは 2022/01/11 23:59!