今日はなんとなくお散歩にきっかけが欲しい
いつもは当てもなく歩いている自分ですが、今回はただ歩くだけではなく、何か外に出るきっかけが欲しい...
どうせならお散歩中に運良く見つけたものたちでビンゴができたら、散歩に行きたくなるかも！
という訳で、今回はweb上でさんぽビンゴができるwebアプリを作成しました。
使い方
- マス目を触るとチェックを付けることができます。
※チェックされたマスをもう一度触るとチェックが外れます。 - やり直したい場合はやり直すボタンを押すと、すべてのチェックをリセットできます。
- 散歩の行き場所に迷ったら、検索マークを押してみましょう。
作り方
環境設定
- CodePen
- Netlify
- jQuery.js （JavaScriptライブラリ）
- iTyped.js （JavaScriptライブラリ）
コード
See the Pen CSS Grid: Bingo Card by mmmrym (@mmmrym) on CodePen.
こちらのコードから、
- ビンゴのマス目、配置、ビンゴの内容を変更
- iTypedでタイピングアニメーションを追加
- 散歩のアイディアとして「散歩の達人」のリンクを添付
そして、完成したのが上記のコードになります。
反省点
web上ではビンゴのレイアウトに見えるが、スマホの縦方向で閲覧するとリスト表示になってしまい、一見ビンゴなのかわからなくなってしまいました。
お散歩が更に楽しくなりました
なんとなく歩くのも良いですが、周りのものをよく見てビンゴを狙うのもまた楽しいです。ビンゴできたら帰りにアイスを買いましょう。(ビンゴするために歩き回ると思うのでアイスは食べても大丈夫な計算です)
みなさんもぜひお散歩のお供に使ってみてくださいね！