MHCID, Interactive Tech

 Spring Quarterはこのプログラムの後半になり、卒業まで残り6ヶ月となります。先生から学ぶ授業はSpringとSummer合わせて2つしかありません。Springにひとつ、Summerにひとつ。並行でCapstone Project(卒業制作)がSpring quarterから動くからです。Capstone projectについてはまた別の記事でまとめたいと思います。

 この記事では、Spring Quarterで受けた授業「Interactive Tech」について簡単にまとめたいと思います。

◇◇◇

 この授業はプログラミングの授業でした。コーディングをハンズオンで勉強する授業でした。授業の大半がコーディングの授業だったので、最終プロジェクトで提出した課題の説明をしたいと思います。(プログラミング初心者なので、とてもざっくりと説明になります。暖かい目で読んでくださいませ)

Reversi Project

 HTML + Bootstrap、Javascript、WebSocketを使ってとてもシンプルリバーシゲームを作成しました。対戦相手を選べるロビー部屋があって、リバーシゲームが遊べて、対戦相手とチャットができるというシンプルな作りです。サーバー側とクライアント側の理解とそのお互いをつなげるWebSocketの理解が今回のプロジェクトでは大事なのかなと感じました。

 コーディングはAtomで行い、Sourcetree経由でバージョン管理をしてGithubを更新していました。Herokuというプラットフォームでビルドして、私が作成したゲームを見ることができました。すべてマスターにマージする前に、ローカルサーバーで確認していました。

Homepage

homepage.png

 私のリバーシゲームは通常の黒と白の駒を使うのではなく、アメリカのファストフードのロゴを駒として使用しました。高校時代に友人たちといつもどこにご飯食べに行くのか悩んでなかなか決まらなかったことがあったので、食べに行く場所をゲームで決めよう!という思いで駒はファストフードにしました。本当はプレイヤーが行きたいファストフードの駒まで選べるというところまで開発したかったのですが、この授業内では余力がなく…いつか私自身のプロジェクトとして終わらせたいと思っています。

Lobby

lobby.png

 ロビー部屋で対戦したい相手を選んだり、チャットしたりすることができます。サーバー側とクライアント側で何が起きているか見えるように、すべてログをさせています。プレイヤーごとにuser_nameの値があって、ゲーム部屋でもその値が使用されています。右上の「Invite」ボタンをクリックすると相手側では「Play」にボタンが変わり、ゲームを開始することができるようになっています。

Game

game.png

 ゲームを開始すると、自動的に駒をプレイヤーに与えます。プレイヤーの順番になると、マウスのホバーで駒を置けるところを教えてくれます。駒が置けないところをクリックするとエラーがでたり、自分の順番じゃないときにクリックするとエラーがでます。上にタイマーがあり、どのくらいかかっているのか確認ができます。ゲームボードの下にチャット機能があり、対戦相手と話せます。チャットのロジックはロビーと同じです。クライアント側で駒を置けるところを計算し、駒の数を数え、ゲームの勝ち負けを判断できるようになっています。

Final Deliverable

Githubのリンクはこちら: https://github.com/yuuzus3/reversi

ゲームのリンクはこちら: https://reversi-yuuzus.herokuapp.com/

Previous
Previous

Gender in Fashion eCommerce Websites

Next
Next

MHCID, Advanced Design