【JavaScript】カラフルなオリキャラをランダムに描画する

こんにちはです。あっちのそららです。
前回、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラを描画しました。

acchinosorara.hatenablog.jp

今回はそのアレンジで、大量のオリキャラをランダムに描画するコードを書いてみました。

「Result」で確認、右下の「Rerun」で再描画できます。描画はランダムなので、毎回違った結果になります。

JavaScriptで乱数を生成、かつ値が被らないようにし、下記内容をランダムに設定しています。

• サイズ（0.5倍 ～ 1.5倍）
• 横位置（-50％ ～ 50％）
• 縦位置（-50％ ～ 50％）
• 色（9色）

HTMLは、オリキャラ1体分のみ記述し、ループ処理で任意の数（今回は9体分）だけ複製しています。

後述の乱数によって位置に偏りが出ないよう、複製したHTMLは、グリッド内に入れています。この位置を基準に、個々のオリキャラを何％移動するかを設定します。

横位置、縦位置を決めるための乱数（x・y）をそれぞれ生成します。
例えば「x = 10」「y = -30」になった場合、右に10％、下に30％移動します。


使用する色を、配列「colorList」にまとめて入れておきます。配列は、中のデータを連番で管理できるので、乱数と相性がよさそうです。

色数を上限とした乱数（color）を生成します。今回は9色なので、生成される乱数は0～8となります（JavaScriptでは、要素をカウントする場合、0から始まります）。
例えば、乱数が「5」になった場合、色は配列の5（水色）となります。

設計を考えるのが大変でしたが、ミニゲームを作っているような濃厚なひと時でした。

ChatGPT使わない縛り。