javascriptで簡単なルーレットアプリを作成する

今回はJavascriptを使って簡単なルーレットマシンを作る手段をお伝えします。子供のための遊びに作ったもので宝探しなどする時にあったら楽しいかと思って作成しました。今回の仕組み落としては重複はなく、セットした画像がランダムで表示され且つ全て表示されたら、最後に「終わったよ！やったね。」的な画像が表示されるというような簡単なアプリです。多少のHTMLの知識とサーバー、ドメインの準備は必要ですが、どなたでも簡単に自宅で取り入れられるプログラミングの遊びです。ご参考になれば幸いです。

コード紹介
こんな方におすすめです

コード紹介

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
    <title>javascriptでルーレットマシンを作成する</title>

<link rel="stylesheet" href="css/style.css">

<script>
// 表示するための画像を配列にセットする		
var images = ["https://〇〇.com/image/toy1.jpg", "https://〇〇.com/image/toy2.jpg", "https://〇〇.com/image/toy3.jpg", "https://〇〇.com/image/toy5.jpg", "https://〇〇.com/image/toy6.jpg", "https://〇〇.com/image/toy7.jpg", "https://〇〇.com/image/toy8.jpg", "https://〇〇.com/image/toy9.jpg", "https://〇〇.com/image/toy10.jpg", "https://〇〇.com/image/toy11.jpg", "https://〇〇.com/image/toy12.jpg"];
			

// 選択された画像を格納する配列を定義する
var selectedImages = [];

// ランダムな画像を表示する関数を定義する
function showRandomImage() {
  if (selectedImages.length === images.length) {
    // 全ての画像が表示された後に、終了画像を表示する
    document.getElementById("image-container").innerHTML = "<img src='https://〇〇.com/image/finish画像.jpg'>";
    return;
  }

  // ランダムな画像を取得する
  var randomImage;
  do {
    randomImage = images[Math.floor(Math.random() * images.length)];
  } while (selectedImages.indexOf(randomImage) !== -1);

  // 画像を表示する
  document.getElementById("image-container").innerHTML = "<img src='" + randomImage + "'>";

  // 選択された画像を配列に追加する
  selectedImages.push(randomImage);
}

// 最初に showRandomImage() 関数を呼び出す
showRandomImage();

  
	</script>

</head>
<body>
	<button onclick="showRandomImage()">画像を表示する</button>
  <div id="image-container"></div>
</body>
</html>

一般的なHTMLの雛形での<head></head>内に、直接JavaScriptを書いていく手段でお伝えします。今回var imagesという配列の中に、ルーレットで回す画像をセットしています。このときの画像のパスは「https://〇〇.com/image/toy1.jpg」となっていますので、index.htmlと同じ階層内にimageフォルダーを用意し、そこに各種画像をアップロードしてください。

概要としまして、定義したvar selectedImages = []の配列に、var randomImage;で選択された画像がpushされ、最終的にselectedImagesの配列の中に入っている値の個数と、最初に画像をセットしたimages配列の中の値の個数が一致していれば、最後のfinish画像.jpgを表示させるという流れになっています。HTML上では、<button>に対してonclick 属性で「onclick=”showRandomImage()」を設定し、ユーザーがクリックした時にアクションが起きるようになっていますので、「画像を表示する」ボタンをクリックするごとに重複することなく画像が<div id=”image-container”></div>に入れ替わり挿入され、最終的にimg src=’https://〇〇.com/image/finish画像.jpgの画像が表示されるというような仕組みです。

こんな方におすすめです

・Javascriptで簡単なアプリを作ってみたい

・子供でもわかる簡単なプログラミングを知りたい

・自宅で遊べるWEBアプリを作ってみたい

・steam教育を取り入れてみたい

今回は自宅で、子供が持っているオモチャを最初にこちらで隠しておいて、順番に探させる遊びで利用しました。お持ちのスマートフォンで簡単にできる遊びで、一度作ってしまえば場所を選ばずどこでも遊ぶこと出来ます。お子様とプログラミングを始めるキッカケにもなるかと思いますので、是非ご自宅で試してみてはいかがでしょうか。