ดูต้นฉบับสำหรับ Prg2/arcade5 maze

: ''This is part of the course [[Programming 2]], the material is originally from [[01219245/cocos2d/Maze]] from [[01219245]].''

== Rough steps ==
We will follow these steps to implement a pacman-like game.

* Shows and moves pacman
* Shows maze
* Moves pacman in the maze, while respecting walls.

== The Pacman and its movements ==
=== Create a new project and set up a Git repository ===
We will start with an empty game template.  Put the following code in our main program <tt>maze.py</tt>.

{{synfile|maze.py}}
<syntaxhighlight lang="python">
import arcade
 
SCREEN_WIDTH = 800
SCREEN_HEIGHT = 600
 
class MazeWindow(arcade.Window):
    def __init__(self, width, height):
        super().__init__(width, height)
 
        arcade.set_background_color(arcade.color.BLACK)

    def on_draw(self):
        arcade.start_render()
        
 
def main():
    window = MazeWindow(SCREEN_WIDTH, SCREEN_HEIGHT)
    arcade.set_window(window)
    arcade.run()
 
if __name__ == '__main__':
    main()
</syntaxhighlight>

Try to run the game to see if an empty white window appears.
Then, create a git repository at the project directory and commit the code.

{{gitcomment|Create your git repository and make the first commit.}}

=== Creating the player model and the sprite ===
In this step, we shall create a sprite for the player, and show it in the middle of the screen.

Use a graphic editor to create an image for our player.  The image should be of size 40 pixels x 40 pixels.  Save the image as <tt>images/dot.png</tt> and try to make it look cute.

We will continue our model/window code structure.  So let's create a dot model (called <tt>Player</tt>) and <tt>World</tt> in <tt>models.py</tt> as in our previous projects.  Note that currently the Player do nothing in <tt>update</tt>

{{synfile|models.py}}
<syntaxhighlight lang="python">
class Pacman:
    def __init__(self, world, x, y):
        self.world = world
        self.x = x
        self.y = y

    def update(self, delta):
        pass

class World:
    def __init__(self, width, height):
        self.width = width
        self.height = height
 
        self.pacman = Pacman(self, width // 2, height // 2)
 
     def update(self, delta):
        self.pacman.update(delta)
</syntaxhighlight>

We will import these classes into our main program.
{{synfile|maze.py}}
<syntaxhighlight lang="python">
from models import World, Pacman
</syntaxhighlight>

We will show the pacman.  Download sprite images from [https://theory.cpe.ku.ac.th/~jittat/courses/ooplab/pacman/ https://theory.cpe.ku.ac.th/~jittat/courses/ooplab/pacman/].  Save <tt>pacman.png</tt> in directory <tt>images</tt>.

As in the previous projects, we then use <tt>ModelSprite</tt> to display the sprite.  Add the class in <tt>maze.py</tt>.

{{synfile|maze.py}}
<syntaxhighlight lang="python">
class ModelSprite(arcade.Sprite):
    def __init__(self, *args, **kwargs):
        self.model = kwargs.pop('model', None)
 
        super().__init__(*args, **kwargs)
 
    def sync_with_model(self):
        if self.model:
            self.set_position(self.model.x, self.model.y)
 
    def draw(self):
        self.sync_with_model()
        super().draw()
</syntaxhighlight> 

Then update <tt>MazeWindow</tt> to include the world and create ModelSprite accordingly.

{{synfile|maze.py}}
<syntaxhighlight lang="python">
class MazeWindow(arcade.Window):
    def __init__(self, width, height):
        super().__init__(width, height)
 
        arcade.set_background_color(arcade.color.WHITE)

        self.world = World(SCREEN_WIDTH, SCREEN_HEIGHT)
        self.pacman_sprite = ModelSprite('images/pacman.png',
                                         model=self.world.pacman)

    def update(self, delta):
        self.world.update(delta)
        
    def on_draw(self):
        arcade.start_render()

        self.pacman_sprite.draw()
</syntaxhighlight> 

Try to run the game.  You should see your sprite in the middle of the screen.

{{gitcomment|Commit your work.}}

=== Movement ===

==== Models ====

We start by adding direction constants as in the snake game at the top of <tt>models.py</tt>

{{synfile|models.py}}
<syntaxhighlight lang="python">
DIR_STILL = 0
DIR_UP = 1
DIR_RIGHT = 2
DIR_DOWN = 3
DIR_LEFT = 4
 
DIR_OFFSETS = { DIR_STILL: (0,0),
                DIR_UP: (0,1),
                DIR_RIGHT: (1,0),
                DIR_DOWN: (0,-1),
                DIR_LEFT: (-1,0) }
</syntaxhighlight>

We add attribute <tt>direction</tt> to Pacman (initialized to DIR_STILL).  We add method <tt>move</tt> to deal with Pacman's movements based on its direction.  We call <tt>move</tt> in <tt>update</tt>.

{{synfile|models.py}}
<syntaxhighlight lang="python">
class Pacman:
    def __init__(self, world, x, y):
        # ...
        self.direction = DIR_STILL

    def move(self, direction):
        self.x += DIR_OFFSETS[direction][0]
        self.y += DIR_OFFSETS[direction][1]

    def update(self, delta):
        self.move(self.direction)
</syntaxhighlight>

==== Events ====

In this game, we need to deal with key pressed  We will not handle key releases because we want Pacman to keep moving even after we release the key.

To deal with key events, we first wire the <tt>on_key_press</tt> from the window to the world.

{{synfile|maze.py}}
<syntaxhighlight lang="python">
class MazeWindow(arcade.Window):
    # ...

    def on_key_press(self, key, key_modifiers):
         self.world.on_key_press(key, key_modifiers)
</syntaxhighlight>

In class World, you have to figure out how to deal with it.  First, you need to import the key code constants:

{{synfile|models.py}}
<syntaxhighlight lang="python">
import arcade.key
</syntaxhighlight>

Then, in <tt>on_key_press</tt>, we can update the pacman's direction based on the key pressed.  When a key is released, we let Pacman stops.

{{synfile|models.py}}
<syntaxhighlight lang="python">
class World:
    # ...

    def on_key_press(self, key, key_modifiers):
        if key == arcade.key.UP:
            self.pacman.direction = DIR_UP
        if key == arcade.key.DOWN:
            self.pacman.direction = DIR_DOWN
        if key == arcade.key.LEFT:
            self.pacman.direction = DIR_LEFT
        if key == arcade.key.RIGHT:
            self.pacman.direction = DIR_RIGHT
</syntaxhighlight>

Try to run the code.  Try play with key release handling by trying to press new arrow key after the previous one without releasing the key, then try to release the first key and see how the program behaves.  Explain why.

{{gitcomment|After a few trials to make sure your code works, please commit.}}

==== Faster ====

The pacman moves fairly slowly.  Let's add a default speed, by adding another constants in <tt>models.py</tt>.

{{synfile|models.py}}
<syntaxhighlight lang="python">
MOVEMENT_SPEED = 4
</syntaxhighlight>

And update <tt>Pacman.move</tt> to use this constant.

{{synfile|models.py}}
<syntaxhighlight lang="python">
class Pacman:
    # ...

    def move(self, direction):
        self.x += MOVEMENT_SPEED * DIR_OFFSETS[direction][0]
        self.y += MOVEMENT_SPEED * DIR_OFFSETS[direction][1]
</syntaxhighlight>

Try to run the game.  If the speed is too fast or too slow, you can change the constant, but make sure that it divides 40.  This will be important later.

{{gitcomment|Don't forget to commit.}}

 *********************************************************************************
 ********************************* CHECK POINT 5.1 *******************************
 *********************************************************************************

== The maze ==
Our maze consists of a set of smaller 40x40 sprites.  Let's create an image for the wall try to show that on the screen.

Create a 40x40 block image and save it in <tt>images/wall.png</tt>.  (You can also download it from [https://theory.cpe.ku.ac.th/~jittat/courses/ooplab/pacman/ https://theory.cpe.ku.ac.th/~jittat/courses/ooplab/pacman/].

Let's create a <tt>Maze</tt> class that keeps the maze information.  The key question here is how to keep the maze information.  In a simple game with one maze like this, we can simply store the maze as a constant in our code.  However, if you have many maze levels, you might want to load the data from files.  (We shall discuss that later, hopefully.)

The code below shows <tt>Maze</tt> class in <tt>src/Maze.js</tt>.  Note that since our screen is of size 800 x 600 and our wall image is of size 40 x 40, we can have 20 x 15 units.  In our case, we leave the top row and the bottom row out, so the height of the maze is only 13 units.

{{synfile|maze.py}}
<syntaxhighlight lang="python">
class Maze:
    def __init__(self, world):
        self.map = [ '####################',
                     '#..................#',
                     '#.###.###..###.###.#',
                     '#.#...#......#...#.#',
                     '#.#.###.####.###.#.#',
                     '#.#.#..........#.#.#',
                     '#.....###..###.....#',
                     '#.#.#..........#.#.#',
                     '#.#.###.####.###.#.#',
                     '#.#...#......#...#.#',
                     '#.###.###..###.###.#',
                     '#..................#',
                     '####################' ]
        self.height = len(self.map)
        self.width = len(self.map[0])
</syntaxhighlight>

We also put additional <tt>has_wall_at</tt> and <tt>has_dot_at</tt> methods for accessing maze information.

{{synfile|maze.py}}
<syntaxhighlight lang="python">
class Maze:
    # ...

    def has_wall_at(self, r, c):
        return self.map[r][c] == '#'

    def has_dot_at(self, r, c):
        return self.map[r][c] == '.'
</syntaxhighlight>

Let's create a maze object when we initialize the world.

{{synfile|maze.py}}
<syntaxhighlight lang="python">
class World:
    def __init__(self, width, height):
        # ...

        self.maze = Maze(self)
</syntaxhighlight>

=== MazeDrawer ===

To draw the maze, we create class <tt>MazeDrawer</tt> in <tt>maze.py</tt>   Note the way we calculate positions for each wall block and dot block.

{{synfile|maze.py}}
<syntaxhighlight lang="python">
class MazeDrawer():
    def __init__(self, maze):
        self.maze = maze
        self.width = self.maze.width
        self.height = self.maze.height
        
        self.wall_sprite = arcade.Sprite('images/wall.png')
        self.dot_sprite = arcade.Sprite('images/dot.png')

    def draw(self):
        for r in range(self.height):
            for c in range(self.width):
                x = c * 40 + 20;
                y = 600 - (r * 40) - 20;
                
                if self.maze.has_wall_at(r,c):
                    self.wall_sprite.set_position(x,y)
                    self.wall_sprite.draw()
                elif self.maze.has_dot_at(r,c):
                    self.dot_sprite.set_position(x,y)
                    self.dot_sprite.draw()
</syntaxhighlight>

Add this drawer into MazeWindow and call it in <tt>MazeWindow.draw</tt>.

{{synfile|maze.py}}
<syntaxhighlight lang="python">
class MazeWindow(arcade.Window):
    def __init__(self, width, height):
        # ...

        self.maze_drawer = MazeDrawer(self.world.maze)

    def on_draw(self):
        arcade.start_render()

        self.maze_drawer.draw()                # make sure you call this before drawing pacman sprite
        self.pacman_sprite.draw()
</syntaxhighlight>

We are ready to see our map.  Let's load the game.

{{gitcomment|Don't forget to commit this nice scene.}}

=== Cleaning up MazeDrawer ===

While our code works, there are many improvements we can do before we move on to other features.

First, when we calculate x and y in <tt>draw</tt> method, we use a lot of magic numbers.  Let's extract this code to a function and get rid of magic numbers.

We extract the code into <tt>get_sprite_position</tt>
{{synfile|maze.py}}
<syntaxhighlight lang="python">
class MazeDrawer():
    # ...
    def get_sprite_position(self, r, c):
        x = c * 40 + 20;
        y = 600 - (r * 40) - 60;
        return x,y

    def draw(self):
        for r in range(self.height):
            for c in range(self.width):
                x,y = self.get_sprite_position(r,c)
                
                # ...
</syntaxhighlight>

Let's run the code to see if it still works.

We add another constant <tt>BLOCK_SIZE</tt> so that we can remove 40 and 20 from the code.  We will also use <tt>SCREEN_HEIGHT</tt> instead of 600.

{{synfile|maze.py}}
<syntaxhighlight lang="python">
BLOCK_SIZE = 40

# ...
class MazeDrawer():
    # ...

    def get_sprite_position(self, r, c):
        x = c * BLOCK_SIZE + (BLOCK_SIZE // 2);
        y = SCREEN_HEIGHT - (r * BLOCK_SIZE) - BLOCK_SIZE - (BLOCK_SIZE // 2);
        return x,y
</syntaxhighlight>

Let's run again to make sure that we didn't break things.

Second improvement we can have is to remove duplicate codes for positioning and drawing sprites.  Let's add method <tt>draw_sprite</tt> that takes the sprite, row <tt>r</tt> and column <tt>c</tt>.  Note that we move the call to <tt>get_sprite_position</tt> into this method as well.

{{synfile|maze.py}}
<syntaxhighlight lang="python">
class MazeDrawer():
    # ...

    def draw_sprite(self, sprite, r, c):
        x, y = self.get_sprite_position(r, c)
        sprite.set_position(x, y)
        sprite.draw()

    def draw(self):
        for r in range(self.height):
            for c in range(self.width):
                if self.maze.has_wall_at(r,c):
                    self.draw_sprite(self.wall_sprite, r, c)
                elif self.maze.has_dot_at(r,c):
                    self.draw_sprite(self.dot_sprite, r, c)
</syntaxhighlight>

Let's run the code and if it works,

{{gitcomment|don't forget to commit your work.}}

 *********************************************************************************
 ********************************* CHECK POINT 5.2 *******************************
 *********************************************************************************

== Moving inside the maze (freely) ==

Currently, our pacman moves freely inside the '''screen''' with no association with the maze we draw.  We will make the connection in this part.

For the first step, we will constrain pacman's movements to be in block steps (in this case in block step of size 40).  Note that to do so, we should let the model classes knows the constant BLOCK_SIZE, through the World class.

=== Passing BLOCK_SIZE to the world and pacman ===
Let's update the initialization of the World class.

{{synfile|models.py}}
<syntaxhighlight lang="python">
class World:
    def __init__(self, width, height, block_size):
        self.width = width
        self.height = height
        self.block_size = block_size

        # ...
</syntaxhighlight>

Update the code where we create our world model.

{{synfile|maze.py}}
<syntaxhighlight lang="python">
class MazeWindow(arcade.Window):
    def __init__(self, width, height):
        # ...

        self.world = World(SCREEN_WIDTH, SCREEN_HEIGHT, BLOCK_SIZE)
        
        # ...
</syntaxhighlight>

We also let the Pacman knows the block size.  We will take this opportunity to let it knows the maze.

First, update the Pacman class.

{{synfile|models.py}}
<syntaxhighlight lang="python">
class Pacman:
    def __init__(self, world, x, y, maze, block_size):
        # ...

        self.maze = maze

        self.block_size = block_size
</syntaxhighlight>

Fix the creation of Pacman.  '''We also move it to the position that is align with the maze.'''  '''THIS IS IMPORTANT.'''  (Can you see why?)

{{synfile|models.py}}
<syntaxhighlight lang="python">
class World:
    def __init__(self, width, height, block_size):
        # ...

        self.pacman = Pacman(self, 60, 100,
                             self.maze,
                             self.block_size)
</syntaxhighlight>

=== The (blocky) movement ===

To ensure that pacman moves in block step, we will employ the following strategy: when the player changes direction, we will let the pacman continue to move in the old direction until it arrives at the center of the block.  Then, we change its direction while it is at the center of the block.  See figures below.

[[Image:Maze-movement-states.png]]

The movement will not be very smooth, but it is currently OK for us.  (Or, for me.)

We need to add attribute <tt>next_direction</tt> to keep the proposed next direction.

{{synfile|models.py}}
<syntaxhighlight lang="python">
class Pacman:
    def __init__(self, world, x, y, maze, block_size):
        # ...

        self.next_direction = DIR_STILL
</syntaxhighlight>

The following method checks if we are at the center of the block.

{{synfile|models.py}}
<syntaxhighlight lang="python">
class Pacman:
    # ...

    def is_at_center(self):
        half_size = self.block_size // 2
        return (((self.x - half_size) % self.block_size == 0) and
                ((self.y - half_size) % self.block_size == 0))
</syntaxhighlight>

We only update Pacman's direction when it is at the center.

{{synfile|models.py}}
<syntaxhighlight lang="python">
class Pacman:
    # ...

    def update(self, delta):
        if self.is_at_center():
            self.direction = self.next_direction
        self.move(self.direction)
</syntaxhighlight>

It's time to fix the World class to update Pacman's direction through its next_direction.

{{synfile|models.py}}
<syntaxhighlight lang="python">
class World:
    # ...

    def on_key_press(self, key, key_modifiers):
        if key == arcade.key.UP:
            self.pacman.next_direction = DIR_UP
        # TODO: do the same for every other directions
</syntaxhighlight>

Try to run the code to see if our Pacman moves in the way that we intend.  If that's the case, 

{{gitcomment|commit your code.}}

=== Key map ===

The if statements in <tt>on_key_press</tt> is fairly annoying.  We will create a dictionary that maps the key to the direction and use it instead.

{{synfile|models.py}}
<syntaxhighlight lang="python">
KEY_MAP = { arcade.key.UP: DIR_UP,
            arcade.key.DOWN: DIR_DOWN,
            arcade.key.LEFT: DIR_LEFT,
            arcade.key.RIGHT: DIR_RIGHT, }
</syntaxhighlight>

And change <tt>on_key_press</tt> to

{{synfile|models.py}}
<syntaxhighlight lang="python">
class World:
    # ...

    def on_key_press(self, key, key_modifiers):
        if key in KEY_MAP:
            self.pacman.next_direction = KEY_MAP[key]
</syntaxhighlight>

Test and

{{gitcomment|commit your code.}}

 *********************************************************************************
 ********************************* CHECK POINT 5.2 *******************************
 *********************************************************************************

== The pacman's update plan ==

Let's try to think ahead a bit.  Our Pacman will move, but it should not move into the wall.  It also eats dot.  All these behaviors will be implemented inside the update loop.  Let's add empty functions for doing that to see how we would do it.

We add two empty methods <tt>check_walls</tt> and <tt>check_dots</tt>.  Method <tt>check_walls</tt> will look at the maze and if the moving direction goes into the wall, we will change the direction to <tt>DIR_STILL</tt>.

{{synfile|models.py}}
<syntaxhighlight lang="python">
class Pacman:
    # ...

    def check_walls(self):
        return True

    def check_dots(self):
        pass

    def update(self, delta):
        if self.is_at_center():
            if self.check_walls(self.next_direction):
                self.direction = self.next_direction
            else:
                self.direction = DIR_STILL
            
        self.move(self.direction)

        self.check_dots()
</syntaxhighlight>

Note that the update method gets a bit more complex, but it is still fairly readable.

== Exercise: moving while avoiding the walls ==

To implement method <tt>check_walls</tt>, we need to be able to find out the current location in the maze of Pacman (in terms of rows and columns, not x/y).  They are as follow.

{{synfile|models.py}}
<syntaxhighlight lang="python">
    def get_row(self):
        return (self.y - self.block_size) // self.block_size

    def get_col(self):
        return self.x // self.block_size
</syntaxhighlight>

From that you should be able to implement this function.  (Hint: use DIR_OFFSET to find <tt>new_r</tt> and <tt>new_c</tt>)

{{synfile|models.py}}
<syntaxhighlight lang="python">
    def check_walls(self, direction):
        new_r = _______________________________________
        new_c = _______________________________________
        return not self.maze.has_wall_at(new_r, new_c)
</syntaxhighlight>

== Eating Dots ==

== Scores ==