チュートリアルStep1

![スクリーンショット 2024-10-09 22.05.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900427/061d973b-8491-2788-79d1-d8416b912e41.png)


![puyopuyo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900427/1fdf8221-96c5-fcfa-3a52-383422a6fdc3.gif)
　ぷよぷよプログラミングAI学習システムは、中高生の自己調整学習に向けて開発されました。
　どうやって、Chromebookで、１０分で、素敵な人工知能を作れるのでしょうか？
　秘密は、３つ。
　１　jupyter liteで、webクライアントがpythonコードを実行
　２　超軽量な機械学習フレームワークdezeroを採用
　３　ぷよぷよのstageとactionがコンパクト

### Github&X

https://github.com/Lunanaedu/jupyterlite-puyopuyo

https://github.com/Lunanaedu/puyopuyo-kai

https://x.com/educationai_ai

### ぷよぷよプログラミングAI学習用まとめ

https://qiita.com/educational-ai/items/50c0fa689c01794d145e

### チュートリアルまとめ

https://qiita.com/educational-ai/items/88feaf91bdda0b5e0d25

# Step1 board

　これから、jupyter　notebookを使ってプログラミングします。

　puyopuyoは、javascriptで教育版が公開されているので、その仕様をできる限り再現します

　このチュートリアルが終わるときには、puyopuyoを使った深層強化学習ができます。

　前半は、puyopuyoのルールを実装していき、深層強化学習に関しては、後半で説明します。

　深層強化学習を、webクライアントで行うためには、pyodideというモジュールを使います。pyodideを使用しているために、いくつか特殊なコードが入っています。また、pyodideで深層強化学習するならば、tensorflowとpytorchは使用できないため、フレームワークDezeroを一部改変したdezero_embを使用します。

# 1 boardを作ってみる。

　まず、boardを作ってみます。公式は　高さ１２ x 幅６の大きさです。

numpyを使用します。

コードを実行してみましょう。


```python
import numpy as np

Height = 12
Width = 6
board = np.zeros(Width * Height).reshape(Height, Width)
```

* import numpy as np  : numpyをインポートします。
* Hight = 12  :　高さを設定
* Width = 16  :  幅の設定
* np.zeros() : 初期値0のnumpy配列を作成します。
* reshape(Height,Width) : 幅Width、高さHeightの配列に変換します。

それでは、中身を見てみましょう。


```python
print(board.shape)
print(board.ndim)
print(board)

```

    (12, 6)
    2
    [[0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]]


* board.shape : 配列の大きさを表示します。
* board.ndim : 配列の次元数を表示します。
* print(board):　boardを表示します。

サンプルボードを作ってみます。

空のボードよりも、サンプルボードの方がイメージしやすいですよね。

randomを使用します。


```python
import numpy as np
import random

sample_list = np.arange(Width)
print(sample_list)
random.shuffle(sample_list)
print(sample_list)
```

    [0 1 2 3 4 5]
    [2 5 0 4 3 1]


* np.arange(Width) : 0 から　Width-1　までの配列を作ります。
* random.shuffle(sample_list) : 　シャッフルして並べ替えます。


```python
Height = 12
Width = 6
board = np.zeros(Width * Height).reshape(Height, Width)

for j in range(Width):
    if sample_list[j]:
        for i in range(sample_list[j]):
            board[Height - 1 - i, j] = random.randint(1, 4)

print(board)
```

    [[0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 0. 0. 0. 0. 0.]
     [0. 1. 0. 0. 0. 0.]
     [0. 3. 0. 2. 0. 0.]
     [0. 4. 0. 1. 2. 0.]
     [1. 4. 0. 1. 4. 0.]
     [2. 3. 0. 2. 1. 2.]]


* board[Height - 1 - i, j] : 高さHight - 1 -i、横jの範囲を指定。一番下は、Height-1 一番上は0　一番左は0、一番右はwidth-1

一般的なXY座標の書き方と異なることと、0から始まることに注意。

何も存在しない状態は0、ぷよの種類は5種類なので、1～5を割り当てる。

サンプルボードはこの後も使いたいので、関数にして保存しておきます。


```python
%%writefile puyo_utils.py
import numpy as np
import random

class utils:
    def create_sample_board(height=12, width=6):
        sample_list = np.arange(width)
        random.shuffle(sample_list)
        board = np.zeros(height * width, dtype = np.int32).reshape(height, width)

        for j in range(width):
            if sample_list[j]:
                for i in range(sample_list[j]):
                    board[height - 1 - i, j] = random.randint(1, 4)

        return board
```

    Writing puyo_utils.py


* %%writefile puyo_utils.py : puyo_utils.pyを作成する。
* def create_sample_board(hight=12, width=6) : pythonの関数宣言で、hight=12, whidth=6と初期設定されています。

どこに作成されるか確認しましょう。step1.ipynbと同じフォルダに作成されているはずです。