【越境学習】プログラミング講座 :: Pong ゲームを作ろう！

# 越境学習ってなに？

自分の所属する組織の枠を自発的に __"越境"__ し、新しい学びを求めることです :raising_hand: 
このテキストは周りの方々に __"越境"__ してもらい、エンジニアの仕事を知ってもらおうと作成したモノです。 :books: 

ちなみに、チームのエンジニア向けて__「枠を越えた働き方」__なるものを勝手に提唱しております。

> ### 枠を越えた働き方
> エンジニアはクリエイティブな仕事だ。決められた仕様通りにコードを書くのは単なる作業だ。私が本当にやるべき仕事は、ユーザーの悩みをどうやったら『仕組み』で解決できるか思考し、それを創り上げること。
>
> エンジニアという枠を越えよう。
> あなたの隣には優れたデザイナーが、
> あなたの向かいには優れたマーケターが、
> 手触り感のあるプロダクトを創る良いチームがある。
> _cf. [クリエイティブな働き方を支える6つの指針](https://yulii.github.io/creative-credo-20151229.html)_

要するに、職種は違えど同じチームだから、みんなと協力して良いモノを作りましょうということです。

# プログラミング講座のゴール

プログラミングをやったことがない人に、

- プログラミングは地道な作業である
- プログラムは思った通りに動かない（書いた通りに動く）
- 作業は予測以上に時間がかかるものだ（ホフスタッターの法則）

ということを知ってもらう、体感してもらうこと。

_「プログラミングが出来るようになる」「エンジニアって大変なんだよ！」という話ではないです。プログラミングする時にどんなところで時間が掛かるのかを知ってもらって「今すぐこの機能が欲しい！」とはやる気持ちを少し静めてもらえればいいなーと。_

# プログラミングとは？

今回のプログラミング講座は[Scratch](https://scratch.mit.edu/) を使います。Scratch はMITメディアラボが開発した、プログラミング言語学習ツールです。

_うちのプロダクトはRuby で書いているけど、今日はRuby じゃないんだ・・・_

## 3つの制御構造

プログラミングには3つの指示（制御構造）があり、これらを組み合わせるとコンピューターを意図したとおりに動かすことが出来ます。

- 順次
    - 上から順番に動かす（特に指定しなくてもコンピューターが動かしてくれます）
- 選択
    - ある条件のときに動かす（分岐処理）
    - Scratch では「制御」に含まれます
    - 実際のプログラミング言語では `if/else`, `switch` など
- 反復
    - 繰り返し同じ内容を動かす（ループ処理）
    - Scratch では「制御」に含まれます
    - 実際のプログラミング言語では `for`, `while` など

ね、簡単でしょ？

# プログラミングを始める準備

[Pong ゲーム（下準備）](https://scratch.mit.edu/projects/96496814/#editor) をコピーして作成しましょう！「リミックス」というボタンからコピーを作成できます。ただし、会員登録が必要です。

![image](https://qiita-image-store.s3.amazonaws.com/0/257/69667104-521f-21f4-e57c-ab5c18d75637.png)

_会員登録せずに内容を見て作成してもよいですが、間違えないように「リミックス」をおすすめします_

# Scratch の動かし方

![image](https://qiita-image-store.s3.amazonaws.com/0/257/fe25b89c-5e8c-4986-b301-4845a47de105.png)

旗マークをクリックしてゲームを動かすと、ボールが動き始めます。あらかじめ、ボールの動きを定義しています。ボールはただ動き続け、壁にぶつかって反射するだけです。

# はじめてのプログラミング

## Step 1 : パドルを動かそう

![image](https://qiita-image-store.s3.amazonaws.com/0/257/6db6eb1a-00a1-155e-37e4-2b5c04ed8581.png)

スクリプトを設定したら、旗マークをクリックしてゲームをスタートしましょう。マウスの動きに合わせてパドル（緑の棒）が動きます。まだ、ボールとの動きを作っていないので、ボールはパドルに関係なく動き続けます。

## Step 2 : パドルでボールを反射させよう

![image](https://qiita-image-store.s3.amazonaws.com/0/257/94bc0255-a8dc-51d2-f6bb-d32402eb1d0d.png)

条件式を使うことで、ボールがパドルにぶつかったら、ボールが反射するようになりました。

## Step 3 : ゲームっぽくスコアボードを作ろう

![image](https://qiita-image-store.s3.amazonaws.com/0/257/d809075d-561f-9ff0-59a8-fd82b7437a26.png)

まずは、スコアを計算する「変数」を用意しましょう。

![image](https://qiita-image-store.s3.amazonaws.com/0/257/2d8ac17d-daeb-9f67-b3f2-209412ae669d.png)

パドルでボールを反射させたらスコアが加算されるようになりました。

## ゲーム完成！ :tada: :tada: :tada: 

何か、ぎこちない感じのゲームが出来上がったのですが・・・ :fearful: 
プログラミングでものを作るときには、とにもかくにも __"とりあえず動くものをつくる"__ は大切です。はじめから綺麗に作ろうとするとやることが膨大になり、ゴールが見えず心が折れます。

もっと良い感じのゲームにしたいと思ったなら、演習課題にチャレンジして見ましょう。

# 演習課題

もっと良い感じのゲームにしたい！
仕上がりイメージ :point_right: [Pong ゲーム - Scratch Project](https://scratch.mit.edu/projects/96496621/)
__「中を見る」をクリックするとプログラミングの中身がわかっちゃうので注意！！__

## Level 1 : パドルを良い感じにしよう！

パドルが上下に動くの微妙じゃないですか？

マウスの動きに合わせて、左右は自由に、上下は固定になるように変更してみましょう。

## Level 2 : スコアボードを良い感じにしよう！

ボールが地面（画面下部）に落ちてもスコアが減点されないのは残念です。これでは、パドルでボールをポンポンするモチベーションが湧きません。

ボールが地面（画面下部）についたら、スコアを0点に戻してしまいましょう！

## Level 3 : ボールの反射を良い感じにしよう！

パドルにボールがぶつかった時のボールの反射向きに違和感が・・・。ぶつりのほうそくがみだれる！

こんな感じでボールが反射するように修正しよう！

![IMG.jpg](https://qiita-image-store.s3.amazonaws.com/0/257/34fdad9d-a730-a483-677a-86599e9cfcfc.jpeg)

_絵のクオリティは気にせず、ゲームのクオリティに集中してください_ :bow:

# 演習課題の解説

:point_right: [【解説編】プログラミング講座 :: Pong ゲームを作ろう！](http://qiita.com/yulii/items/64aaf3c2e95641e645b5)