HTML5 – Canvas: Kiểm tra va chạm dựa trên pixel

Html5 - Canvas - Pixel Collision DetectionCác đối tượng đồ họa (hoặc hình ảnh) trong game thường được một giới hạn trong một khung bao hình chữ nhật có nền trong suốt (pixel có alpha = 0). Như vậy đối với các đối tượng phức tạp và muốn kiểm tra va chạm chính xác, ta cần kiểm tra các pixel có độ alpha > 0 của hai đối tượng đồ họa có cùng nằm trên một vị trí hay không.

Tiếp tục đọc

Advertisements

Algorithm – Kiểm tra một điểm nằm trên đoạn thẳng

Determine Point on LineCó nhiều cách để kiểm tra một điểm có thuộc đường thằng (tương tự với đoạn thẳng) hay không: bằng cách sử dụng các công thức hình học hoặc thuật toán vẽ đường thẳng,… Ngoài những cách trên, tôi sẽ giới thiệu một phương pháp đơn giản nhất là sử dụng phép so sánh góc để giải quyết vấn đề này.

Tiếp tục đọc

GameDev – Kiểm tra va chạm: hình tròn và chữ nhật

Basic Collision DemoThông thường các đối tượng trong game sẽ được xác định va chạm bằng cách đưa chúng về một dạng hình học cơ bản như hình chữ nhật, hình tròn. Bài viết này sẽ giúp bạn cách tính toán để kiểm tra va chạm giữa hai loại hình học này.

Xem Demo.

Tiếp tục đọc

HTML5 – Canvas 2D: Hiệu ứng bóng chuyển động và phản xạ – part 2

HTML5 - Canvas - Bouncing ball 2Tiếp theo phần trước, tôi sẽ thêm các chướng ngại vật hình chữ nhật vào canvas để tạo đường di chuyển của trái bóng. Các chướng ngại vật được tôi lấy từ bài: HTML5 – Chọn và di chuyển đối tượng trên Canvas.

Xem Demo.

Tiếp tục đọc

HTML5 – Canvas 2D: Hiệu ứng bóng chuyển động và phản xạ – part 1

HTML5 - Canvas 2D - Simple Bouncing ballMột ví dụ đơn giản để khi làm quen với đồ họa và chuyển động trong lập trình là viết một ví dụ bóng nảy bên trong một vùng cửa sổ (canvas). Một quả bóng sẽ được vẽ bên trong canvas và chuyển động theo một hướng xác định. Khi chạm bất kì thành tường nào, bóng sẽ đổi hướng chuyển động tùy theo hướng di chuyển.

Xem Demo.

Tiếp tục đọc