【JavaScript】あたみん声かけゲーム（？）を作りました！

あたみんに声かけができるプログラム！

まずは使ってみてください。言葉を入れて「声かけ」ボタンを押すと、あたみんの顔が3種類のうちどれかに変化します。

メッセージをお願いします！

声かけ

九月場所、一番株を上げた熱海富士！

熱海富士の勢い、すごかったですね！

最後は残念でしたが、熱海富士の雰囲気のせいか、なんかほのぼの感が漂っていました。

はじける笑顔と時々見せるまじめな顔がたまらない！

もう何も言うことはありません。この顔見てください！

また、笑うとシワしか見えなくなる細い目だけでなく、時々話を聞く時に目を見開いてまっすぐインタビュアーを見つめる姿もいいです！

そして、何だかツヤツヤな唇も魅力的ですね！

そんな見ていると幸せな気持ちになる熱海富士の魅力を伝えられないかと思って作りました。

プログラムの説明

ざっくり言うと、「ボタンを押すと画像が3つあるうちのどれかにランダムに変わる」というプログラムです。

文字を入れる箇所がありますが、その文字はダミーで何を入れても結果は変わりません。

ボタンを押した時に1,2,3のどれかの数字がランダムに選択され、その番号の画像が選ばれ、テキストは消えるという形です。

単純にボタンを押しただけでもランダムな数字が選択されるので、画像は変わります。

HTML

<div class="ataminblock">
  <div class="flex-item flexleft">
    <h3 style="margin-top:0;">メッセージをお願いします！</h3>
    <input type="text" id="textInput" placeholder="テキストを入力">
    <div class="btn"><button class="ataminbtn" onclick="changeImage()">声かけ</button></div>
  </div>
  <div class="flex-item">
    <img id="image" src="https://sumo-programming.com/wp-content/uploads/2023/09/atamin01.jpg" alt="atamin">
  </div>
</div>

5行目のボタンをクリックするとchangeImageという関数を呼び出します。
関数はJavaScriptに書いてあります。

JavaScript

function changeImage() {
  const images = ['/atamin01.jpg', '/atamin02.jpg', '/atamin03.jpg'];// 画像の配列
  const randomIndex = Math.floor(Math.random() * images.length);// ランダムに画像の配列から数字を選ぶ
  document.getElementById('image').src = images[randomIndex];// 選んだ数字をimageに入れる
  // テキストボックスのテキストをクリア
  document.getElementById('textInput').value = '';
}

changeImage関数は画像をランダムに選び、テキストをクリアするというプログラムです。

これから

このくらいの軽いプログラムでRGの物真似くらい旬の時期に公開できるようにしたいです。