猫とタスク生活アプリ

アプリの概要

自分でタスクを3つまで設定し、タスクを完了すると猫にご褒美をあげられるアプリです。
ご褒美をあげると猫の好感度が上がり、好感度によって猫の表情やメッセージが変わります。

できること

  • タスクを最大3つまで登録できる
  • タスクを完了できる
  • タスク完了でご褒美回数が増える
  • ご褒美を選べる
    • おやつ
    • 遊ぶ
    • 撫でる
  • ご褒美によって好感度が上がる
  • 好感度によって猫の反応が変わる

学べること

① 配列

let tasks = [];

タスクを複数保存するために使います。

② 入力フォーム

taskInput.value

ユーザーが入力した文字を取得します。

③ 条件分岐

if (tasks.length >= 3)

タスク数が3つ以上なら追加できないようにします。

④ DOM操作

taskList.innerHTML = "";

HTMLの表示をJavaScriptで書き換えます。

⑤ ボタン操作

addEventListener("click", ...)

ボタンを押したときの処理を作ります。

⑥ 状態管理

let love = 0;
let rewards = 0;

猫の好感度や、ご褒美回数を管理します。

まとめ

タスク管理と猫育成を組み合わせたWebアプリ。
タスクを完了すると猫にご褒美をあげられて、好感度が上がる。
好感度によって猫の表情や反応が変わる

コメント

タイトルとURLをコピーしました