概要

このゲームでは、バグやエラーが含まれたJavaScriptのコードが出題され、それを正しく修正することが目的です。ただし、コード全体は表示されず、カーソル周辺のみが見える仕様のため、非常に高難易度となっています。

ヒントに抽象構文木が表示されており、コードと答えを比べながらゲームを進めることができます。

抽象構文木

抽象構文木(AST)とはコードから言語の意味に関係ある情報のみを取り出し、木構造で表現したものです。 「言語の意味に関係ある情報」とは演算子や式などプログラムの実行に影響する要素で、意味に関係ない情報はコメントやスペースなどがあります。

使用技術

フロントエンド

• Typescript
• React

バックエンド

• Go
• Echo
• supabase

技術構成図

苦労した点

• マウスカーソルに合わせて見える範囲を制限する実装をすること
• ゲームそのものの操作方法の考え方
• ブラウザ上で書いたコードを実行する実装

主な実装

• ブラウザ上でエディタようなコーディング monaco-editorを使用してブラウザ上でコーディングできるようにした
• 書いたコードを実際にブラウザ上で実行できる web-workerを使用してメインスレッドと分離されたスコープでコードを実行し、メインスレッドとはメッセージングのみでデータのやり取りをしている。
• 抽象構文木を見ながらコードが書ける 答えのコードとユーザーが編集しているコードをacornを使用してパースし、抽象構文木を表示
• カーソルの周りしかコードが見えない カーソルの位置情報を追跡して、カーソルの周りに透明な画像を付与する