CodePenとは
CodePenはHTML、CSS、JavaScriptのコード入力画面と、その結果が表示される画面が一体で操作できるサービスです。
多くの作者がテンプレートを公開していて、自分の環境にフォークして使えます。
今回自分でWebアプリを作るにあたり参考にさせていただこうと調べた中で面白かったものを挙げていきます。
お気に入りのGames
Gamesカテゴリの説明文は「From tic-tac-toe to clever 3D braintwisters to wacky platformers」とのこと。
「tic-tac-toe」は〇×ゲームのことだそう。
2021/5/21時点でSearch画面に表示された順に30個を調べてみました。（Like数順にソートする方法を知っている方、教えてくださいm(__)m）
個人的に直近で使えそう・使いたいものに◎をつけています。
凄いな、と思ったものは太字にして上位に持ってきてます。
↑ こんなのもう完全にスーファミ時代のゲームじゃん！ スタート画面からして完全にテレビゲーム。
↑ こんなのまで作れるのか！ 自機のボールが矢印キーでダンジョンを移動する。段々自機がマリオに見えてくる。
↑ チェスゲーム。攻守交替で上下が回転する。あたりまえだけどちゃんと駒をルール通りに進めて駒を取れる。
↑ ルービックキューブ。どの列をどっち側に回すのか矢印キーでやるのかな、と思ったらカーソルで掴む、だった。まじか。
↑ 移動するオブジェクトをタイミングに合わせてクリックする系。段々と積み木が積みあがるのでついやりこんでしまいそう。
↑ ◎ 神経衰弱。今回作るWebアプリの元ネタに良さそうかな。
↑ 懐かしすぎか！ 蛇が餌を食べると自分の体が伸びていくゲーム。
↑ アルファベットを規定数以内にクリックして英単語を明らかにするゲーム。残り時間が棒人間の首吊りイラストが完成されるまで、という表現でクリスチャン・ベール主演の映画「マシニスト」を思い出したのですが、HANGMANという遊びが元々あるんですね。
おわりに
完全にスーファミレベルで驚きました。。。
おすすめのテンプレートがありましたら是非コメントで教えてください。m(__)m