江口依舞/通信ネットワーク演習

江口 依舞

通信ネットワーク演習

演習

• 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
  
  
  
  

最終成果物

RGB色当てゲーム

https://12eve24.github.io/javascript_rgb-game/

サイトの趣旨

本サイトは、Webブラウザ上で表示される色の仕組みを、体験を通して理解することを目的としたRGB色当てゲームです。

画面上の色は、赤・緑・青の3つの光の強さ（RGB値）によって構成されています。本サイトでは、RGBの各成分をスライダーで直接操作し、正解の色に近づけていく過程を通して、色の見え方と数値の関係を直感的に学べる構成としています。プレイ後には、正解色と入力色のRGB値に加え、それぞれの差分を表示します。これにより、単に結果を知るだけでなく、「どの色成分が影響していたのか」を振り返ることができ、色の成り立ちへの理解を深めることを意図しています。

技法・技術情報

• イベント処理（input / click）
  スライダー操作やボタン押下を検知し、画面表示を即時更新。

• 条件分岐（if / else）
  色差の大きさに応じて、結果メッセージを切り替え。

• 乱数生成（Math.random）
  正解となるRGB値をランダムに生成。

• 数値変換（Number）
  スライダーの文字列値を数値として扱うために変換。

• RGB色指定（rgb）
  Web標準の色指定方法を用いて画面に反映。

先行事例・参考情報

• 先行事例
  • RGBカラーシミュレータII｜京都産業大学

• スライダー
  • <input type="range"ジェネレーター【CSSデザインカスタマイズ】
  • <input type="range"> - HTML | MDN
  • input type="range"でレンジスライダーを作る｜HTMLリファレンス
  • 【HTML】初めてスライダー（<input type="range"/>）を使ってみました - Little Strange Software
• RGB
  • 【デザイン初心者向け】RGBは難しい？色変更が簡単にできるコツ
    
    
    

リンク

公開リポジトリ

• GitHub：https://github.com/12eve24