LoginSignup
4
0

More than 3 years have passed since last update.

🎍PHP🎍だけで動くwebパラパラアニメを表現してみた...!!(むりやり)

Last updated at Posted at 2020-12-30

※PHPアドベントカレンダー大遅刻で申し訳ありません。。。><

PHPでアニメーション表現できないのかな..?

PHPではサーバーサイドの言語だからアニメーションは無理、どうにかしてjavascriptのようにアニメーションが表現できないか、
ましては、php-cliでコマンドライン上でもなくブラウザ上で表現できないか、完全に誰得なのかわからないものに挑戦してみました。。汗

で完成したものがこれ..

▶完成したデモはこちら
※だいぶカクカクですが:upside_down:

javascriptやCSS、HTMLもつかっていません。

gif画像など組み合わせたり、遅延時間を調整すればかなり無理矢理だけどアニメーションっぽいことできそう。
キーボード入力情報をうまく連携させれば、無理やり動きのあるゲームっぽいのも可?

アニメーションっぽく表現するために色々やった試行錯誤

検証① sleepを使って遅延でアニメーションできないか?

<?php
sleep(1);
echo "H";
sleep(1);
echo "A";
sleep(2);
echo "P";

3秒後に、HAPとでる..

image.png

当たり前だけど、処理結果しかでないから、、どうにか画面クリア的ことができないか。。

検証② sleepheader("Location:〜");でリダイレクトと組み合わせたら?

画面を再描画する方法がないなら、むりやりリダイレクトや!ということで、
リダイレクト処理と遅延処理でなんとかできないかと挑戦。
そもそも、header("Location:〜")前にecho等の出力はNGなので、
html上には表示できないとして、アドレスバー上でパラパラアニメっぽくできないかな〜と妄想。

jsでやっている→こちらをイメージw

とりあえず。http://example.com/#H→#HA→#HAP→#HAPPYと動いてくれないか、、
検証

<?php
sleep(1);
$anime = ["H","HA","HAP","HAPP","HAPPY"];
$red = "./red2.php";
if( isset($_GET['id']) ){
        $id = intval($_GET['id']);
        if($id > 4) exit(); 
        $url = $red."?id=".($id+1)."#".$anime[$id];
        header("Location:".$url);
}
exit();

結果は.

image.png

🕓 5秒後

image.png

アドレスバーも最終的な結果した出力されない...

また、red2.php等のパスをリダイレクト毎にシンボリックリンクで変更してやってもみましたが、
こちらも結果は最終的な出力しかでずNG..

もうphpアドベントカレンダーのネタないし、php-cliでゲームでも作ろうかなとおもったら、
既に素晴らしすぎるphp-cliで動くテトリスがwwすごい
→こちら

検証③ header( "refresh:0.2;url=".$url );ヘッダーリフレッシュに出会う

<?php
$anime = ["H","A","P","P","Y"," ","N","E","W","Y","E","A","R",""," ","🎍2021🎍"];
$red = "./red.php";
if( isset($_GET['id']) ){
        $id = intval($_GET['id']);
        $id++;
}
$url = $red."?id=".$id."#".$anime[$id];
header( "refresh:0.2;url=".$url );
for($i=0;$i<$id;$i++){
        echo $anime[$i];
}
exit();

お、なんかいけたっぽい。。
というかheaderのrefreshってhtmlな気がするけど、、コードはすべてphpなのでお許しください。

Dec-31-2020 04-30-49.gif

🎍2021年も良いPHPライフを🎍

最後まで読んでいただきありがとうございます!良いお年を

image.png

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0