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 maze.py.
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()
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.
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 images/dot.png and try to make it look cute.
We will continue our model/window code structure. So let's create a dot model (called Player) and World in models.py as in our previous projects. Note that currently the Player do nothing in update
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)
We will import these classes into our main program.
from models import World, Pacman
We will show the pacman. Download sprite images from https://theory.cpe.ku.ac.th/~jittat/courses/ooplab/pacman/. Save pacman.png in directory images.
As in the previous projects, we then use ModelSprite to display the sprite. Add the class in maze.py.
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()
Then update MazeWindow to include the world and create ModelSprite accordingly.
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()
Try to run the game. You should see your sprite in the middle of the screen.
- Commit your work.
Movement
Models
We start by adding direction constants as in the snake game at the top of models.py
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) }
We add attribute direction to Pacman (initialized to DIR_STILL). We add method move to deal with Pacman's movements based on its direction. We call move in update.
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)
Events
In this game, we need to deal with key pressed and key released (because we want pacman to stop if we release the keys).
To deal with key events, we first wire the on_key_press and on_key_release from the window to the world.
class MazeWindow(arcade.Window):
# ...
def on_key_press(self, key, key_modifiers):
self.world.on_key_press(key, key_modifiers)
def on_key_release(self, key, key_modifiers):
self.world.on_key_release(key, key_modifiers)
In class World, you have to figure out how to deal with it. First, you need to import the key code constants:
import arcade.key
Then, in on_key_press, we can update the pacman's direction based on the key pressed. When a key is released, we let Pacman stops.
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
def on_key_release(self, key, key_modifiers):
self.pacman.direction = DIR_STILL
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.
- 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 models.py.
MOVEMENT_SPEED = 5
And update Pacman.move to use this constant.
class Pacman:
# ...
def move(self, direction):
self.x += MOVEMENT_SPEED * DIR_OFFSETS[direction][0]
self.y += MOVEMENT_SPEED * DIR_OFFSETS[direction][1]
- 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 images/wall.png. (You can also download it from https://theory.cpe.ku.ac.th/~jittat/courses/ooplab/pacman/.
Let's create a Maze 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 Maze class in src/Maze.js. 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.
class Maze:
def __init__(self, world):
self.map = [ '####################',
'#..................#',
'#.###.###..###.###.#',
'#.#...#......#...#.#',
'#.#.###.####.###.#.#',
'#.#.#..........#.#.#',
'#.....###. ###.....#',
'#.#.#..........#.#.#',
'#.#.###.####.###.#.#',
'#.#...#......#...#.#',
'#.###.###..###.###.#',
'#..................#',
'####################' ]
self.height = len(self.map)
self.width = len(self.map[0])
We also put additional has_wall_at and has_dot_at methods for accessing maze information.
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] == '.'
Let's create a maze object when we initialize the world.
class World:
def __init__(self, width, height):
# ...
self.maze = Maze(self)
MazeDrawer
To draw the maze, we create class MazeDrawer in maze.py Note the way we calculate positions for each wall block and dot block.
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()
Add this drawer into MazeWindow and call it in MazeWindow.draw.
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()
We are ready to see our map. Let's load the game.
- 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 draw 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 get_sprite_position
class MazeDrawer():
# ...
def get_sprite_position(self, r, c):
x = c * 40 + 20;
y = 600 - (r * 40) - 20;
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)
# ...
Let's run the code to see if it still works.
We add another constant BLOCK_SIZE so that we can remove 40 and 20 from the code. We will also use SCREEN_HEIGHT instead of 600.
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 // 2);
return x,y
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 draw_sprite that takes the sprite, row r and column c. Note that we move the call to get_sprite_position into this method as well.
class MazeDrawer():
# ...
def draw_sprite(self, sprite, r, c):
x, y = 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)
Let's run the code and if it works,
- don't forget to commit your work.
********************************************************************************* ********************************* CHECK POINT 5.2 ******************************* *********************************************************************************
Moving inside the maze
Currently, our pacman moves freely inside the screen with no association with the maze we draw. We will make the connection in this part.
