推しアイデア
用意されたテーマに乗っかろう！ということで和風のフォントやイラストを使った、”和風感"を全面に押し出した作品を作りました。また、ユーザーに緊張感を持ってもらうために、今回は時間制限も設けました。加えて、日本全体だとかなり難しいので、比較的簡単な東日本版・関東地方版も用意しました。
Japan-Lights-Out
GitHub
CSS
JavaScript
HTML
VSCode
"ライツアウト"というゲームの日本地図verです。
作った背景
テーマの「にほん」と、「ライツアウト」というゲームを組み合わせて、「日本の地図上で行うライツアウト」というテーマを決めました。通常は3×3などの規則正しく並べられたタイルの上で行われますが、日本地図のような不規則なマップ上だと、どのような動きになるのかとても気になっていました。
推し技術
ライツアウト内部の技術もですが、特に全体のデザインについては知識ゼロの状態からのスタートでした。私たちとしては中々良いものができたと思っています。ボタンを配置し、それを押せばページが動くという何でもないような仕組みでも、私たちにとっては感動で、全てが思い入れのある推し技術です！
プロジェクト詳細
Japan Lights Out Game
概要
日本地図を使ったLights Outゲームです。各都道府県をクリックすることで、その都道府県と隣接する都道府県のライトの状態が変わり、すべてのライトを消すことを目指す論理パズルです。
ゲームの目的
- すべての都道府県のライトを消すこと。ただそれだけです。
操作方法
- 各都道府県をクリックすると、その都道府県と隣接する都道府県のライトの状態（オン・オフ）が変わります。
- 「始める」ボタンを押すとゲームがスタートし、ランダムにライトが点灯した状態になります。
- 「リセット」ボタンでゲームを初期状態に戻し、タイマーもリセットされます。
- 「自動で解決する」ボタンがあり、将来的には自動解決アルゴリズムが実装される予定です。
制限時間
- 初級（関東地方）：制限時間3分
- 中級（東日本）：制限時間5分
- 上級（日本全体）：制限時間7分
技術的な特徴
- インターフェース: SVGとCSSを使用して日本地図を表示し、都道府県ごとにライトの状態を視覚的に示します。
- 状態管理: JavaScriptを用いてライトの状態を管理し、隣接行列を使ってクリックによる状態変化を効率的に処理します。
- タイマー: JavaScriptのタイマー機能を用いてカウントダウンを実装し、制限時間内でのクリアを目指すゲーム性を提供します。
開発の背景
日本の地理を楽しく学びながら論理パズルを解く経験を提供したいと考え、このゲームを作りました。また、ゲーム開発の経験を深めるために、タイマーや難易度設定などの機能を追加し、ユーザーに挑戦的な体験を提供します。
推し技術
SVGとCSSを駆使して日本地図を動的に操作し、JavaScriptでタイマーやライトの状態管理を実現しました。隣接行列を使用することで、効率的な状態遷移を実現し、ゲームプレイのスムーズさを確保しています。
