GameDev – Vector: Khoảng cách từ điểm đến đoạn thẳng

ruler_triangle_measureDựa vào phép chiếu từ tích vô hướng (Dot product) của hai vector, ta có thể tính được khoảng cách từ một điểm đến một đường thẳng, đoạn thẳng.

Xem Demo.

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

Sorting Algorithm Visualisations (Minh họa thuật toán sắp xếp)

Sortvis.ord - Sorting Algorithm VisualisationTrang sortvis.org (sorting algorithm visualisation) giới thiệu một phương pháp minh họa các thuật toán sắp xếp khá độc đáo. Mỗi thuật toán được biểu diễn gần giống dạng đồ thị, không hiệu ứng chuyển động, và người xem có thể dễ dàng nắm bắt được đặc trưng của mỗi thuật toán. Tôi cũng muốn giới thiệu với các bạn phương pháp này thông qua Canvas của HTML5.

Tiếp tục đọc

HTML5 – Canvas: Viết game tâng bóng phá gạch (Breaking Blocks)

Breaking Block GameDựa vào phương pháp kiểm tra va chạm giữa hình tròn và chữ nhật, tôi sẽ phát triển một game tâng bóng phá gạch (Brick Bong, Breaking Blocks,…). Mã nguồn của game này chủ yếu dựa trên các ví dụ trước mà tôi đã viết, nên bạn có thể đọc lại các bài viết trước để hiểu rõ hơn.
Xem Demo.

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

Vòng lặp game (Game loop) hoạt động thế nào?

Loop_Game-chipPhần cốt lõi của hầu hết các game chính là vòng lặp được dùng để cập nhật và hiển thị trạng thái của game. Trong bài viết này, tôi sẽ minh họa các phương pháp tạo vòng lặp game với ngôn ngữ javascript.

Xem Demo.

Tiếp tục đọc

Javascript – Tạo chuyển động với WindowAnimationTiming API

runnerThay vì đặt timeout để gọi các phương thức vẽ lại hình ảnh, cách tốt nhất mà bạn nên sử dụng để tạo các hiệu ứng chuyển động trong canvas là dùng API WindowAnimationTiming, thông qua phương thức chính là requestAnimationFrame().

Xem Demo.

Tiếp tục đọc