Cấp độ: elementary25 phútminMiễn phíFreeJunior BuilderJunior Builder

JavaScript: Vòng lặp forJavaScript: for loops

Bảng cửu chương hiển thị trên webA multiplication table displayed on the web

Bạn sẽ học gìWhat you will learn

  • Viết vòng lặp for cơ bảnWrite basic for loops
  • Dùng vòng lặp tạo danh sách HTMLUse loops to generate HTML lists
  • Hiểu chỉ số i và điều kiện dừngUnderstand index i and stop condition

Bạn sẽ tạo gìWhat you will build

Bảng cửu chương hiển thị trên webA multiplication table displayed on the web

Nội dung bài họcLesson content

Pygame Zero là gì?What is Pygame Zero?

Pygame Zero (pgzero) là thư viện Python dành cho người mới bắt đầu làm game. Đơn giản hơn Pygame gốc. Có sẵn: sprite (Actor), âm thanh, va chạm, chuột, bàn phím. Cài đặt: pip install pgzero. Chạy: pgzrun ten_file.py.Pygame Zero (pgzero) is a Python library for beginners making games. Simpler than original Pygame. Includes: sprites (Actor), sounds, collision, mouse, keyboard. Install: pip install pgzero. Run: pgzrun filename.py.

Actor: nhân vật gameActor: game character

Actor là sprite trong Pygame Zero. Tạo: player = Actor("player"). Đặt vị trí: player.x = 400, player.y = 300. Di chuyển: player.x += 5. Vẽ: player.draw(). Hình ảnh đặt trong thư mục images/.Actor is a sprite in Pygame Zero. Create: player = Actor("player"). Set position: player.x = 400, player.y = 300. Move: player.x += 5. Draw: player.draw(). Images go in the images/ directory.

python
                      
                        from pgzero.actor import Actor

player = Actor("player")
player.x = 400
player.y = 300

def draw():
    screen.fill((0, 0, 0))  # Nền đen
    player.draw()

def update():
    if keyboard.left:
        player.x -= 5
    if keyboard.right:
        player.x += 5
                      
                    

Hàm draw() và update()The draw() and update() functions

Pygame Zero có 2 hàm đặc biệt: draw() vẽ mọi thứ lên màn hình (chạy 60 lần/giây), update() cập nhật logic game (chạy 60 lần/giây). draw() luôn bắt đầu bằng screen.fill() để xóa khung cũ. update() di chuyển sprite, kiểm tra va chạm.Pygame Zero has 2 special functions: draw() draws everything to the screen (runs 60 times/second), update() updates game logic (runs 60 times/second). draw() always starts with screen.fill() to clear the old frame. update() moves sprites, checks collisions.

Va chạm trong Pygame ZeroCollision in Pygame Zero

Dùng actor.colliderect(other_actor) để kiểm tra va chạm giữa 2 Actor. Trả về True nếu chạm, False nếu không. Dùng trong update(): if player.colliderize(coin): tăng điểm + di chuyển coin đi nơi khác.Use actor.colliderect(other_actor) to check collision between 2 Actors. Returns True if touching, False if not. Use in update(): if player.colliderect(coin): increase score + move coin elsewhere.

python
                      
                        coin = Actor("coin")
coin.x = 200
coin.y = 200
diem = 0

def update():
    if keyboard.left:
        player.x -= 5
    if player.colliderect(coin):
        diem += 1
        coin.x = random.randint(0, 800)
        coin.y = random.randint(0, 600)

def draw():
    screen.fill((0, 0, 0))
    player.draw()
    coin.draw()
    screen.draw.text(f"Điểm: {diem}", (10, 10), color="white")
                      
                    

Bài tập thực hànhHands-on exercises

1Tạo game: player di chuyển bằng phím mũi tên, coin xuất hiện ngẫu nhiên, chạm coin → +1 điểm.Create a game: player moves with arrow keys, coin appears randomly, touching coin → +1 score.

Gợi ýHint

Dùng keyboard.left/right/up/down trong update(). Dùng colliderect để kiểm tra va chạm.Use keyboard.left/right/up/down in update(). Use colliderect to check collision.

Lời giảiSolution
python
                      
                        import random
from pgzero.actor import Actor

player = Actor("player")
player.x = 400
player.y = 300
coin = Actor("coin")
coin.x = 200
coin.y = 200
diem = 0

def update():
    if keyboard.left: player.x -= 5
    if keyboard.right: player.x += 5
    if keyboard.up: player.y -= 5
    if keyboard.down: player.y += 5
    if player.colliderect(coin):
        global diem
        diem += 1
        coin.x = random.randint(50, 750)
        coin.y = random.randint(50, 550)

def draw():
    screen.fill((0, 0, 0))
    player.draw()
    coin.draw()
    screen.draw.text(f"Điểm: {diem}", (10, 10), color="white")
                      
                    

Kiểm traQuiz

Chọn đáp án đúng cho mỗi câu. Nhấn để xem giải thích.Choose the correct answer for each question. Click to see explanation.

Câu 1: Actor trong Pygame Zero là gì?Q1: What is an Actor in Pygame Zero?

Câu 2: Hàm draw() chạy bao nhiêu lần mỗi giây?Q2: How many times per second does draw() run?

Câu 3: Lệnh nào kiểm tra va chạm giữa 2 Actor?Q3: Which command checks collision between 2 Actors?

Code mẫuSample code

javascript
                // Bảng cửu chương số 3 / Multiplication table of 3
for (let i = 1; i <= 10; i++) {
  const kếtQuả = 3 * i;
  document.write(`3 × ${i} = ${kếtQuả}<br>`);
}