日本語のコメント行みたいなコードで抽選WEBアプリを書いて装飾を入れた

前回つくった抽選プログラムを元に装飾をしました。日本語プログラミング言語「なでしこ」を使って、抽選する数字から、当選者の数字をグリーンバックで、「効果音ラボ」さんの和太鼓の音を鳴らしながら表示。最後に、銅鑼の音を出しながらリスト表示。

このWEBページの簡易エディタに下のソースコードを貼り付けて「実行」ボタンを押すだけでOK！OBS STUDIOなどの配信アプリのクロマキーを使って背景を透過できます。
やはり、シンプルで、何をしているのか分かりやすいのが良いですよね。

さて、本日大きめな仕事が一区切りつきました。
次回はドラム関係の話に戻ります！

なでしこ3簡易エディタ - 日本語プログラミング言語「なでしこ3」

#160名くらいまでの当選者を決めるための抽選機
#初期値の設定
抽選応募者数　=　200
当選者数　=　50
表示待機　=　1
背景色　=　緑色
文字色　=　黒色
和太鼓　=　「https://soundeffect-lab.info/sound/anime/mp3/drum-japanese1.mp3」
銅鑼　=　「https://soundeffect-lab.info/sound/anime/mp3/ban1.mp3」

全描画クリア。
[500, 340]のキャンバス作成して、描画用に代入。

もし、抽選応募者数 <= 当選者数 ならば
背景色 に塗色設定
[0, 0, 500, 340]へ四角描画。

文字色 に塗色設定
「bold 72px serif」に描画フォント設定。

[20,185]へ「全員当選です。」を文字描画。
A= 銅鑼 をオーディオ開く。
Aをオーディオ再生。

違えば
応募者配列 = 1から抽選応募者数までの配列連番作成。
応募者配列を配列シャッフル。
応募者配列の1...当選者数を配列参照。
それを配列数値ソート。
それを表示値に代入。

#当選者を1つずつ描画

表示値を反復

背景色 に塗色設定
[0, 0, 500, 340]へ四角描画。

文字色 に塗色設定
「bold 200px serif」に描画フォント設定。

もし、それ =< 9　ならば
　[185,240]へそれを文字描画。
　A= 和太鼓 をオーディオ開く。
Aをオーディオ再生。

違えば
もし、それ =<99　ならば
[135,240]へそれを文字描画。
A = 和太鼓をオーディオ開く。
Aをオーディオ再生。

違えば。
　[85,240]へそれを文字描画。
A = 和太鼓 をオーディオ開く。
Aをオーディオ再生。
ここまで。　

ここまで。

　　表示待機 秒待つ
　　描画クリア。

ここまで。

背景色 に塗色設定
[0, 0, 500, 340]へ四角描画。
#2秒待つ。

#当選者一覧を表示

全描画クリア。
描画用の「display」に「none」をDOMスタイル設定。

表示値のテキストエリア作成して、当選者一覧に代入。

当選者一覧に{
"幅":"490px",
"高さ":"310px",
"背景色": "白色",
"文字サイズ":"24px",
"余白":"5px",
}をDOMスタイル一括設定。

A= 銅鑼 をオーディオ開く。
Aをオーディオ再生。
ここまで。