こんにちは、プログラマーの山本です。

今回は企業さんからのご依頼で、
WEB上にガチャガチャシステムを制作しました。

同じようなシステムを開発されたい方は参考にしてください。

ガチャガチャを作成

ガチャガチャを画像で表示し、
回す部分をクリックするとアイテムをアニメーションで表示します。

アニメーションはcssやJavaScriptで作成することも可能ですが、
今回は先方のご希望でgifアニメーションにて実装しました。

body.php

<form action="./result.php" method="post">
    <input type="submit" id="form_submit">
</form>
<div class='gacha-body'>
  <div onClick="Rotation(this);"></div>
  <div id="gacha_item"></div>
</div>

<script>
  let flag=false;
  function Rotation(obj){
    if(flag) return;
    flag=true;
    obj.style.backgroundImage = '回転アニメーションのURL';
    setTimeout(function(){
      document.getElementById("gacha_item").style.backgroundImage = "アイテムアニメーションのURL";
      setTimeout(function(){
        flag=false;
        document.getElementById("form_submit").click();
      },300);
    },1500);
  }
</script>

1~3行目：ガチャをクリックした後で、結果を表示するページに移動するためのフォームです。
　　　　 ガチャ以外で結果ページに移動した時は除外できるように、POST送信にしておきます。

4~7行目：5行目でガチャを回すボタンを表示、6行目でアイテムを入れる枠を生成しておきます。
　　　　gacha-bodyクラスの背景に、cssでガチャの画像を設定しておきます。

8~22行目：ガチャを回した時の動作をJavaScriptで書いています。

　9行目のflagは、ガチャを連続でクリックした時に、イベントが重複しないようにするためのものです。
　13行目で、ガチャが回っているアニメーションを表示しています。
　15行目で、アイテムが出現するアニメーションを表示しています。
　18行目で、結果を表示するページに移動させています。

ガチャを回す部分とアイテムは、
cssで適切な位置に配置しました。（本体画像と合うように）

ガチャガチャの出力結果を作成

result.php

<?php
    if($_POST){
        $random = rand (1, 100);
        $result = "アタリのURL"
        if($random > 50) $result = "ハズレのURL";
        header('Location: '.$result );
        exit;
    }
?>

POSTを受け取った場合に、1~100の数値をランダムで生成し、
生成された数値に応じて、出力URLを分岐させています。

5行目の分岐を調整することで、出力URLはいくつでも分岐させることができます。
※今回の実際のご依頼では、１０パターンにガチャの結果を分岐させました。

データーベースとの連携

上記のコードには含めていませんが、
実際のご依頼では以下の項目をデータベースから取り出しました。

・ガチャ本体、回す部分、アイテムのURL
・出力結果の分岐URL１０個

これらを先方が、Wordpressの管理画面でいつでも変更できるようにし、
上記のコードではその値を読み取って出力するようにしました。

まとめ

ガチャガチャのようなランダム要素を持つシステムを制作する場合は、
rand関数を用いるとスムーズに実装できます。

制作の依頼はこちら

今回ご紹介したシステムなど、
WEB上にシステムを実装したい場合は弊社におまかせください。

簡単なシステムなら１件¥3,000（税別）から承ります。

相場よりも費用を抑えて対応させていただくことが可能ですので、
以下のフォームから相談内容を記入して気軽にご連絡ください。

※ web上に表示するイラストや画像が必要な場合は、
　お客様でご用意くださいませ。