WEBシステム

PHPとJavaScriptでガチャガチャのシステムを制作


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

今回は企業さんからのご依頼で、
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はいくつでも分岐させることができます。
※今回の実際のご依頼では、10パターンにガチャの結果を分岐させました。

 

データーベースとの連携

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

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

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

 

まとめ

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

 

制作の依頼はこちら

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

簡単なシステムなら1件¥3,000(税別)から承ります。

格安での対応が可能ですので、
以下のフォームから相談内容を明記の上、お気軽にご相談いただければと思います。

必須 お名前
必須 メールアドレス
任意 サイトのURL
必須 ご依頼内容や相談内容

※出来るだけ具体的に記載していただけると進行がスムーズになります。
任意 画像やPDF

※必要があれば添付してください。




原則1営業日以内に、お見積りと決済リンクのご案内を送らさせていただきます。

  • この記事を書いた人
  • 最新記事
Yamamoto

Yamamoto

JavaScript、PHPをメインで扱うWEBプログラマー。Wordpressを主としたWEBサイトにシステムを導入する仕事を多くこなしてきた。 自身のブログを月間20万PVに導いた実績をもち、サイトやブログの集客・運営も手がける。

-WEBシステム

© 2020 Web(ウェブ)の便利屋Lallapallooza(ララパルーザ)