パワポでゲームを作ってみた！

#え、パワポ？
はい、そうです。パワポでゲームを作ってみました。
パワポと言えば、プレゼンテーションの時に使用するのが普通です。でも、パワポの機能を工夫して使えばいろんなことができちゃいます。
そこで、今回は**「いらいら棒ゲーム」**を作ってみようと思います。


#プロジェクトの作成
<img width="1264" alt="パワポ起動画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/4accd63a-ebe8-75a0-9475-3b56b6597357.png">
>アイコンの部分は隠してあるのであしからず

白紙のプレゼンテーションを作成しましょう。
<img width="1552" alt="パワポ起動後画面２.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/820a3012-eda3-7792-e51e-5772ee37b39a.png">
これでひとまずゲームを作っていく準備ができましたー


#ゲームの型を作る


##スタート画面を作る
ゲームのスタート画面を作りましょう。
まず、お好きなように図形を挿入してください。
<img width="1552" alt="図形挿入.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/c21af371-27bf-7da7-5cac-eecc4b1ffc7b.png">
>今回挿入した図形の作り方はリクエストがあれば記事のしようと思います


##ステージを作る
新しいスライドを用意します。
図形を挿入してコースを作っていきます。
この時必ず、コースのスタート地点が**スタート画面のスタートボタンと重なる**ようにコースを作ってください。
<img width="1552" alt="コース１.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/619466ac-d0ff-68a3-251a-bfcfd4acbf2e.png">


##失敗画面を作る
新しいスライドを用意します。
そして、失敗した時に表示される画面を作りましょう。
<img width="1552" alt="失敗画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/4c9a003c-bec7-c0c7-5c26-56c48c909628.png">
失敗した時にもう一度最初から始められるように、リスタートボタンも作っておきましょう。
<img width="1552" alt="失敗画面（リスタートあり）.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/0130ecf1-fd0a-6fdf-6368-15749ce5cc2e.png">


##クリア画面を作る
新しいスライドを用意します。
無事にゴールした時の画面を作りましょう。
<img width="1552" alt="クリア画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/3b811c0c-fc1e-b91b-595a-aee8a9b93f00.png">


#動きをつける
今のままではただのスライドなので、ゲームになるように仕上げていきます。


##スタート画面
スタートボタンを右クリックして **「オブジェクトの動作設定」**を選択してください。
<img width="1440" alt="動作設定.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/be4e93af-0e46-fa3e-1e89-45118c722165.png">
**マウスのクリック時の動作**を設定します。
デフォルトでは**「なし」**となっているので**「ハイパーリンク」**を選択します。
そして**「スライド...」**を選択します。
<img width="620" alt="動作設定２.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/43e07f6d-dea2-388e-d494-3bed295ad36c.png">
すると、どのスライドへのハイパーリンクにするのか選択画面が出るので、ステージ画面である**「スライド２」**を選択してください。
<img width="620" alt="動作設定３.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/dcba7870-80f8-02df-8128-9f15474f7454.png">
これでスタートボタンを押すとステージ画面に進むようになりました。


##ステージ画面

###コース
下準備をします。
コースの壁に使っている図形を全部選択してください。
>シフトを押しながら選択することで複数の図形を選択できます

<img width="1552" alt="コース図形選択.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/b4b69ab9-01ab-be00-e344-480c00763a94.png">
選択したら、図形の書式設定から**「接合」**を選択します。
<img width="1552" alt="図形接合.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/d4b91b41-28fa-76fa-977b-5d980b57d41e.png">
すると、コースの壁がまとめて一つの図形になります。

コースの壁に当たり判定をつけていきます。
先ほど作ったコースの壁の図形を右クリックしてください。
<img width="1440" alt="動作設定４.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/d55a2e9b-412e-4b25-1ccc-a5c0ac13b638.png">
今度は**マウスの通過時の動作**を設定します。
先ほどと同じようにして**「スライド...」**を選択してください。
<img width="572" alt="動作設定ステージ画面２.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/0758735f-1193-c5d9-28b9-51726515c8b1.png">
今回は失敗した時の動作なので失敗画面である**「スライド３」**を選択してください。
<img width="572" alt="動作設定ステージ画面３.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/f01b9697-a558-f39f-52ac-505d10249f38.png">
これでコースの当たり判定は設定できました。

###ゴールボタン
ゴールボタンにも同様に動作を設定します。
今度は**マウスのクリック時の動作**を選択してください。
今回はゴールした時の動作なのでクリア画面である**「スライド４」**を選択してください。
<img width="858" alt="動作設定ステージ画面４.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/8f444e64-8a79-47ec-c417-2cca33d5f3b9.png">
これでゴールボタンの動作も設定できました。


##失敗画面
リスタートボタンに動作を設定します。
**マウスのクリック時の動作**を選択してください。
今回はスタート画面に戻る時の動作なのでスタート画面である**「スライド１」**を選択してください。
<img width="923" alt="動作設定失敗画面１.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/c3093ffb-cebf-0f4b-56f4-a408d3e4d59e.png">
これで全ての動作の設定ができました。
実際にスライドを再生して試してみてください。


#仕上げ
今のままだと、ゲームをしていて間違ってクリックしてしまった時にそのまま次の画面に進んでしまうようになっています。
では、このバグを直します。

スライド一面に図形を挿入してください。色は背景の色と同じ**白色**に変更してください。
<img width="1552" alt="仕上げ１.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/fa8c5ee6-ec4a-a30b-fca0-30f75eccd06c.png">
そして、この図形を右クリックして**「オブジェクトの動作設定」**を開いてください。
**マウスのクリック時の動作**を変更します。
今回はクリックした時に同じスライドにとどまるように、**現在のスライドと同じスライド**を選択してください。
<img width="1013" alt="仕上げ２.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/ef20a9c4-da9e-5f6b-f62b-b4e84d35859c.png">
最後に、図形をもう一度右クリックして**「最背面へ移動」**を選択してください。
<img width="1440" alt="仕上げ３.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364760/931dd4cc-0e54-7424-c5b0-8859aac508bc.png">
他のスライドでも同じように繰り返してください。

これでバグが直りました！


#おわりに
今回はパワポを使って簡単なゲームを作りました。これでパワポに秘められたパワーを感じてもらえましたでしょうか？笑
暇な時にでもパワポで遊んでみてください。

>今回作ったパワポファイル[こちら](https://drive.google.com/file/d/1A7iGP2crGWX1FlQYFWq36te3ORJkGVS7/view?usp=sharing)からダウンロードしていただけます。