1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ジャストワンを作成しよう!part1(AWS + Python)

Last updated at Posted at 2024-12-23

ジャストワンというボードゲームをwebアプリで作成しました。

はじめに
awsでのアプリ開発は初めてなのでコードや構成はがばがばなので参考程度にどうぞ

ジャストワンって何?

ルール説明
ルールとしてはシンプルです。
回答者とヒント役に分かれてヒント役のヒントを元に回答者がお題を当てるというゲームになっています。
しかし、ヒント役のヒントが被ってしまったらヒントを出せないというのがこのボードゲームの面白いところになっています。
詳しくは「ぼくボド」さんのサイトをご参考ください。
https://boku-boardgame.net/just-one

それでは開発環境をご紹介します。

開発環境

AWS

サーバー部分はAWSを使用。
構成図は以下です。
ApiGatewayからLambdaを実施してdynamodbへのpost,get処理をするようになっています。

s3にはhtml,css,javascriptなど配置して静的ホスティングにて実現しています。
dynamodbはプレイヤー情報、ゲーム情報などを格納しています。
cloudwatchはlambdaのログ,ApiGatewayのログ確認のために使用しました。
image.png

完成形

完成形の紹介
タイトル画面
こちらに名前を入力
image.png

こちらでルーム作成、ルームに参加ができる仕組みです。
image.png

画面遷移後は名前が表示されるようになっています。
image.png
プレイヤーが揃うとこんな感じ
image.png
ゲーム開始するとこんな感じでお題が表示されます。
image.png
回答者画面はこんな感じ(ゲーム開始すると1名だけ選ばれる)
image.png
画面遷移後は全員のヒントが表示されるようになっています。
こっからかぶっていないヒントを選択して完了ボタンを押すと回答者が回答できるようになっている仕組みです。
image.png
回答者画面
image.png
最後回答後の画面
答えは「トラック」なんですけども画面に表示されてないですね。。。
最後に答え合わせできる画面になっています。
image.png

以上、ざっくりこんな感じで作成しました。
次回はコード修正等も行いつつ作成過程について記事を更新していこうと思います。

以上!次回もお楽しみに!!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?