文字当てゲームで色をつける方法と簡単にコードを書く方法
まず全体コードはこちらです。
<form method="post">
<input type="text" name="text1" size="1">
<input type="text" name="text2" size="1">
<input type="text" name="text3" size="1">
<input type="text" name="text4" size="1">
<input type="text" name="text5" size="1">
<input type="text" name="text6" size="1">
<input type="submit" value="送信する">
</form>
<!--?php
$answer = ["D","E","S","I","G","N"];
$youranswer[0] = filter_input(INPUT_POST, "text1");
$youranswer[1] = filter_input(INPUT_POST, "text2");
$youranswer[2] = filter_input(INPUT_POST, "text3");
$youranswer[3] = filter_input(INPUT_POST, "text4");
$youranswer[4] = filter_input(INPUT_POST, "text5");
$youranswer[5] = filter_input(INPUT_POST, "text6");
for($i=0;$i<6;$i++) {
if ($youranswer[$i] == $answer[$i]) {
echo '<span class="yes"-->';
echo $youranswer[$i];
echo '';
} else if (in_array($youranswer[$i], $answer)) {
echo '<span class="other">';
echo $youranswer[$i];
echo '</span>';
} else {
echo '<span class="no">';
echo $youranswer[$i];
echo '</span>';
}
}
説明していきます
<!– 前回と同じ様にformを作ります。今回は「DESIGN」が正解にしたいので6個textを作ります。 –>
<form method=”post”>
<input type=”text” name=”text1″ size=”1″>
<input type=”text” name=”text2″ size=”1″>
<input type=”text” name=”text3″ size=”1″>
<input type=”text” name=”text4″ size=”1″>
<input type=”text” name=”text5″ size=”1″>
<input type=”text” name=”text6″ size=”1″>
<input type=”submit” value=”送信する”>
</form>
<?php
// 次にここでPHPを書いていきます。
// まず$answerという変数名の中に答えである「DESIGN」を入れます。
$answer = [“D”,”E”,”S”,”I”,”G”,”N”];
// $answer[0], $answer[1]
// そして$youranswerという変数にfilter_inputで前のnameを入れてきます。6個分作ります。
// filter_inputというのは指定した名前の変数を外部から受け取り、オプションでそれをフィルタリングする関数です
$youranswer[0] = filter_input(INPUT_POST, “text1”);
$youranswer[1] = filter_input(INPUT_POST, “text2”);
$youranswer[2] = filter_input(INPUT_POST, “text3”);
$youranswer[3] = filter_input(INPUT_POST, “text4”);
$youranswer[4] = filter_input(INPUT_POST, “text5”);
$youranswer[5] = filter_input(INPUT_POST, “text6”);
// そしてここでいつものfor文を書いていきます。
// 6個分を順番に唱えていきたいのでi<6個分をi++(1つずつ順番に)
for($i=0;$i<6;$i++) {
// そしてif文で$youranswer(ユーザーが入力した字)と$answer(答え)が一緒なら
if ($youranswer[$i] == $answer[$i]) {
// echoでspanのclass”yes”を作ります。ここでスタイルシートで.yes{background:red;}で背景色を入れます。
echo ‘<span class=”yes”>’;
// そしてspanの中に$youranswerを出します
echo $youranswer[$i];
// 最後にechoでしっかりspanを閉じます。
echo ‘</span>’;
// 次にelse ifを使って中身はさっきと同様にechoのクラス名以外は同じで最初にin_arrayを使います。in_arrayは配列に値があるかチェックする関数です。
} else if (in_array($youranswer[$i], $answer)) {
echo ‘<span class=”other”>’;
echo $youranswer[$i];
echo ‘</span>’;
// 最後にelseで”no”要するに違った場合の答えを書きます。これは簡単で前のコードと一緒のechoを書いてclass名を変えるだけです。
} else {
echo ‘<span class=”no”>’;
echo $youranswer[$i];
echo ‘</span>’;
}
}
// 最後に閉じて完成です。
一様スタイルシートはこんな感じです
<style>
.no{
font-size: 40px;
background-color:red;
padding:5px;
}
.other{
font-size: 30px;
background-color:blue;
padding:5px;
}
.yes{
font-size:50px;
background-color:gray;
padding:5px
}
</style>
まとめ
今回はfor文とif文と使って簡単にコードを書く方法を紹介しました。理解をすると簡単ですがいきなりやるのは難しく感じます。他にも同じ文字が複数回の場合もあるのですがとても難しいと私は感じました。