![見出し画像](https://assets.st-note.com/production/uploads/images/148821848/rectangle_large_type_2_74548babe1136fc8e5e6030756c0e04a.png?width=1200)
WEBアプリ詰め合わせ:迷路・100マス計算・アルゴリズム勉強・ゲーム等
最近作成したWEBアプリが徐々に蓄積してきたので、今回はそれらをまとめて公開することにしました。この記事では、迷路生成器や100マス計算練習ツール、アルゴリズム学習支援ツール、そして各種ミニゲームなど、様々なアプリをご紹介します。
これらのアプリは、学習やエンターテインメントなど、幅広い目的にお使いいただけます。改造や拡張など、自由にカスタマイズしていただいて構いません。ただし、一部のアプリでは外部ライブラリを使用しているため、それらのライブラリの配布元ライセンスに準拠してご利用ください。
一応断っておきますと、作成に際してはClaude 3.5 Sonnetを活用しております。
↓過去記事で公開した分も参考として、リンクだけ掲載します。(使い方などの詳細は、過去記事をご参照ください。)
↑今見ていて気づきましたが、ゆるToDoを流用して作らせたせいで、説明文がおかしいですね。そういうのもあるので、人間のチェックはきちんとしないといけませんね。
ソートのお勉強
ソートアルゴリズムを可視化して、学べるWEBアプリです。
![](https://assets.st-note.com/production/uploads/images/148820678/picture_pc_1b716cc8eea077c95e147b41e1bc4dc2.gif)
速度も変更できますし、戻る、進むもできます。
※ただし実行中に止めると、まれにソートが正常に完了しません。
ソートが完了してから、戻る、進むを使用されることをオススメします。
追加でパフォーマンス比較機能もつけました。各ソートを実際に走らせて、速度を比較できます。環境やブラウザによっては、結果はまちまちになる可能性があります。(スペックが低い端末ではフリーズする可能性があるので、データを絞るなど改変した方がよいかも。)
![](https://assets.st-note.com/img/1722166100984-EDoHc2TYdH.png?width=1200)
学習補助のツールの作成にも活用できるのは良いですね!
迷路自動生成&答え合わせ機能つき
可愛い感じにしてみました。迷路アプリです。
![](https://assets.st-note.com/img/1722166180233-jSL4Ar3LNU.png?width=1200)
答えを見るを押すと、答えをアニメーションで確認できます。
タイマー機能を使うことで、ちょっとしたゲームにもなります。
上記のHTMLを生成AIに投げて、デザインだけ変えてもらうのも良いかもしれません。(CSSを変えれば概ね良いかと。)
100マス計算&印刷機能つき
100マス計算(掛け算)ができるWEBアプリです。答え合わせもしてくれます。
また、印刷機能もあり、印刷する際には「年月日」「名前」を入れる欄も出てきます。(1ページの印刷に指定してあげると、無駄な印刷はされません。)
これは大人の脳トレにも良いと思います。(かなり昔流行りましたよね)
入力するコツとしては、PCであれば数字を打ってタブキーを押すと、次の入力にカーソルが進みます。
![](https://assets.st-note.com/img/1722166482501-ZAJT3XYuEn.png?width=1200)
結果を印刷することもできますし、何も入力しないで印刷することもできます。
生成はランダムです。
Splash Breeze~涼しげな水風船割りゲーム~
水風船かは分かりませんが、飛んでいる玉をプチプチ潰してハイスコアを求めるゲームです。ネット黎明期のフラッシュゲーを彷彿とさせますね🙄
![](https://assets.st-note.com/img/1722166875519-CVDan5sE8F.png?width=1200)
ハイスコアは読み込み直すと消えます。
ローカルストレージに保存されるように改造しても良いかも。
前に作ったタスクがふわふわ浮かぶ「あわポモドーロタイマー」をゲームにしたらどうだろう、と思って作ってみました。
その他
より一層実用性に乏しかったり、明らかに代替アプリがあるものです。
サイコロ
サイコロです。サイコロを振るを押すと、数秒後サイコロが自動で止まって結果が確認できます。
![](https://assets.st-note.com/img/1722167132605-jzAgzjd19I.png?width=1200)
インタラクティブ〜海の生き物〜
アートです。なんとなく涼しいものは作れないか、試行してみたもの。
![](https://assets.st-note.com/img/1722167223020-twqpEIZkbq.png?width=1200)
インタラクティブ〜涼〜
押すと気温が下がっている、ような気がするアートです。
![](https://assets.st-note.com/img/1722167356813-kl8nOAVXp2.png?width=1200)
それと同時に現在の温度が下がっていきます。(表示上)
特に公開はしませんが、日常のルーチーンにある作業を、半自動化させるWEBアプリを作っても良いかもしれません。結構いろいろ捗ります。
しかし、最近こういうのにハマった影響で他のことが疎かになっています。8月はバランスを見直したいですね。
この記事が気に入ったらサポートをしてみませんか?