フェーズ 2 主人公を矢印キーで動かす

トップページ ／ step2 概要 ／ フェーズ 2

ゴール

矢印キーで主人公が1 マスずつ動くようにします。壁の方向を押しても進みません。 そして向いている方向の絵に切り替わります。 フェーズ 1 のコードに 38 行書き足して、できあがりは 132 行になります。

1. 考え方

1-1. 動かしてから直すのではなく、動かす前に調べる

step1 では、まず動かして、画面の外に出ていたら max と min で あとから押し戻していました。ドット単位でぬるぬる動くゲームでは、それでうまくいきます。

倉庫番はマス単位です。1 マスは 8 ドットあるので、 壁にめり込んでから戻すとガタッと見えてしまいます。 それに、このあと荷物を押すようになると 「動かしてから戻す」では荷物まで巻き戻さなければならず、話がややこしくなります。

そこで倉庫番では順番を逆にします。 行き先のマスを先に計算して、そこが壁かどうか調べてから、動かすかどうかを決めます。

1-2. 向きを「番号」にすると、進む先も絵も同じ番号で引ける

矢印キーは 4 つあります。押されたキーごとに 「x を 1 増やす」「y を 1 減らす」……と書いていくと、 同じような行が 4 つ並びます。フェーズ 3 で荷物を押すようになると、 その 4 つがもう一組必要になり、8 か所を書き分けることになります。

そこで向きに番号を振ります。フェーズ 1 で 下 0・上 1・左 2・右 3 と決めておいた、あの順番です。 番号が決まっていれば、進む先の計算も、絵の切り出し位置も、同じ番号 1 つで引けます。

1-3. 行き先が壁かどうかは self.tiles[y][x] で調べる

フェーズ 1 で作った self.tiles は、地形だけが入った二次元リストです。 調べたいマスの文字が "#" なら壁、それ以外（"." か "O"）なら通れます。

気を付けるのはかっこの順番です。self.tiles は行のリストなので、 先に行（y）を選び、あとから列（x）を選びます。 tiles[x][y] と書くと、盤面の縦横が入れ替わったところを見てしまいます。

2. このフェーズで使う機能

3. 手順

フェーズ 1 の sokoban.py に書き足していきます。3 段階に分けて進めます。

3-1. 向きの番号と、向きごとのずれを用意する

定数の並びのいちばん下、STAGE1 の手前に足します。

U_BOX = 24

# 向き。この番号が、そのまま主人公の絵の切り出し位置になる
DIR_DOWN = 0
DIR_UP = 1
DIR_LEFT = 2
DIR_RIGHT = 3

# 向きごとの、1 歩ぶんのずれ（x のずれ, y のずれ）
MOVES = [
    (0, 1),             # 下
    (0, -1),            # 上
    (-1, 0),            # 左
    (1, 0),             # 右
]

次に、はじめの向きを覚えさせます。 load_stage() の self.boxes = [] の下に 1 行足してください。

    def load_stage(self, rows):
        """文字の地図を読んで、地形・主人公・荷物に分ける"""
        self.tiles = []
        self.boxes = []
        self.player_dir = DIR_DOWN      # ← 足す：はじめは下を向いている

3-2. キーを見て、動かす

update() の pass を消して、メソッドを 2 つ足します。 update() のすぐ下に続けて書いてください。

    def update(self):
        """フレーム毎の更新処理"""
        self.handle_key()

    def handle_key(self):
        """矢印キーを見て、押された向きへ 1 歩進もうとする"""
        if pyxel.btnp(pyxel.KEY_DOWN):
            self.try_move(DIR_DOWN)
        elif pyxel.btnp(pyxel.KEY_UP):
            self.try_move(DIR_UP)
        elif pyxel.btnp(pyxel.KEY_LEFT):
            self.try_move(DIR_LEFT)
        elif pyxel.btnp(pyxel.KEY_RIGHT):
            self.try_move(DIR_RIGHT)

    def try_move(self, direction):
        """その向きへ動けるか調べて、動けるときだけ 1 マス進む"""
        self.player_dir = direction     # 動けなくても、向きだけは変える

        dx, dy = MOVES[direction]
        next_x = self.player_x + dx
        next_y = self.player_y + dy

        if self.tiles[next_y][next_x] == "#":    # 行き先が壁なら
            return                               # 何もしないで戻る

        self.player_x = next_x
        self.player_y = next_y

ここで一度実行してください。矢印キーで主人公が 1 マスずつ動き、壁で止まれば成功です。 まだ絵は下向きのままで、荷物はすり抜けます。

3-3. 向いている方向の絵にする

draw() のいちばん下、主人公を描いている blt() の 0, のところを self.player_dir * TILE, に書き換えます。

        # 主人公（向いている方向の絵）
        pyxel.blt(self.ox + self.player_x * TILE, self.oy + self.player_y * TILE,
                  0, self.player_dir * TILE, V_PLAYER, TILE, TILE, pyxel.COLOR_BLACK)

4. できあがりのコード

# sokoban.py
# step2 フェーズ2：主人公を矢印キーで動かす

import pyxel

SCREEN_WIDTH = 160
SCREEN_HEIGHT = 120
TILE = 8                # 1 マスの大きさ（ドット）
HUD_HEIGHT = 12         # 画面の上、手数などを出すために空けておく高さ

# イメージバンク 0 の、切り出し位置
V_TILE = 0              # タイルの段
V_PLAYER = 8            # 主人公の段（コマ A）
U_FLOOR = 0
U_WALL = 8
U_GOAL = 16
U_BOX = 24

# 向き。この番号が、そのまま主人公の絵の切り出し位置になる
DIR_DOWN = 0
DIR_UP = 1
DIR_LEFT = 2
DIR_RIGHT = 3

# 向きごとの、1 歩ぶんのずれ（x のずれ, y のずれ）
MOVES = [
    (0, 1),             # 下
    (0, -1),            # 上
    (-1, 0),            # 左
    (1, 0),             # 右
]

# ステージの地図
# # 壁  . 床  O ゴール  $ 荷物  @ 主人公
STAGE1 = [
    "########",
    "#......#",
    "#..O...#",
    "#..$...#",
    "#..@...#",
    "########",
]

class App:
    def __init__(self):
        """起動時の設定"""
        pyxel.init(SCREEN_WIDTH, SCREEN_HEIGHT, title="Sokoban")
        pyxel.load("sokoban.pyxres")
        self.load_stage(STAGE1)
        pyxel.run(self.update, self.draw)

    def load_stage(self, rows):
        """文字の地図を読んで、地形・主人公・荷物に分ける"""
        self.tiles = []
        self.boxes = []
        self.player_dir = DIR_DOWN      # はじめは下を向いている
        for y in range(len(rows)):
            line = []
            for x in range(len(rows[y])):
                mark = rows[y][x]
                if mark == "@":
                    self.player_x = x
                    self.player_y = y
                    mark = "."      # 主人公の足元は床
                elif mark == "$":
                    self.boxes.append([x, y])
                    mark = "."      # 荷物の下も床
                line.append(mark)
            self.tiles.append(line)

        # 盤面を画面の中央に置くための、ずらし幅
        board_w = len(self.tiles[0]) * TILE
        board_h = len(self.tiles) * TILE
        self.ox = (SCREEN_WIDTH - board_w) // 2
        self.oy = HUD_HEIGHT + (SCREEN_HEIGHT - HUD_HEIGHT - board_h) // 2

    def update(self):
        """フレーム毎の更新処理"""
        self.handle_key()

    def handle_key(self):
        """矢印キーを見て、押された向きへ 1 歩進もうとする"""
        if pyxel.btnp(pyxel.KEY_DOWN):
            self.try_move(DIR_DOWN)
        elif pyxel.btnp(pyxel.KEY_UP):
            self.try_move(DIR_UP)
        elif pyxel.btnp(pyxel.KEY_LEFT):
            self.try_move(DIR_LEFT)
        elif pyxel.btnp(pyxel.KEY_RIGHT):
            self.try_move(DIR_RIGHT)

    def try_move(self, direction):
        """その向きへ動けるか調べて、動けるときだけ 1 マス進む"""
        self.player_dir = direction     # 動けなくても、向きだけは変える

        dx, dy = MOVES[direction]
        next_x = self.player_x + dx
        next_y = self.player_y + dy

        if self.tiles[next_y][next_x] == "#":    # 行き先が壁なら
            return                               # 何もしないで戻る

        self.player_x = next_x
        self.player_y = next_y

    def draw(self):
        """描画処理"""
        pyxel.cls(pyxel.COLOR_BLACK)

        # 地形を、上の行から 1 マスずつ描く
        for y in range(len(self.tiles)):
            for x in range(len(self.tiles[y])):
                mark = self.tiles[y][x]
                if mark == "#":
                    u = U_WALL
                elif mark == "O":
                    u = U_GOAL
                else:
                    u = U_FLOOR
                pyxel.blt(self.ox + x * TILE, self.oy + y * TILE,
                          0, u, V_TILE, TILE, TILE)

        # 荷物
        for box in self.boxes:
            pyxel.blt(self.ox + box[0] * TILE, self.oy + box[1] * TILE,
                      0, U_BOX, V_TILE, TILE, TILE, pyxel.COLOR_BLACK)

        # 主人公（向いている方向の絵）
        pyxel.blt(self.ox + self.player_x * TILE, self.oy + self.player_y * TILE,
                  0, self.player_dir * TILE, V_PLAYER, TILE, TILE, pyxel.COLOR_BLACK)

App()

5. 実行する

cd step2
python sokoban.py

確かめてほしいのは、次の 4 つです。

6. コードの解説

6-1. if を 4 つ並べず、elif でつなぐ

step1 の move_boy() では、if を4 つ並べていました。 上と右を同時に押したら斜めに動いてほしかったからです。

倉庫番は逆です。1 回の入力で動くのは、1 マスだけ。 斜めには進めませんし、上と右を同時に押したときに 2 マスぶん動いてしまっては困ります。

        if pyxel.btnp(pyxel.KEY_DOWN):
            self.try_move(DIR_DOWN)
        elif pyxel.btnp(pyxel.KEY_UP):      # ← elif なので、下が成立したら見に来ない
            self.try_move(DIR_UP)

elif でつなぐと、上から順に見ていって、最初に当てはまった 1 つだけが実行されます。 だから同時押しでも、動くのは 1 方向だけです （この書き方では下がいちばん優先されます。倉庫番では困らないので、この順のままにします）。

6-2. dx, dy = MOVES[direction] —— 組を 2 つの変数で受け取る

MOVES[direction] は (0, -1) のような2 つ組を返します。 左辺にカンマで 2 つ変数を並べると、順番どおりに 1 つずつ入ります。

dx, dy = MOVES[1]       # MOVES[1] は (0, -1)
                        # → dx に 0、dy に -1 が入る

step1 フェーズ 9 の best_x, best_y = CORNERS[0] と同じ書き方です。 1 行で済むうえ、MOVES[direction][0] のように かっこを二重に書かなくてよいので読みやすくなります。

6-3. return だけを書いて「何もしない」を表す

        if self.tiles[next_y][next_x] == "#":
            return

        self.player_x = next_x
        self.player_y = next_y

return はそこでメソッドを終わらせる合図です。 値を書かずに return とだけ置くと、「ここで打ち切り」という意味になります。 壁だったときは位置を書き換えないまま終わるので、主人公はその場に留まります。

else: を使って書くこともできますが、return のほうが字下げが浅く済みます。 フェーズ 3 で「荷物があるか」「その先はどうか」と調べる条件が増えると、 この差がはっきり効いてきます。step1 の check_ghosts() でも同じ書き方をしました。

6-4. なぜ handle_key() と try_move() に分けたのか

1 つのメソッドにまとめて書くこともできます。分けたのは、 2 つが答えている問いが違うからです。

分けておくと、あとで片方だけを直せば済みます。 「キーボードでもスマホでも、指示された向きは try_move() に渡すだけ」という形にしておくと、 入力の種類が増えても移動のルールには手を触れずに済みます。

6-5. self.player_dir * TILE で切り出し位置を求める

        pyxel.blt(self.ox + self.player_x * TILE, self.oy + self.player_y * TILE,
                  0, self.player_dir * TILE, V_PLAYER, TILE, TILE, pyxel.COLOR_BLACK)

主人公の絵は横に 8 ドットずつ並べて描いてあるので、 向きの番号に 8 を掛ければ、そのまま切り出し位置になります。

下（0） → 0 * 8 = 0
上（1） → 1 * 8 = 8
左（2） → 2 * 8 = 16
右（3） → 3 * 8 = 24

8 と直接書かずに TILE を使っているのは、 この 8 が「絵 1 枚の幅」だからです。 self.player_x * TILE（マス目をドットに直す）と同じ理由の 8 です。 このように意味が同じ数は、同じ名前で書いておくと、 あとで数を変えたくなったときに直す場所が 1 か所で済みます。

7. うまくいかないときは

8. 次のフェーズ

主人公が動くようになりました。次は荷物を押します。 考え方は同じで、調べる範囲が 1 マス先から 2 マス先に広がるだけです。