☰
KAKEblog Written by kake

[PHP]簡単な診断ゲームの作り方(プログラミング)

Web プログラミング

こんにちは。kakeです。

先日このようなものを作りました。

ゲーム画像

ゲーム画像

https://ksproduct.xyz/music_ly/

ユーザーネーム：00000
パスワード：00000

歌詞を予想してあなたのセンスを問う的なミニ制作物です笑

難しいことはしていないので、今回はこの作り方について解説してみようと思います。

注意として核となる部分の解説のみとします。

簡単な診断ゲームの作り方

それでは順に解説していきます。

用意するファイル

  • index.php（メイン画面）
  • result.php（結果画面）
  • script.js（jQuery用）
  • stylesheet.css（スタイル用）

メイン画面の作り方（index.php）

<?php for($i=0;$i<5;$i++): ?>
 <p>問題：<?php echo $lyics[$j]; ?></p>
  <form action="result.php" method="post">

　 <!-- 選択肢４つ -->
　 <?php for($i=0;$i<4;$i++): ?>
   <input type="radio" name="answer<?php echo $j; ?>" 
  class="answer<?php echo $j; ?> value="<?php $sentakusi[$j][$i]; 
  ?>"><?php echo $sentakusi[$j][$i]; ?>
   <br>
   <?php endfor; ?>
　 <!-- 選択肢４つ終わり -->

 <?php endfor; ?>
   <input type="submit" id="ansbtn" value="回答する">
  </form>

少しややこしいですが、forを使って問題を5つ、選択肢を4つ表示させます。

$lyrics　→　問題文の配列（後に解説）
$sentakusi　→　選択肢の配列（後に解説）

formを使っていて、radioボタンで選択されたものをpostで送るというものです。

次にindex.phpの先頭で以下のように記述していきます。

<?php 

<!-- 問題部分 -->
$lyrics = array('歌詞0','歌詞1','歌詞2','歌詞3','歌詞4');

<!-- 選択肢の配列　-->
$sentakusi = array();
$sentakusi[0] = array('選択肢','選択肢','選択肢','選択肢');
$sentakusi[1] = array('選択肢','選択肢','選択肢','選択肢');
$sentakusi[2] = array('選択肢','選択肢','選択肢','選択肢');
$sentakusi[3] = array('選択肢','選択肢','選択肢','選択肢');

?>

$lyricsには問題文を配列にしていれておきました。連想配列にした方がわかりやすいかもしれません。

$sentakusiは配列の配列という形になっています。

配列の配列のイメージ

とり出す時には$setakusi[0][0]、$sentakusi[0][3]のようにしてあげればオッケーですね。

結果画面の作り方（result.php）

✔︎やるべきこと

  • 結果はカウンターで数えていく
  • 評価を5通り用意し、結果に応じて表示する
  • 詳細ボタンを押すと正解、不正解を表示して、さらに答えも表示する

まずは、result.phpの先頭にPHPを記述していきます。

<?php

//答えの配列
$answerlist = array(
  '答え0' => '答え0',
  '答え1' => '答え1',
  '答え2' => '答え2',
  '答え3' => '答え3',
  '答え4' => '答え4'
);

//評価文章
$eva = array(
  '評価0' => '評価0',
  '評価1' => '評価1',
  '評価2' => '評価2',
  '評価3' => '評価3',
  '評価4' => '評価4',
  '評価5' => '評価5'
);

//カウンターの設置(正解の数を数える)
$count　= 0;

//答えの確認作業
//以下は一問目の答え確認
if(!empty($_POST['answer0'])){
  $answer = $_POST['answer0'];
  if($answer == $answerlist['答え0']){
    $ly0 = "正解";
    $count = $count + 1;
  }else{
    $ly0 = "不正解";
  }
}else{
　//選択されていないならindex.phpに戻す。
  header('Location: index.php');
}


?>

答えの配列、評価の配列を用意しておきます。

またカウンターも設置しておきます。

答えの確認作業ではindex.phpからPOSTで受け取り一旦$answerにいれ、それが$answerlistの答えと一致するか確認します。

そして合っている場合は$ly0に’正解’をいれつつ、カウンター$countに１を足し、間違っている場合は’不正解’を$ly0にいれましょう。注意として今回は1問目の例のみなので$ly0ですが、2問目以降は$ly1,$ly2と変えていきます。

さらに以下のようにresult.phpにコードを書き加えてください。

//評価
if($count == 0){
  $youreva = $eva['評価0'];
}else if($count == 1){
  $youreva = $eva['評価1'];
}else if($count == 2){
  $youreva = $eva['評価2'];
}else if($count == 3){
  $youreva = $eva['評価3'];
}else if($count == 4){
  $youreva = $eva['評価4'];
}else if($count == 5){
  $youreva = $eva['評価5'];
}

これは正解の数、つまりカウンターの数によってどの評価にするかを決めます。($yourevaに評価を代入しましょう。)

ここまででほとんど完成です。

あとはhtml部分を書いたら終わりで、特に難しいことはないので簡単に説明するのみにしようと思います。

  • 結果（カウンター）表示
  • 評価表示
  • それぞれの問題が正解か不正解か表示
  • それぞれの問題の答えを表示

こんな感じでオッケーです。

まとめ

以上簡単ですが、診断ゲームの作り方の解説でした。

もちろんこれが正解ということはなく、あくまで一例であり、こんな作り方もあるのかという風に思ってくれたらオッケーです。

また何か作ったら解説していこうと思います。

それではまた！！！！

>  >  [PHP]簡単な診断ゲームの作り方(プログラミング)