超初心者プログラマーの平岡です(本当です)．
ネットではAKRという名前をよく使っていて，本業は予備校講師で，おいしい数学 という，月間10万PV程の高校数学のサイトを運営しています．
さて，Twitter上で，サイゼリヤ1000円ガチャというサイトが流れてきて，これならプログラミング勉強中(JavaScriptを勉強して半年)の私でも作れるのではないか？？と思い，思いきって大好きな吉野家バージョンをネイティブのJavaScriptのみで作ってみることにしました．
それが吉野家1000円ガチャです。
JavaScriptを勉強して半年の私のコードに大して価値があると思えないので，イートインのHTMLとJavaScriptのコードを全公開します．
なお，初心者なので，もっと上手くコードが書ける可能性大ですし，この後コードを変える可能性もありますが，是非私に言って頂けると嬉しいです。
yoshinoya1000-eatin.html
<h1 style="text-align: center; font-size: x-large">吉野家1000円ガチャ</h1>
<p style="text-align: center; font-size: large"><b>イートイン</b></p>
<p style="text-align: center"><a href="yoshinoya1000-eatin.html" class="btn-square">イートインガチャを回す</a></p>
<div id="result" class="waku" style="background-color: #FFE7BF"></div>
<p style="text-align: center">
<a class="share-7" id="getResult" >
<i class="fab fa-twitter"></i>
</a>
</p>
<script src="jsfile/gacha-yo-eatin.js"></script>
<br><br>
<p style="text-align: center; font-size: small"><a href="yoshinoya1000.html">吉野家1000円ガチャ</a></p>
<p style="text-align: center; font-size: small">respect for <a href="https://saizeriya-1000yen.herokuapp.com" target="_blank">サイゼリア1000円ガチャ</a></p>
<p style="text-align: center; font-size: small">made by <a href="https://twitter.com/akr_trader" target="_blank">AKR</a></p>
上のCSSのコードは割愛します．
続いてJavaScriptです．
gacha-yo-eatin.js
let getResult = document.getElementById('getResult');
let result =document.getElementById('result');
var menu = {
"牛丼(小盛)" : 332,
"牛丼(並盛)" : 352,
"牛丼(アタマの大盛)" : 452,
"牛丼(大盛)" : 452,
"牛丼(特盛)" : 632,
"牛丼(超特盛)" : 722,
"豚丼(小盛)" : 318,
"豚丼(並盛)" : 338,
"豚丼(アタマの大盛)" : 438,
"豚丼(大盛)" : 498,
"豚丼(特盛)" : 618,
"豚丼(超特盛)" : 708,
"牛カルビ丼(小盛)" : 528,
"牛カルビ丼(並盛)" : 548,
"牛カルビ丼(アタマの大盛)" : 648,
"牛カルビ丼(大盛)" : 708,
"牛カルビ丼(特盛)" : 828,
"牛カルビ丼(超特盛)" : 918,
"牛皿定食(並盛)" : 498,
"牛皿定食(大盛)" : 598,
"牛皿定食(特盛)" : 698,
"牛カルビ定食" : 598,
"炙り塩鯖定食" : 598,
"鯖みそ定食" : 598,
"牛鮭定食" : 548,
"豚鮭定食" : 548,
"鰻重(一枚盛)" : 788,
"スパイシーカレー(並盛)" : 328,
"スパイシーカレー(大盛)" : 418,
"チキンスパイシーカレー(並盛)" : 514,
"チキンスパイシーカレー(大盛)" : 604,
ライザップ牛サラダ: 500,
ライザップ牛サラダエビアボガド: 600,
とん汁: 186,
しじみ汁: 158,
あさり汁: 158,
味噌汁: 65,
生野菜サラダ: 102,
ポテトサラダ: 130,
ごぼうサラダ: 130,
エビアボガドサラダ: 198,
牛小鉢: 167,
玉子: 65,
半熟玉子: 75,
ねぎ玉子: 102,
チーズ: 102,
お新香: 102,
キムチ: 102,
鮭: 195,
ご飯: 139,
のり: 65,
のり: 65,
納豆: 84,
"牛皿(並盛)" : 302,
"牛皿(大盛)" : 402,
"牛皿(特盛)" : 502,
"豚皿(並盛)" : 288,
"豚皿(大盛)" : 388,
"豚皿(特盛)" : 488,
"牛カルビ皿" : 458,
"鰻皿(一枚盛)" : 698,
"瓶ビール" : 417,
"冷酒" : 315,
}
var menucalorie = {
"牛丼(小盛)" : 488,
"牛丼(並盛)" : 652,
"牛丼(アタマの大盛)" : 741,
"牛丼(大盛)" : 863,
"牛丼(特盛)" : 1030,
"牛丼(超特盛)" : 1169,
"豚丼(小盛)" : 530,
"豚丼(並盛)" : 707,
"豚丼(アタマの大盛)" : 797,
"豚丼(大盛)" : 931,
"豚丼(特盛)" : 1172,
"豚丼(超特盛)" : 1319,
"牛カルビ丼(小盛)" : 618,
"牛カルビ丼(並盛)" : 802,
"牛カルビ丼(アタマの大盛)" : 1019,
"牛カルビ丼(大盛)" : 1136,
"牛カルビ丼(特盛)" : 1327,
"牛カルビ丼(超特盛)" : 1502,
"牛皿定食(並盛)" : 739,
"牛皿定食(大盛)" : 797,
"牛皿定食(特盛)" : 968,
"牛カルビ定食" : 966,
"炙り塩鯖定食" : 830,
"鯖みそ定食" : 895,
"牛鮭定食" : 712,
"豚鮭定食" : 800,
"鰻重(一枚盛)" : 670,
"スパイシーカレー(並盛)" : 539,
"スパイシーカレー(大盛)" : 691,
"チキンスパイシーカレー(並盛)" : 747,
"チキンスパイシーカレー(大盛)" : 898,
ライザップ牛サラダ: 404,
ライザップ牛サラダエビアボガド: 430,
とん汁: 176,
しじみ汁: 42,
あさり汁: 51,
味噌汁: 20,
生野菜サラダ: 25,
ポテトサラダ: 122,
ごぼうサラダ: 70,
エビアボガドサラダ: 83,
牛小鉢: 130,
玉子: 76,
半熟玉子: 76,
ねぎ卵: 103,
チーズ: 98,
お新香: 13,
キムチ: 26,
鮭: 133,
ご飯: 386,
のり: 5,
のり: 5,
納豆: 98,
"牛皿(並盛)" : 257,
"牛皿(大盛)" : 315,
"牛皿(特盛)" : 486,
"豚皿(並盛)" : 320,
"豚皿(大盛)" : 394,
"豚皿(特盛)" : 634,
"牛カルビ皿" : 416,
"鰻皿(一枚盛)" : 242,
"瓶ビール" : 215,
"冷酒" : 185,
}
var menulength = 0;
var menucalorielength = 0;
var ary = [];
var arycalorie = [];
for(i in menu){
menulength++;
ary.push(menu[i]);
}
for(i in menucalorie){
menucalorielength++;
arycalorie.push(menucalorie[i]);
}
var rand = Math.floor(Math.random() * menulength);
var key = Object.keys(menu);
let total = ary[rand];
let totalcalorie = arycalorie[rand];
var key1 = key[rand];
result.innerHTML = '<p style="text-align: center"><b>イートインガチャ結果</b></p><p><strong style="font-size: large">' + key[rand] + '</strong>：'+ ary[rand] + '円 ' + arycalorie[rand] + 'kcal</p>';
while (total <= 1700){
var rand2 = Math.floor(Math.random() * menulength);
total = total + ary[rand2];
totalcalorie = totalcalorie + arycalorie[rand2];
key1 = key1 + '，' + key[rand2];
if (total <= 844) {
document.getElementById('result').innerHTML += '<p><strong style="font-size: large">' + key[rand2] + '</strong>：'+ ary[rand2] + '円 ' + arycalorie[rand2] + 'kcal</p>';
} else if (total <= 909){
document.getElementById('result').innerHTML += '<p><strong style="font-size: large">' + key[rand2] + '</strong>：'+ ary[rand2] + '円 ' + arycalorie[rand2] + 'kcal</p>';
break;
} else {
total = total - ary[rand2];
totalcalorie = totalcalorie - arycalorie[rand2];
key1 = key1.replace('，' + key[rand2], '');
}
}
document.getElementById('result').innerHTML += '<br><p style="text-align: center">税抜合計：' + total + '円<br><b>税込合計：' + Math.floor(total *1.1) + '円<br>カロリー合計：' + totalcalorie + 'kcal </b></p>';
getResult.addEventListener('click',function twitText() {
var s, url;
s = "吉野家1000円ガチャの結果は………" + key1 + " で税込合計" + Math.floor(total *1.1) + "円で，カロリーの合計は" + totalcalorie + "kcal です。";
url = 'hiraocafe.com/yoshinoya1000.html';
if (s != "") {
if (s.length > 140) {
//文字数制限
alert("テキストが140字を超えています");
} else {
//投稿画面を開く
url = "http://twitter.com/share?url=" + escape(url) + "&text=" + s;
window.open(url, "_blank", "width=600,height=300");
}
}
}
)
解説します．
まず，連想配列を使って，吉野家の商品の名前と値段，名前とカロリーが対応したものを用意します。
この値段とカロリーを順に配列に格納していきます。
乱数を使って，ランダムに番号を選ぶようにし，let total = ary[rand];とlet totalcalorie = arycalorie[rand];で，最初の商品の値段とカロリーをそれぞれ，total と totalcalorie に代入します．同時にinnnerHTMLを使って，結果をHTMLに出力します．
その次はwhile文です．totalが1700以下で繰り返すとありますが，1700でなくていいです．大事なのは，税抜844円以下で，ランダムに商品を選ぶことを繰り返し，909円以下であればbreakで繰り返し処理を中止します。そして909より上であれば，最後に追加した商品の値段を引き，replaceで名前を削除することです．
なぜ税抜845円以上909円以下で中止するかというと，一番安い商品が税抜65円(例えば味噌汁)なので，この価格だと味噌汁すら買えません．なぜ買えないかというと，消費税が10%なので税抜価格だと合計909円までが限界だからです．
最後に苦労したのは，ガチャの結果を，twitterに引き渡すことです。
実用的には，玉子関連が多く出ますし，定食が出て味噌汁が出るのも避けたいので，のりを少し多めに登録したのがポイントです。
以上です．吉野家1000円ガチャは，初心者がプログラミング(特にwhile文や，関数，変数の置き方)のいい練習になると思います。