フレームワークなどを使わない、素のPHPでシンプルなアプリを作ってみます。下記が全体図です。具体的には、最初のボタンを押してから次のボタンを押すまでの時間が10秒に近ければ成功、というミニゲームです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PHPサンプルアプリケーション</title>
</head>
<body>
<?php if (empty($_POST['mode'])): ?>
<form method="post">
<p>このボタンを押してから丁度10秒後に次のボタンを押せるかな!?</p>
<input type="hidden" name="mode" value="start">
<button type="submit">スタート!</button>
</form>
<?php elseif ($_POST['mode'] === 'start'): ?>
<form method="post">
<p>10秒丁度に押してね!</p>
<input type="hidden" name="mode" value="end">
<input type="hidden" name="time" value="<?= microtime(true) ?>">
<button type="submit">今だ!</button>
</form>
<?php elseif ($_POST['mode'] === 'end'): ?>
<?php $diff = microtime(true) - $_POST['time'] - 10; ?>
<?php if ($diff == 0): ?>
<p>ぴったし!!! 奇跡!!!!</p>
<?php elseif (abs($diff) <= 0.5): ?>
<p>ほぼ同時! 奇跡!!</p>
<?php elseif (abs($diff) < 1): ?>
<p>まあまあ</p>
<?php else: ?>
<p>1秒以上違います</p>
<?php endif ?>
<p>差:<?= $diff ?>秒
<?php endif ?>
</body>
</html>
modeという値をformでPOSTすることで分岐させています。最初のif文はmodeがまだPOSTされていないので、説明文とスタートボタンを表示させます。ここで使っているformの中にmode=startのhiddenタグを入れておきます。
次のmodeがstartの時は終了ボタンを表示します。合わせてstartが実行された時の時間もhiddenタグに保存しておきます。
終了ボタンが押されたら計算して結果を表示します。
下記で実際に試せます。(レンタルサーバーに配置しているだけです)
https://mokumoku.alphabrend.com/sample.php
PHPは組み込みサーバーがあります。
php -S localhost:8000
と実行すると、そのフォルダで http://localhost:8000
としてアクセスすることが出来ます。とりあえずサーバーが無くてもこれで簡単に開発もできます。
JavaScriptを使わないためリアルタイムで動きを出すことは出来ませんが、このようにデータベースを使ったりしなくても画面遷移だけでちょっとしたアプリケーションを作ることが出来ます。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント