私はGoogleTVの既存のウェブアプリケーションに十字キーナビゲーションを実装する任務を負っています（そして私はGoogle Chromeでテストしていますが、これまでのところ同じように動作しているようです。十字キーナビゲーションを実装するためのメモには、upの基本的なハンドラーがあります、右、左、下、を選択します。
現在、仮想カーソルを初期化してから、さまざまな十字キーストロークを初期化するスキームがあります。document.elementFromPoint()以前に選択されていない新しい要素が見つかるまで、使用してループすることに依存しています。現在の位置を示すためにcssを使用しoutline:ており、dpadコントロールの1つが選択されている場合にのみ表示します。
dpadClickableクリック可能なすべてのアイテムにクラスを追加する初期化のステップがあり、カーソルが移動するdpadHighlightedと、新しいアイテムに追加され、他のすべての要素から削除されます。正しく見えます。
スクロール可能な要素がある場合、またはポイントを下に移動しても何も見つからないような方向の場合、これはすべて失敗します。
私が欲しいのは、すべてのdpadClickableアイテムを保持するためのデータ構造です。次に、十字キーをクリックすると、それを繰り返して、最も近い上、下、左、および右の要素を見つけることができます。top同様に、とleftプロパティに基づいてそれを行う必要がありますか？または、計算された中心点に基づいていますか？
これを実装しているjQueryライブラリを見つけ、ある程度リバースエンジニアリングしています。しかし、私が本当に望んでいるのは、このクラスのプログラミング問題の入門書です。グラフィックプログラミングアルゴリズムを探す必要がありますか？ゲーム？他に何かありますか？
更新：ユーザーエクスペリエンスStackExchangeサイトでの質問：既存のWebアプリケーションへの十字キーナビゲーションの追加：リソース？