Game Xìm Xàm

Miếng trầu là đầu câu chuyện, câu chuyện là đầu showcase. Tớ kể tuần tự một câu chuyện nhỏ dẫn đến bài viết này nha!

 

1- Đầu tiên là illustration cho web c9 với concept đơn giản thanh mảnh

2- Illustration thôi đâu được, nhúc nhích đi chứ, vô AE làm động đậy

3- Động đậy được rồi đến lúc xuất hình gif để lên web cảm thấy quá mệt với mấy setting export cho nhẹ file nên tớ mò qua Lottie animation

4- Làm Lottie sướng quá, file nhẹ, vector animation chạy bằng js muốn chạy lúc nào cũng đc

5- Nhưng mà có 3 round xìm xằm lặp đi lặp lại hơi chán, mình tách 2 tay ra cho nó xìm random mới vui

6- Chợi dui quá dui quá mà ủa mà xìm xằm random mình nhìn nó chơi vậy thôi hả, mình chơi được hông? Ôke chơi được chứ.

7- Ụa khoan rồi chơi mình vầy chán vl, chơi online realtime với mấy ml khác đc hông??

 

Được!

 
 

 
 

Vậy là tớ có một ý tưởng về cái game xìmxàm online 4.0, nghe nó khùng điên dở người hết sức, nhưng thây kệ, mình làm mình thấy vui là được. Nên tớ cứ vậy làm thôi, vì là side project nên rảnh lúc nào làm lúc đó, cũng có lúc bị job đè nên đắp chiếu cho nó một hai tháng rồi lại bê ra làm tiếp. Giờ làm xong rồi đăng bài lên đây tớ còn phân vân hoài không biết nên phân mục nó là showcase hay là blog nữa ???

 
 

Game xìm xằm thì cần gì?

Câu hỏi trên này giống như giai đoạn đọc brief và debrief trong một dự án quy củ, nhưng làm cho vui thì làm gì có yêu cầu cụ thể đâu. Giống như cái câu chuyện bên trên, tớ cứ ngẫu hứng xây dựng thêm từng phần từng phần, cứ như vậy đến khi cảm thấy đủ để đem ra mời mọi người chơi thử, vậy là được.

Và sau cả quá trình đó, những yêu cầu chủ chốt tớ gom lại là:

 

– Làm được một game chơi xìm xằm ra kết quả: ăn, thua hoặc huề, xìm 3 cái rồi chốt game

– Canh timing cho trải nghiệm người chơi khi bấm kéo/búa/bao ăn khớp với animation

– Giao diện ổn, dễ hiểu dễ chơi

– Khi lên online, có một vấn đề phát sinh là độ trễ giữa 2 người chơi, nó không nên vượt quá 0.2s

– Bắt cặp ngẫu nhiên khi có nhiều người cùng chơi

– Link riêng cho 2 người chơi cố định muốn chơi với nhau

– Thống kê và xếp hạng người chơi

 

4 trong 7 yêu cầu trên đây là nó tự động phát sinh thêm sau khi game được upgrade lên chơi online realtime, và nó cũng là điểm sáng của showcase này ?

Bỗng dưng một portfolio về thiết kế nó lại trở nên IT nhỉ, nhưng không sao haha, tớ sẽ cố viết để cho các bạn không phải IT có thể tiếp cận được ???

Còn bạn nào IT vipro thì cũng đừng cười đừng phán xét nha ?

 

Coding & thuật toán

Thật ra game này chẳng có gì phải gọi là thuật toán cả, nó như một bài tập nhập môn lập trình tin học hồi xưa: nhập kéo búa bao, máy chạy random ra kéo búa bao rồi xuất kết quả ra màn hình. Khi lên đồ hoạ với animation thì giới hạn thời gian chọn kéo búa bao lại, vậy thôi:

 

 

Nếu bạn bấm không kịp, chơi xìm xằm ngoài đời là bạn ra sau và bạn sẽ bị chửi sml. Nhưng ở đây tớ mặc định nếu bạn bấm không kịp, bạn sẽ ra búa, để khỏi cãi cọ nhau. Lý do ra búa vì lúc tay vung vẩy lên xuống bạn đã để sẵn cái búa rồi!

Và để chơi online, phải có mạng, phải gửi data qua lại, phải bắt cặp người chơi với nhau, vân vân.. Như vậy cần có một cái server để làm nhiệm vụ trung gian đó:

 

 

Nhưng làm một cái game chơi vui vui mà phải thuê hoặc tự setup một cái server ư, đâu tới nỗi vậy. Tớ lần mò trên internet và tìm ra một server chùa hỗ trợ gửi realtime message theo dạng peer-to-peer, và họ hỗ trợ cả API javascript. Có vẻ như đây chính xác là thứ tớ cần ?

https://www.pubnub.com/

Với pubnub, chơi game xìm xằm sẽ như này:

 

 

Thơm, ngon, ngọt lành! Đây là clip quay lại ăn mừng khi tớ vừa chơi được một màn xìm xằm từ điện thoại với laptop:

 
 

 
 

Nhưng vấn đề lại bỗng dưng lòi ra khi tớ cho nhiều người chơi cùng một lúc. Do pubnub gửi message theo dạng peer-to-peer nên tớ cũng xây dựng thuật toán theo kiểu gạ kèo bắt cặp request-response:

 

 

Thuận tự nhiên thì sẽ như này

 

 

Nhưng không…

Cách làm gạ kèo bắt cặp này cũng giống như crush nhau vậy, ngẫu nhiên và dễ bị trùng. Và thậm tệ hơn nữa vì yêu đương có thể thúi tha yêu 2 3 đứa nhưng xìm xằm phiên bản này tớ chỉ cho có 2 đứa chơi nhau thôi. Và hiển nhiên cũng có nhiều đứa vô phúc, gạ rất nhiều nhưng không ai chấp nhận…

 
 

 
 

Tớ dùng cả thuật toán quay lui chọn lại, nhưng cũng có nhiều pha phải chờ rất lâu mới được chơi. Có vẻ như request-response không đúng ở đây.

Và, bằng một cách tư duy lươn lẹo nào đó, tớ nghĩ ra trò chỉ định một đứa bất kì làm tổ trưởng, và nó sẽ đóng vai trò là một server tạm thời, chỉ định bắt cặp người chơi ???

 

 

Nhưng, người chơi thì không cố định, lúc ra lúc vô, không ai ở hoài trong đó để làm tổ trưởng hết. Vậy nên tổ trưởng sẽ được thay phiên bằng cách thi coi ai nhanh mồm nhanh mép hơn.

 

 

Và quá trình giành giật này sẽ chạy dưới background, dĩ nhiên rồi. Và đây là thành quả, delay lúc này khoảng tầm 100-150ms, mỗi người chơi sẽ phải chờ khoảng tầm 3s để vào game. Cá nhân mình thấy cũng kha khá ổn cho một cái server chùa hehehê

 
 

 
 

Vậy là yêu cầu số 4 và 5 đã được giải quyết. Số 6 cũng không gây trở ngại gì, vì pubnub hỗ trợ nhiều channel; khi vào game sẽ được chơi ở channel chung, còn muốn chơi riêng với nhau thì chỉ cần tạo một channel và ném cả 2 vào đó là xong! Yêu cầu cuối cùng chỉ là thống kê và lưu trữ bình thường, không cần thiết phải để tâm vướng bận ???

 

 

Design & animation

Về design, thú thiệt tớ không làm bản thiết kế nào cả. Mọi thứ phát triển dần dần theo câu chuyện bên trên. Ban đầu chỉ có hai bàn tay, sau đó add thêm cái background nhịp nhịp, rồi thêm 3 cái nút… Và cuối cùng nó thành hình như cái giao diện như bạn đã thấy hehe

Tớ khoái làm animation, nên cũng dành không ít thời gian tỉa tót cho mấy cái motion trong game. Trừ hai cái bàn tay xìm xằm, còn lại tất cả mọi thứ động đậy đều từ css và javascript mà ra.

 
 

 
 

Để đây một cái gif cho vui cửa vui nhà, tớ cũng định dàn một ít screenshot nhưng nghĩ đi nghĩ lại cái này là minigame có được mấy screen đâu, mà để động đậy như vầy lại vui hơn haha

 

.   .   .

 
 

Xong rồi xong rồi đâyyy, mời bạn ghé chơi thử nheeé

https://zoiop.com/ximxam/

 
 

.   .   .

 
 

Project 12.2020
Showcase viết tháng 04.2021
Đăng tháng 07 năm covid thứ 2