Philarium

Othello (2022)

Java Swing製デスクトップアプリをWebブラウザへ完全移植。

coffeeJava (Original)
htmlHTML5
cssCSS3
javascriptJavaScript
historyGit

Overview

2022年、大学の講義におけるグループワーク課題として制作されたオセロゲームです。
元々はJava (Swing/AWT) で開発されたデスクトップアプリケーションでしたが、 本ポートフォリオへの掲載にあたり、当時のソースコード(ロジック・デザイン)を解析し、Web技術(HTML5/Canvas/JS)を用いて忠実に再現しました。

デザインや挙動、そして "Random AI" と呼ばれるシンプルなCPUロジックも当時のまま実装されています。

🔊 音が出ます

Key Features

1. Java Swing to HTML5 Port

元のJavaコードにおける JPanel CardLayout といったSwing特有のコンポーネント構造を、 HTMLのDiv構造とCSS Grid、そしてJavaScriptのクラス設計にマッピングして再構築しました。

2. Original File Structure

移植元のJavaプロジェクトのファイル構成は以下の通りです。

Othello/
├── Othello.java      (Entry Point)
├── Logic.java        (Game Rules & AI)
├── PanelMain.java    (UI Controller / CardLayout)
├── PanelHeader.java  (Top Bar)
├── PanelBoard.java   (Game Board)
├── PanelCell.java    (Individual Square)
├── PanelGame.java    (Game Screen Container)
├── PanelOrigin.java  (Size Select)
├── PanelMode.java    (Mode Select)
├── PanelTurn.java    (Turn Select)
├── EnumSize.java
├── EnumMode.java
├── EnumColor.java
├── EnumNotice.java
├── IFClick.java      (Interface)
├── IFNotice.java     (Interface)
├── DialogResult.java (Swing JDialog)
└── DialogShort.java  (Swing JDialog)

3. Faithful Reproduction

盤面の緑色 (#ccffe5) や、ボタンの無機質なグレーなど、当時のデザインをあえてそのまま再現しています。

4. Collaborative Development with Git

本プロジェクトはグループワークとして実施され、Gitを用いたバージョン管理と共同編集を行いました。 機能ごとのブランチ運用やプルリクエストによるコードレビューを通じて、役割分担を明確にしつつ、複数人での円滑な開発を実現しました。