CHaserWeb

U-16プログラミングコンテスト（U-16プロコン）の「競技部門」では、対戦型ゲームプラットフォームであるCHaser（チェイサー）が使用されています。CHaserは、参加者が作成したプログラム同士を碁盤目状のフィールド上で1対1で対戦させる仕組みで、プログラミング学習やアルゴリズム理解の貴重な機会を提供しています。

しかし、CHaserでプログラムを開発するにはいくつかの課題がありました。Pythonなどの開発環境の構築が初心者にはハードルが高く、公式マニュアルがWindowsのみ対応しているため、Chromebookなど他のプラットフォームでの開発が困難でした。さらに、プログラムの実行ごとにサーバーの立ち上げやゲーム設定、IPアドレスやポート番号の入力など煩雑な手順を繰り返す必要があり、これらが開発の障壁となっていました。

これらの問題を解決し、プログラミング初心者が環境構築の手間なくCHaserに取り組める場を提供したいと考え、「CHaserWeb」を開発しました。

CHaserWebは、ブラウザ上でPythonコードを編集・実行できるPyodideと、直感的な操作が可能なコードエディタCodeMirrorを組み合わせることで、インストール不要で様々なプラットフォームで開発ができる環境を実現しました。ユーザーはブラウザ上でPythonコードを編集し、自分だけのプログラムでゲーム内のキャラクターを操作できます。視覚的なゲーム画面とリアルタイムのフィードバックにより、楽しみながらプログラミングの基礎やアルゴリズムの思考法を学ぶことができます。

このツールを通じて、多くの人がプログラミングやCHaserに興味を持ち、学習の一助となれば幸いです。

フロントエンド

• HTML：構造の構築
• CSS：スタイルの適用
• JavaScript：動的な機能の実装
• CodeMirror：コードエディタの実装
• Pyodide：ブラウザ上でPythonを実行
• Google Fonts：カスタムフォントの使用

バックエンド

なし：全てクライアントサイドで完結

ゲームロジック

CHaser：ゲームのロジックとルールをPythonで実装