クソアプリ Advent Calendar 2021 1日目の記事です。 前置き おはようございます。DE-TEIUです。 クソアプリを開発しないと年を越せない体になってしまったので今年もやっていきます。 過去にアドベントカレンダー用に作ったクソアプリ p5.jsで作ったダメなソリティア 絶対に作業できない作業用BGMサイト 社会に一石を投じるクソアプリ開発 鼻毛が生えるカメラアプリ 映画館のスクリーンでYouTubeが見られるクソアプリ 成果物 誰しも人生の中で一度は電卓に触れる機会があったと思います。 しかし、実は皆様の知る電卓というのは、既にレベルが最大まで上がって完成されているものだったのです。 というわけで、今回は電卓が成長していく過程を体験できるWebアプリを開発しました。 適当にボタンを押したり計算したりすると経験値が溜まって電卓のレベルが上がっていきます。 電卓育成シミュレ

これでp5.js(あとp5.sound.js)がインストールされます。 p5.jsを使ってみる 使える機能は公式のリファレンスを見ると大体わかりますが、Parcelでビルドする場合は実装方法が若干変わります。 とりあえずindex.htmlからapp.jsを参照するものとして、app.jsをこんな風に実装します。 import "../scss/style.scss";//index.htmlで使うcssを定義 import P5 from "p5";//p5.jsのライブラリを呼び出す import "p5/lib/addons/p5.sound";//音声ファイルを使うならp5.sound.jsも呼んでおく const sketch = p => { p.preload = function() { //初期化処理をここに書く //このメソッド内に記述された処理が完了するまで画面(p5