JavaScript - クッキークリッカー
割り当てソース: https://github.com/becodeorg/BXL-Swartz-5.34/blob/main/1.The-Field/12.Javascript/cookieClicker.md
ライブバージョンへのリンク: https://teo-cozma.github.io/Javascript/
チームメンバー
- Brigita Sabutyte (JavaScript および HTML)
- デビッド・ティレル (JavaScript)
- テオドラ・コズマ (HTML および CSS)
言語
ツール
- Visual Studio コード (テキスト エディター)
- Discord、Google Meet、Github、Replit (コミュニケーション)
- Adobe XD（プロトタイピング）
- W3C マークアップ検証サービス (HTML 検査)
- W3C CSS 検証サービス（CSS 検査）
- Google Lighthouse（性能検査）
画像
リソース
クッキークリッカーとは何ですか?
- http://orteil.dashnet.org/cookieclicker/
- https://en.wikipedia.org/wiki/Cookie_Clicker
- https://cookie-clicker2.com/
- https://particle-clicker.web.cern.ch/
- https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s
私たちのプロジェクトのチュートリアル:
https://www.flaticon.com/free-icons/cookie
https://www.youtube.com/watch?v=uUgOBe_wb6E
https://www.youtube.com/watch?v=j_nI6G3ZDiE
https://codesource.io/how-to-disable-button-in-javascript/
https://stackoverflow.com/questions/57477529/disable-a-button-if-empty-input
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=vU2akkcSV-g
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=KgYkgBno5Gs
https://stackoverflow.com/questions/8583524/how-to-set-time-limit
検証サービス:
- https://validator.w3.org/#validate_by_input
- http://jigsaw.w3.org/css-validator/
プロジェクトログ
1日目 (10/25)
指示の確認
- 内容：クッキークリッカー。
- 理由: 統合プロジェクト (主に Javascript スキル)。
- 日時 : 今日から 10 月 28 日まで、丸 4 日間のチームワークになります。
- 方法: 3 人のグループで協力し、それぞれのコード言語を使用します。
- 人物：テオドラ・コズマ、ブリギタ・サブタイト、デヴィッド・ティレル。
- どの役割ですか？フロントエンド、バックエンド、プロジェクト管理があります。すべての役割は交換可能であり、いずれにしてもコードは共有されますが、全体的には、1 人が特定の役割により集中できます。
- バックエンド (JavaScript) : David.
- バックエンド (JavaScript) + フロントエンド (HTML 構造) : Brigita。
- フロントエンド (CSS + おそらく Sass) + プロジェクト マネージャー : Teodora。
ブレーンストーミング
3つのセクション:
Cookie セクション: Cookie カウンターのヘッダー 1。 H1 はクリック数です。
- インタラクティブ Cookie + そのタイトル + Cookie カウンター = 1 番目のセクション。
- 「HTML 内に、カウンターをインクリメントするクリック ボタンと、そのカウンターを表示する 0 に初期化されたラベルを配置します。」
スコアセクション:
- スコアセクション: スコアカウント。
- 1 Cookie : Cookie は独自のボタンです。
(クッキー + スコア = 左半分)
- ストアセクション:
- 成果とアップグレード ?
- ストアセクション = ボタンアップグレードクリッカー + ポイントカウンター = 2 番目のセクション:
(右半分)
例（参考）：http://orteil.dashnet.org/cookieclicker/。
今日のタスク
今朝（10:30～12:30）
- プロジェクトに関する調査（課題の指示）。
- 現在の必須手順に何が対応するかを確認してください (ボーナスは当面保留されます)。
- オリジナルの Cookie クリッカーのコードを詳しく調べます。
(https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s)ゲームの説明 (そしてその存在感!)
- 1 クリック = 1 クッキー。
- 15 クリック = 15 クッキー = 1 カーソル (購入)。
- 10 カーソル = 1 Cookie/秒 (CpS)。
- 100 個のクッキー = あなたのクッキーを製造して販売するおばあちゃん。
- クッキーは農場や鉱山、工場などを購入できる通貨＝クッキーエコノミーとして浸透し圧倒的です。これは最終的にクッキーバースに発展します。
- 存在の超越＝上昇して再スタート。
- ゴールデンクッキーはランダムに出現します。
- おばあちゃんの場合はどうすればいいですか？反乱と終末の可能性があります。経済的利益で全員を救うか、搾取してより多くの富を築きます。
- コンソールでの小さな「コードハック」: Game.Earn(x)。
(http://orteil.dashnet.org/cookieclicker/)
情報ログ/バージョン履歴
- 安全に保存
- カーソルの表示スタイル
- インポート/エクスポート機能: 古いバージョンからセーブ ゲームを取得します (1 週間後に無効になります)
- 販売ボタン
- ランダムなゴールデン クッキー (頻度の決定方法)
- 統計情報をクリックする
- クリックするとブーストがかかります
- おばあちゃんの不満と終末 --> クッキーを消費する生き物が生まれる
- アップグレードと実績に関する統計メニューセクション
- オプションメニュー:
- 一般: 保存 + 自動保存、エクスポート/インポート、ワイプ保存;
- 設定: 音量、派手なグラフィック、サウンド... これらはすべてボーナスです。
コードの裏側 (検査官と調査)
- HTML 構造(見た目のために保持するもの):
- Head : スタイルとスクリプトへのすべてのリンク (タイトルが点滅しています...)
- 体 ：
- バナーラッパーなし
- トップバー : 著作権とソーシャル メディアへのリンク (フッターに似ていますが、ページの上部にあります)。今年は、名前とランディング ページ (?) へのリンクに著作権情報を必ず含める必要があります。
- Div id:"game" : ゲームの実際のセクション。
- セクションは「セクション」タグの下にあり、位置 (左、右、中央) + 区切り文字に応じて独自の名前が付けられます。
- アンカー: 独自のクラスタイプですか?調べてみてください。
- Cookie アンカー = クリック可能な Cookie !!!
- 架空の裏付け名を追加しますか?
- クッキー カウンタ : x クッキー ;毎秒: 秒。
- オプション、統計、情報などを含むメニューを作成しますか?
- (技術的な問題: データを更新するためにページが更新され続けるため、点滅する前に 1 つのセクションに留まってコードを確認するのが困難です)
- 「b」タグ：何のためにあるのですか？
- いくつかの div が非表示になっていますか?
- ストアセクション:
- Buy/Sell : クリックするたびに値が変化するため、これらは Javascript イベントにリンクされる必要があります。
- 製品 (鉱山、おばあちゃん) : ゲームの最初の開始時には、これらは非表示/隠蔽されている必要があります。 (別の興味深い参考文献: https://particle-clicker.web.cern.ch/)
本日午後（13:30～17:00）
- アイデアを収集し、調査し、リソースを共有します。
- 今後、どのような技術的な困難や課題が待ち構えている可能性がありますか?
- 乗数はどのように機能しますか?
- セクションとそのボタンのレイアウトを表示します (ただし、これは特に心配する必要はありません)。
- JavaScript の適用方法を理解する。
- 各ボタンのコードの記述方法に関するリソースと情報を収集します。
私たちのグループワーク方法論とは何ですか?
先を考える - 評価部分
- 定期的に進捗状況を評価し、必須の機能が含まれていることを確認してください。
- ReadMe を定期的に更新します。
- 最後に (最終日、またはコーディング プロセス中であっても) 検証およびパフォーマンス ツールを使用します (Lighthouse および W3C 検証ツールを参照)。おそらく木曜日に。
本日午後のステップ（14:30～16:30）
- さらに調査を進め、明日のタスクを計画します。
- Brigita : HTML のリサーチと執筆。
- David : Javascript の研究です。
- Teodora : ビジュアルリサーチとプロトタイピング。
2 日目 (10/26)
9:00に朝礼:
- ステップ5が完了しました。
- コードを共有します。
- 技術的な問題: HTML と Javascript を接続し、機能を適切に動作させる。
- また、ボーナスはプレイヤーのためのものなので、ステップ11以降は必須です。
- Autoclicker は David によって行われています。
- 乗算は Brigita によって行われます。同様に保留中です。
- スクリプトの問題を解決します。
今朝（9:30～12:30）
割り当てられたステップを続行します。問題があれば調べてください。 13:30に会議を開き、進捗状況について話し合い、問題を解決します。
今日の午後 (13:30 - 16:30) Teo : サイトをレスポンシブにします。注: マルチプライヤー ボタンにはコストも含まれている必要があります。 + Cookie の量に応じて特定のボタンを無効にするスクリプトを見つけます。 David : 機能を共有します。ロード機能が解決されました。 Brigita : コードと関数を共有。構文の問題が解決されました。
スクラムミーティング（16:30～17:00）
何が行われたのですか？
どのような問題が発生し、解決されましたか?
次のステップは何ですか?
問題 ：
- 要素を中央に配置する方法を考え中!!!!!!! （もう一度記憶を新たにしなければなりませんでした）。
- Javascript を使用してボタンを無効にする方法: コーディングの問題。
- マルチプライヤを使用すると保存とロードが機能しません。
- メイン CSS へのコンパイルの問題のため、Sass の使用を継続できません。それでは、バニラ CSS を使用したスタイリングに戻ります。
明日修正する必要がある問題:
- [保存] および [ロード] ボタン ;
- (再度) 2 ずつ増加する乗数を取得します。
- 条件に応じてボタンを有効/無効にします (ステップ 12)。
- ボーナス: ステップ 11.
3 日目 (10/27)
朝礼（9:00）
昨日やったこと：
- レスポンシブ (保留中)
- 調査の保存/読み込み (保留中)
- 乗数（解決済み）
今日やるべきこと:
夜の大会（16:45～17:00）
私たちがなんとかできたこと:
- 有効化/無効化ボタン
- 乗算器が機能するようにしました (AutoClicker でのみ)
- ブースターの製作開始（ボーナス）
- レスポンシブCSS
明日しなければならないこと:
- JavaScript の手順をすべて完了します。
- 「メイン」HTML コードを適切なスクリプトで更新し、スタイルを設定します。
- ページをデプロイし、LightHouse を使用してアクセシビリティ、ユーザビリティ、SEO などを検査します。
4 日目 (10/28)
朝礼（9:00～9:30）
今日やるべきこと:
午後の勤務（13:30～16:00）
結果 =
- パフォーマンス = 91;
- アクセシビリティ = 95 ;
- ベスト プラクティス = 100 ;
- SEO = 92 ;
プロジェクト後のレポート (明日 10 月 29 日の 16:20 ～ 17:00) :
- 残っている技術的問題:乗数。明日またレビューします。
(10/29)
