作ったアプリ
遊び方
これはじゃんけんの出す"手"をプログラミングして戦わせるアプリです。
例えばグーだけを出すA君のプログラムと
グーとパーを交互に出すB君のプログラム
を300回戦わせると
B君が勝ちます
こんな感じでじゃんけんのアルゴリズムを考えて戦わせるアプリです
例
A君のプログラム
HAND = 0
B君のプログラム
HAND = 1
if COUNT % 2 == 0:
HAND = 0
戦わせると・・・
こんな結果になります。
これをWebで遊べるアプリです。
システム構成
今回使ったものは以下の通りになりました。
- Vue.js
- Buefy
- AWS
- serverless framework
- dynamodb
- firebase
- circleCI
フロントエンドの部分はVueとBeufyを使いました。
同じような画面を作ることが多かったのでサクサク作れました。
バックエンドではAWSのサービスをserverless frameworkで構築しました。
アクセスが不安定なサービスになりそうなのでこちらのフレームワークを使いました。
ホスティングと認証にはfirebaseを使用しました。
本当はAWSなのですべてまとめたほうがいいのかもしれませんが
firebaseは無料で結構使えるのでこちらを採用しました。
無料枠などもあり、すべて無料でできました。
本当はRDBを使いたかったのですが、お金がないので無理やりdynamodbで作りました（反省）
機能
じゃんけんプログラム
じゃんけんのアルゴリズムを実装するにあたり、システム変数的なものを用意することにしました。
| 変数名 | 型 | 概要 |
|---|---|---|
| HAND | Intger | 0~2 の数値を代入することでグーチョキパーを出せる |
| WIN | Intger | 勝った数 |
| LOSE | Intger | 負けた数 |
| DROW | Intger | あいこの数 |
| P | List | 自分が出した手の履歴 |
| E | List | 相手が出した手の履歴 |
| COUNT | Intger | 対戦数 |
これを実装したことにより100回負けたらグーを出すみたいなプログラムを書けます
HAND = 1
if LOSE >= 100:
HAND = 0
コーディング画面
ハイライトやインデントの機能が欲しかったため今回は「Codemirror」を使用させていただきました。
Vueで使用する場合は「vue-codemirror」を使うと単一コンポーネントで使用できるため、気持ちよく作れました。
ランキング機能
ランキングの実装には「イロレーティング」を使いました。
イロレーティングは対戦型の競技に使用されており、相対的な強さを評価します。
そのため、今回のランキングではこちらを使用し投稿されたプログラムを総当たりさせて順位を決定しました。
引用:イロレーティング
https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%AD%E3%83%AC%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0
認証機能
今回は一人が複数のプログラムを投稿できないように認証機能を追加しました。
Firebase Authenticationを使用しGithubで認証できるようにしました。
感想
自分の想定しているものが一通りできたので、だいぶ満足しています。
ただセキュリティやじゃんけんのプログラムに不備があるかもしれないのでこれからも運営、開発をしていきたいと思います。