データベースを利用したゲームを作っています。

問題文をデータベースから取り出す形式のタイピングゲームを作成しています。

問題文をデータベースから取り出してゲーム画面に表示させるところまではできたのですが、正解した際に問題文を変更するプログラムがうまく作れません。

php
1<?php
2require_once("lib/util.php");
3$clock = 0;
4$level = 1;
5
6
7//データベースユーザー
8$user = "user";
9$password = "password";
10
11$dbname = "typinggame";
12$host = "localhost:";
13$dsn = "mysql:host{$host};dbname={$dbname};charset=utf8";
14
15?>
16
17<?php
18//mysqlに接続
19try{
20    $pdo = new PDO($dsn, $user, $password);
21    $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES,false);
22
23    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
24
25    //SQL文を作る　
26    $sql = "SELECT * FROM typinggame.textlist WHERE level = $level ORDER BY RAND() LIMIT 20";
27    $stm = $pdo->prepare($sql);
28    $stm->execute();
29    $result = $stm->fetchAll(PDO::FETCH_ASSOC);
30
31    foreach($result as $row){
32      $my_array[] = $row["subject"];
33      $varjs = json_encode($my_array[$clock]);
34      }
35
36  
37} catch (Exeption $e) {
38    echo '<span class="error">エラーがありました。</span><br>';
39    echo $e->getMessage();
40    exit();
41}
42
43?>
44
45
46
47<!DOCTYPE html>
48
49<head>
50<meta charset="utf-8">
51<pre class="lang:js decode:true">  
52<script type="text/javascript" src="textfile.js"></script>
53<link rel="stylesheet" href="style.css">
54</head>
55
56<div id="body">
57<h1>タイピングゲーム</h1>
58<div id="status">
59<h2><p id="point"><p id="timer"></p></h2>
60</div>
61<div id="mondai">
62<p id="subject"></p>
63</div>
64
65
66<form name="typing"  onsubmit="return false;">
67      
68        <input name="input" style="width:30%;padding:10px;font-size:16px;" autocomplete="off" type="text"><input name="btn" type="submit" style="width:3%;padding:10px;font-size:16px;" value="解答" >
69        <input name="start" type="button" style="width:10%;padding:10px;font-size:16px;" value="ゲームスタート"><input type="button" name="button" value="アリーヴェデルチ" style="width:10%;padding:10px;font-size:16px;"
70        onclick=closewindow()>
71        
72</form>
73<h3><p id="message"></p></h3>
74
75<div id="rule">
76<h1>ルール説明　How to play</h1>
77<p>
78  出題された文字を間違えずに入力しろ！制限時間は1問につき10秒だけ。<br>
79  正解すれば１点がもらえて次の問題へ。間違えたり時間切れになった場合は即失格。<br>
80  問題は正解数が増えるごとに難しくなっていくので注意！<br>
81</p>
82</div>
83
84<div id="footer">
85  <p>copyright 2020 xxxx all.rights.reserved</p>
86</div>
87
88
89</div>
90
91<script>
92//ここからJavaScript
93
94
95const subject = document.getElementById('subject');
96const timer = document.getElementById('timer');
97const point = document.getElementById("point");
98const stock = document.getElementById("life");
99const message = document.getElementById("message");
100const start = document.getElementById("start");
101const form = document.forms.typing;
102
103
104
105let rank;
106let TIME = 10;
107let count = 0;
108let state = false;
109let wrong = 0;
110let life = 1;
111let ins = 1;
112let fiveup = 1;
113let mondai;
114let gamestart = 0;
115let countdown;
116
117
118var useitem = new Audio("https://xxx");
119var doitem = new Audio("https://xxx");
120var mainbgm = new Audio("https://xxx");
121var finishbgm = new Audio("https://xxx");
122
123point.textContent = "ポイント：" + 0; 
124timer.textContent = "Prease Start Button";
125subject.textContent = "ゲームスタートを押してね";
126
127//制限時間
128function gametimer(){
129   countdown = setInterval(function() {
130  if(gamestart == 1){
131
132  timer.textContent = '制限時間：' + --TIME + '秒';
133  if(TIME <= 0) {
134    life--;
135  if (life <= 0) finish()
136  
137  }
138  }
139}, 1000);
140}
141
142
143
144
145//正誤判定
146form.btn.addEventListener('click', function(e) {
147  if(!state) return;
148 
149  if(form.input.value === subject.textContent) {
150    count++;
151    point.textContent = "ポイント：" + count;
152  
153    timer.textContent = "制限時間：" + 10 + "秒";
154    TIME = 10;
155    
156    if(life == 2){
157      life--;
158    
159    }
160    <?php $clock++; ?>
161    init();
162    
163  } else {
164    life--;
165    
166    if(life > 0){
167    timer.textContent = "制限時間：" + 10 + "秒";
168    TIME = 10;
169    message.textContent = "アイテムの効果が発動し、不正解による失格を防いだ！"
170    subject.textContent = mondai;
171    form.input.value = '';
172    doitem.play();
173    }
174    
175    else {
176      wrong++;
177      finish();
178    }
179  } 
180});
181
182
183//出題
184function init() {
185  
186  var rnd =JSON.parse('<?php echo $varjs; ?>');
187  subject.textContent = rnd;
188  form.input.value = '';
189  form.input.focus();
190}
191
192//ゲームオーバー時の処理
193function finish() {
194  clearInterval(countdown);
195  state = false;
196  if(wrong <= 0){
197  mainbgm.pause();
198
199  mainbgm.currentTime = 0;
200  finishbgm.play();
201  point.textcontent = "";
202  timer.textContent = "プレイしてくれてありがとう！\nもっかいプレイするなんて酔狂な真似をするかい？";
203  message.textContent = "";
204  subject.textContent = 'GAME OVER\n時間切れにつき終了！正解数は' + count + '個でした！';
205  gamestart = 0;
206  state = false;
207  } else {
208  mainbgm.pause();
209  mainbgm.currentTime = 0;
210  finishbgm.play();
211  point.textcontent = "";
212  timer.textContent = "プレイしてくれてありがとう！\nもっかいプレイするなんて酔狂な真似をするかい？";
213  message.textContent = "";
214  subject.textContent = 'GAME OVER\n時間切れにつき終了！正解数は' + count + '個でした！';
215  gamestart = 0;
216  }
217}  
218
219
220
221
222
223//スタートボタン
224form.start.addEventListener('click', function(e) {
225
226  if(gamestart == 0){
227   state = true;
228    gamestart = 1;
229    init();
230    mainbgm.play();
231    count = 0;
232    life = 1;
233    ins = 1;
234    fiveup = 1;
235    point.textContent = "ポイント：" + count;
236    gametimer();
237  };
238
239
240});
241
242
243function closewindow(){
244  alert("こんなゲームをプレイしてくれてありがとう！\n完");
245  window.close();
246}
247
248
249
250</script>
251</pre>
252
253</html>
254

$my_arrayの配列にはランダムに入れた問題文が入っています。それを$clockの数値を切り替えることで問題文を変更できるようにしたいのですが、うまく動作しませんでした。$clockの位置を変えたりしてもうまくいきません。

mdj

2020/06/30 06:44

$my_arrayに値が入っていることは確認済でしょうか。 print_r($my_array); とかで確認できるかと。もしくは $clockが常に0のようなので echo $my_array[0]; で値が入っているかは確認できるかと思いますが。うまく動作しない、が何について指しているのかにもよるかと思います

Matsuta174320

2020/06/30 06:56

$my_arrayを確認したところ、自分が指定した問題が入っていました。$my_array[?]の?の値を変えて試したところ別の問題が出たので$my_arrayには間違いなく問題文が入っているものと思われます。また、質問に書かれているソースコードの正誤判定のところに<?php $clock++; ?>を追加しました。これは私が$clockの値を変えられるように挿入したものですが、これを挿入しても$clockの値が変わらず、それにより問題文も変わらないという状況です。

gogoweb_ikeda

2020/06/30 07:25

foreachの中で$varjs にjson_encodeされたデータが上書きされて代入され続けていますがこれは想定している動作ですか？現状ですと$varjs には常に単一のデータのみが渡されて問題文の更新にはページのリロードが必要に見えます。

Matsuta174320

2020/06/30 07:31

それは想定していない動作です。 ikeda様の言うように、問題文は１種類しか表示されず、更新すると別の問題に切り替わり、次の更新まで切り替わった問題だけが繰り返し出題されるという状況です。

gogoweb_ikeda

2020/06/30 07:42

正解したときにどのような方法で問題を更新するのを想定しているのでしょうか？現状ですと問題文は一問しかセットされておらず、正答後initを実行しても同じ問題が実行されると思います。（この時点ですでにphpは実行完了しているのでAjaxでもないかぎりphp側からデータを変更はできません）そのため考えられるのは 1.複数の問題をまとめて取得して配列に保存しておく 2.Ajax通信で正解後に改めて問題を取得する 3.正解後パラメータを追加してページを再読み込みする（おすすめしません）等でしょうか？

Matsuta174320

2020/06/30 07:48

３つの中で一番近いのは１の複数の問題をまとめて取得して配列に保存する方法です。

行動規範の内容に同意します

回答1件

ベストアンサー

php
1foreach($result as $row){
2$my_array[] = $row["subject"];
3$varjs = json_encode($my_array[$clock]);
4}

この部分を

php
1foreach($result as $row){
2$my_array[] = $row["subject"];
3}
4$varjs = json_encode($my_array);

に変更することで問題が配列で取得できると思われます。
そのあと

JavaScript
1var rnd =JSON.parse('<?php echo $varjs; ?>');
2  subject.textContent = rnd;

の部分でrndを配列でデータを取得する形にすればいいのではないでしょうか？

投稿2020/06/30 07:59

gogoweb_ikeda

総合スコア1426

Matsuta174320

2020/07/01 06:39

ご回答ありがとうございます。あれから実際にphpの部分を変更し、rndに<?php echo $varjs[($clock)]; ?>');を代入しましたが、「SyntaxError: Unexpected token '<'」と出てしまい問題がうまく抽出されませんでした。また、一度$clockを消去し、$varjs[rand(0,19)]に変更すると、エラーは出ませんでしたが問題文ではなく配列の番号（1や7など）が出題され、回答を入力してもランダム出題はされませんでした。もしかしたらうまく配列からデータを取得できていないのかもしれませんが、この状況をどう直せばいいでしょうか？

gogoweb_ikeda

2020/07/01 07:17

$clockを消してrndに代入後console.log(rnd)をしてみてください。コンソールにおそらく["a","b","c","d"]のような値が表示されていると思いますがどうでしょうか？ phpとjavascirptを混合しているように見えますが一度サーバーから出力された時点でphpの役目は終わりになります。そのため$clockの値や$varjsの値を変更しても意味はありません。操作するならjsonデータが入っているrndの方です。

Matsuta174320

2020/07/01 07:51 編集

rndの中には挿入した配列が入っていました。その後、少しソースコードを変えて、phpで配列を挿入しJavascriptに配列データを送った後、Javascript側でランダム出題の処理をすることでランダム出題の処理を実装させることができました。この度はありがとうございました。

行動規範の内容に同意します