スロットゲームでクーポンゲットのコーディング（javascript・PHP）

投稿日 2020年12月17日
更新日 2024年5月17日
著者 WebFamil
カテゴリー WordPress
カテゴリーシステム構築
カテゴリープログラミング
カテゴリーホームページ

ホームページを閲覧数を増やすために施策を施しユーザに再訪する仕組みを構築します。

例えばスロットゲームで絵柄が揃うとクーポンを発行する仕組みなどにより閲覧数の向上とともに店舗に向かうきっかけを発生させたいと思います。

仕組みの概要

以下、業務フローに沿ってスロットページと結果ページの遷移を作成します。

処理フロー

処理詳細

スロットページまたは結果ページに遷移
クッキー情報の有無を判断
（クッキー情報有りの場合）結果を表示。クーポン種類によって表示する画像を選別
（クッキー情報有りの場合）クーポンを使うボタンを押下でクッキーの期限を翌日までとする。
（クッキー情報無いの場合）スロットページを表示。
（クッキー情報無いの場合）スロットの実行。当たり・はずれによってクッキーの有効期限を設定。クーポン種類を設定。クーポン結果ページに遷移する。
（クッキー情報無いの場合）結果を表示。クーポン種類によって表示する画像を選別

処理種類

スロット処理、クッキーの設定はjavascriptでコーディングを行います。

クッキーの判定から表示内容の選別はPHPでコーディングを行います。

スロットゲームの作成（javascript）

javascritpを使ってスロットゲームをコーディングします。今回は画像を3枚用意し、その画像が揃ったら当たり、揃わない場合ははずれと定義します。

スロットのスタートトリガーは「START」ボタンを押下。ストップトリガーは「STOP」ボタンを押下とします。

<script type="text/javascript"><!--
myImageCnt = 3;                           // 画像の数
myImage = new Array(                      // 画像ファイル名の設定
 "画像フルパス1",
 "画像フルパス2",
 "画像フルパス3"
);
myBuffer = new Array(myImageCnt);         // 画像イメージを収納するバッファ

for(i=0; i<myImageCnt; i++){              // 画像イメージをメモリに取込む
  myBuffer[i] = new Image();
  myBuffer[i].src  = myImage[i];
}

myStartFlg = 0; // スタートボタンフラグ (0:動いていない 1:動いている)
myStopFlg1 = 0; // ボタン1フラグ (-1:動いている 0～n:止まっている)
myStopFlg2 = 0; // ボタン2フラグ (-1:動いている 0～n:止まっている)
myStopFlg3 = 0; // ボタン3フラグ (-1:動いている 0～n:止まっている)

function myStart(){     // ボタンが押された
  if (myStartFlg == 0){ // 既に押していなければ、
    myStartFlg = 1;     // スタート!
    myStopFlg1 = -1;    // ボタン1回転!
    myStopFlg2 = -1;    // ボタン2回転!
    myStopFlg3 = -1;    // ボタン3回転!
    myLoop();
  }
}

function myLoop(){                                    // 回転させるルーチン
  if (myStopFlg1==-1||myStopFlg2==-1||myStopFlg3==-1){// まだどこか回転しているか？
    if (myStopFlg1==-1){                              // ボタン1は回転しているか？
      myRnd = Math.floor(Math.random()*myImageCnt);   // 乱数を求める
      document.myFormImg1.src = myBuffer[myRnd].src;  // 乱数番目の画像を表示する
    }
    if (myStopFlg2==-1){                              // ボタン2は回転しているか？
      myRnd = Math.floor(Math.random()*myImageCnt);   // 乱数を求める
      document.myFormImg2.src = myBuffer[myRnd].src;  // 乱数番目の画像を表示する
    }
    if (myStopFlg3==-1){                              // ボタン3は回転しているか？
       myRnd = Math.floor(Math.random()*myImageCnt);  // 乱数を求める
       document.myFormImg3.src = myBuffer[myRnd].src; // 乱数番目の画像を表示する
    }
    setTimeout( "myLoop()" , 50 );                    // ぐるぐる回転させる!
  }else{
    myStartFlg = 0;                                   // 全部止まった
    let date1 = new Date(Date.now());
    date1.setHours("00");	// 時に00をセット
    date1.setMinutes("00");	// 分に00をセット
    date1.setSeconds("00");	// 秒に00をセット
    if (myStopFlg1 == myStopFlg2 && myStopFlg2 == myStopFlg3) {
        // 当たりの場合
        date1.setDate(date1.getDate() + 7);	// 当たりの有効期限を7日間とする
        courpon_kind = myStopFlg1;		// 当たりのクーポン種類をセット
    } else {
        // はずれの場合
        date1.setDate(date1.getDate() + 1);	// はずれの有効期限を1日間とする
        courpon_kind = "99";			// はずれのクーポン種類をセット
    }
    // クッキーをセットし結果画面へ遷移
    date = date1.toUTCString();
    document.cookie = "LIMIT=" + date + "; expires=" + date ; //有効期限をセット
    document.cookie = "PTN=" + courpon_kind + "; expires=" + date ; //クーポン種類をセット
    window.location.href = '結果ページのURL'; // ページ遷移
  }
}

function myStop1(){                                 // ボタン1が押された
  if (myStopFlg1 == -1){                            // ボタン１は回転しているか？
    myRnd = Math.floor(Math.random()*myImageCnt);   // 乱数を求める
    document.myFormImg1.src = myBuffer[myRnd].src;  // 乱数番目の画像を表示する
    myStopFlg1 = myRnd;                             // 止まった画像の番号を退避
  }
}
function myStop2(){                                 // ボタン2が押された
  if (myStopFlg2 == -1){                            // ボタン2は回転しているか？
    myRnd = Math.floor(Math.random()*myImageCnt);   // 乱数を求める
    document.myFormImg2.src = myBuffer[myRnd].src;  // 乱数番目の画像を表示する
    myStopFlg2 = myRnd;                             // 止まった画像の番号を退避
  }
}
function myStop3(){                                 // ボタン3が押された
  if (myStopFlg3 == -1){                            // ボタン3は回転しているか？
    myRnd = Math.floor(Math.random()*myImageCnt);   // 乱数を求める
    document.myFormImg3.src = myBuffer[myRnd].src;  // 乱数番目の画像を表示する
    myStopFlg3 = myRnd;                             // 止まった画像の番号を退避
  }
}
// --></script>

javascriptを使ったスロット処理部になります。このプログラムはコピー＆ペーストでも使えますが、注意点は以下の通りです。

画像パスは適切なパスに修正する
遷移先のURLは適切なパスに修正する
HTMLとセットで利用するため名称差異が発生しないようにする。

cookieの設定（javascript）

Cookie情報を設定するには以下のプログラムで可能となります。

Cookie情報の追加

    document.cookie = "LIMIT=" + date + "; expires=" + date ; //有効期限をセット
    document.cookie = "PTN=" + courpon_kind + "; expires=" + date ; //クーポン種類をセット

document.cookieに対して名前と有効期限を設定します。上記で言うと「LIMIT」はCookie名となります。その名前に対して値が「date」部になりますのでその変数の中身は『現在の日付＋7日または1日』となります。※時分秒は00をセット済み

Cookie情報の変更

既に作成済みのCookieの値を更新する場合は、追加時と同じ対応で問題ありません。既に存在するCookie名に対して新しい値と新しい有効期限を設定することで変更できます。

Cookie情報の削除

既に作成済みのCookieの値を削除する場合は、max-ageを「0」に設定することで削除となりCookie情報が削除されます。

document.cookie = "PTN=" + date+ "; max-age=0";

表示ページの判定（PHP）

スロットページまたは結果ページで利用しているテンプレートファイルの上に以下のPHPコーディングを行います。

// クーポンページの遷移制御
$LIMIT = $_COOKIE["LIMIT"];
if ($_SERVER['REQUEST_URI'] == COURPON_RESULT_PAGE_NAME) {
	if(!isset($LIMIT)) {
		// cookieがない場合はクーポンページへ遷移
		header('Location: ' . HOST_SITE_NAME . COURPON_PAGE_NAME);
	}
} elseif ($_SERVER['REQUEST_URI'] == COURPON_PAGE_NAME) {
	if(isset($LIMIT)) {
		// cookieがある場合はクーポン結果ページへ遷移
		header('Location: ' . HOST_SITE_NAME . COURPON_RESULT_PAGE_NAME);
	}
}

こちらではURI情報が特定の文字列の場合遷移先を制御する仕組みとなります。

[getpost id=”1912″]