久木田直央/通信ネットワーク演習

久木田 直央

通信ネットワーク演習

演習

• Blank File : javascript_blank
• Color Change A : javascript_change_a
• Color Change B : javascript_change_b
• Fortune Slip : javascript_fortune
• Gallery : javascript_gallery
• TabUI : javascript_tab
• Object : javascript_object
• Text Animation : javascript_text_animation
• Scroll : javascript_scroll
• Map : javascript_map
• Weather : javascript_weather
  
  
  
  

最終成果物

ぷかぷかしりとりゲーム

https://29-mochi.github.io/puka_chain/

サイトの趣旨

メンダコを擬人化したキャラクターとしりとりができるサイトです。
コンピューター側は、水棲生物の名前だけを登録した辞書から回答します。水中をイメージした、ポップなデザインにしました。

技法・技術情報

• ゲーム・アルゴリズム
  • フィルタリング: filter() で使用済み単語を除外
  • ランダム選択: Math.random() と Math.floor() でコンピューターの単語をランダムに選択
  • 条件分岐: バリデーション（空欄、重複、ルール）と勝敗判定
• イベント
  • DOMContentLoaded: ページ読み込み完了時の初期化
  • keydown: Enterキー検出で送信機能
• タイミング・アニメーション
  • setTimeout(): コンピューターターンに遅延を設定
  • setInterval(): 泡を継続的に生成
  • CSS アニメーション連携: JavaScript で animationDuration、animationDelay をランダムに設定

先行事例・参考情報

• ブラウザで動くしりとり：しりとりゲーム
  
  
  
  

リンク

公開リポジトリ

• GitHub：https://github.com/29-mochi