Tự làm Game | Không quá khó - Biết cơ bản lập trình trẻ em cũng làm được
Rất hay và hữu ích!/27 người
qsangp
2 thángBình luận: 77
Tự làm Game | Không quá khó - Biết cơ bản lập trình trẻ em cũng làm được
tinhte squid game.gif
Đầu tiên mời mọi người chơi thử game tại đây nhé: Tinhte Squid Game. Mình cá là mấy bạn sẽ chết trong lần đầu tiên chơi =))
  • Nhiệm vụ là giúp Huyền Vân qua được vạch đỏ mà không bị Boss Cu Hiệp loại
----------
Hôm nay mình xin chia sẻ cách mình tự làm một mini Web Game và bước đầu tiên để bắt đầu học lập trình Web.

1. Mình đã học những gì để làm Tinhte Squid Game


1. HTML

Viết tắt của Hypertext Markup Language (dịch nôm na là ngôn ngữ đánh dấu). Nếu lấy cơ thể người để minh hoạt thì HTML chính là phần xương bên trong. Mình sẽ demo code trên trang (codepen.io)

Quảng cáo


Screen Shot 2021-11-25 at 22.13.29.jpg
Các bạn sẽ thấy giao diện có 3 cột là HTML, CSS và JS (Javascript), để bắt đầu code HTML thì các bạn gõ ! và bấm TAB, chúng ta sẽ có phần HTML cơ bản của 1 trang web.

Giờ mình sẽ tạo cái khung chữ nhật của game:
Screen Shot 2021-11-25 at 22.16.39.jpg
Ok mình tạo thẻ <div> </div> : viết tắt của division, thẻ này dùng để chứa đựng các thẻ khác, mình gán cho thẻ này id="game" (này chút qua CSS và JS sẽ dùng tới).
Các bạn sẽ thấy phần bên dưới trống trơn dù mình đã thêm thẻ HTML, đơn giản vì chúng ta mới tạo khung xương thôi, chưa đắp da thịt lên.

2. CSS

Viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để định dạng các phần tử của HTML, nôm na là đắp da thịt lên.


Giờ mình sẽ cho cái khung của game hiện hình lên nha:
Screen Shot 2021-11-25 at 22.25.34.jpg
Mình gõ bên cột CSS, để định dạng thẻ nào thì mình phải gọi id của thẻ đó với dấu #, mình cung cấp thông tin về dài (width), rộng (height) và viền (border) → phần trắng bên dưới lập tức hiện ra phần khung game. Code cũng dễ nhỉ, mấy dòng là ra ^^

Giờ mình sẽ thêm bạn Huyền Vân vào cột HTML:

Quảng cáo


Screen Shot 2021-11-25 at 22.43.24.jpg
Mình chèn ảnh của Huyền Vân bằng thẻ <img src="link ảnh"> và không quên gắn id="huyenvan"
Qua bên CSS mình cho Huyền Vân cao 210px và số đo chiều ngang là 140px

Mà giờ làm sao để Huyền Vân chạm đất ta?
Screen Shot 2021-11-25 at 22.44.22.jpg
Mình thêm thuộc tính position để cố định vị trí của Huyền Vân và top để di chuyển khoảng cách của Huyền Vân theo chiều dọc → Ok giờ Huyền Vân chạm đất rồi.

Tương tự như vậy mình thêm boss Cu Hiệp:
Screen Shot 2021-11-25 at 22.46.55.jpg
Boss Cu Hiệp phần CSS sẽ có thêm thuộc tính left để di chuyển sang phải, dùng thuộc tính right cũng được.

Quảng cáo


Giờ mình sẽ làm cho Huyền Vân di chuyển về phía Boss Cu Hiệp:
Screen Shot 2021-11-25 at 22.54.51.jpg
Mình thêm phần KeyFrame để tạo animation (0% là điểm bắt đầu, 100% là điểm dừng), và thêm vào huyenvan thuộc tính animation: (tên keyframe) + (thời gian Huyền Vân chạy) + forwards (chạy đến cuối thì dừng luôn, không quay lại 0%).

squid game codepen.gif
Giờ cứ F5 trang thì Huyền Vân sẽ tự động chạy, nhưng mình không muốn vậy, giờ mình muốn khi nào mình chạm vào màn hình thì Huyền Vân mới được chạy. Giờ là lúc ta cần Javascript.

3. Javascript (JS)

JS là ngôn ngữ lập trình Web cực kỳ phổ biến, trong khuôn khổ của bài viết này thì nếu HTML là khung xương, CSS là da thịt thì JS chính là bộ não điều khiển.


Giờ mình cần xử lý những logic sau:
  1. Ban đầu vào game thì Huyền Vân phải đứng yên.
  2. Khi click chuột/ chạm màn hình game thì Huyền Vân sẽ chạy, chạm thêm lần nữa thì đứng lại.
Screen Shot 2021-11-25 at 23.10.24.jpg
Cột CSS mình thêm vào thuộc tính .paused (để ngừng animation)
Cột JS thì mình đặt một biến tên là huyenvan và gán nó theo cú pháp là document.getElementById('huyenvan')

Giờ mình cho huyenvan đứng yên một chỗ bằng cách thêm thuộc tính .paused vào → F5 lại các bạn sẽ thấy hiệu quả.
Screen Shot 2021-11-25 at 23.17.23.png
Giờ mình thêm function (lệnh) vào cột JS tên là run có nghĩa như sau: nếu style của huyenvan đang là paused thì đổi qua running, else (ngược lại) thì đổi thành paused. (các bạn lưu ý dấu ‘=’ là gán giá trị còn ‘==’ là so sánh giá trị).
Giờ F5 lại và nhấp vào màn hình game là có thể điều khiển Huyền Vân chạy và đứng lại ^^

Như vậy là mình đã trình bày phần logic cơ bản nhất của Tinhte Squid game, những logic phức tạp hơn sẽ là:
  1. Bấm nút Start Game thì nhạc quản trò vang lên và Boss Cu Hiệp xoay đầu, hết nhạc thì xoay đầu lại.
  2. Boss Cu Hiệp sẽ quan sát bạn với thời gian ngẫu nhiên (1-5s) → tăng kịch tính và độ khó
  3. Di chuyển khi không có nhạc và Boss Cu Hiệp đang nhìn thì Huyền Vân thì sẽ bị bắn laser → Game Over.
  4. Đồng hồ đếm ngược 60s, hết thời gian không qua được vạch đích thì bị bắn laser → Game Over.
  5. Khi Huyền Vân qua vạch đích thì báo Thắng Cuộc.

Nếu hướng dẫn đầy đủ trong bài này sẽ rất dài nên mình sẽ chia sẻ file cho mọi người nhé ^^ Squid games - Google Drive

2. Học lập trình vui lắm

Trong quá trình mình học lập trình thì việc làm game chính là bài tập áp dụng những kiến thức học được. Việc suy nghĩ cách để hiện thực hóa những logic trong game làm mình cực kỳ hứng thú. Làm xong chia sẻ cho bạn bè chơi và nghe cảm nhận của họ về sản phẩm nhỏ của mình lại càng vui hơn.


Không nhất thiết học lập trình là phải đi làm nghề lập trình, bạn có thể dùng kiến thức lập trình để hỗ trợ cho công việc chính hoặc tạo ra những công cụ hỗ trợ đồng nghiệp và bạn bè. Dù theo hướng nào thì bạn cũng sẽ tạo ra niềm vui cho bản thân và người xung quanh.

Mình học lập trình từ 28 tuổi và kiến thức lập trình đã giúp mình tạo ra rất nhiều thứ vui vẻ:
[Chia sẻ] [Mày mò lập trình và cái kết] - Mail tự động đã thay đổi việc dạy học của mình như thế nào | Tinh tế (tinhte.vn)
Học lập trình có khó không? Review quá trình tự học làm App iOS và đăng lên App Store | Tinh tế (tinhte.vn)
[Chia sẻ] Công việc của mình đã hoàn toàn thay đổi sau đại dịch! | Tinh tế (tinhte.vn)

3. Bắt đầu như thế nào

Screen Shot 2021-11-25 at 23.39.53.jpg


Đây là freecodecamp.org, trang web dạy lập trình miễn phí rất nổi tiếng, mỗi ngày mọi người có thể dành một chút thời gian để học và làm theo hướng dẫn trên này.

Screen Shot 2021-11-25 at 23.41.42.jpg
Mỗi bài học sẽ có 3 cột từ trái sang gồm phần hướng dẫn kiến thức và bài tập → phần làm bài áp dụng → phần hiển thị nội dung lên web của code.

Nếu các bạn muốn học có video sinh động hơn thì có luôn: freeCodeCamp.org - YouTube
Screen Shot 2021-11-25 at 23.49.25.jpg
Hy vọng bài viết hữu ích cho mọi người ạ ^^
77 bình luận
cho bạn like, hay quá. Cũng muốn học từ đầu để kiếm cơm mà nghĩ thôi, già rồi ko có sức.
huecutte
ĐẠI BÀNG
2 tháng
@Foureyes8x Ad cho hỏi là muốn cho trẻ học code thì nên bắt đầu từ đâu
@huecutte Nếu bạn có các thiết bị của Apple và con bạn hoặc bạn biết Tiếng Anh thì hãy tải Swift Playground của Apple. Nếu con ban chưa biết Tiếng Anh thì hãy cho nó học TA trước vì nó rất quan trọng trong việc này, Swift Playground là 1 trò chơi và dạy code cho người mới, với trẻ con thì bạn nên cho nó chơi những game liên quan tới lập trình như Swift Playground thì dễ tiếp thu hơn.
PTTiT
TÍCH CỰC
2 tháng
Game khá thú vị. Chúc mừng bạn nhé
BarryAllen
ĐẠI BÀNG
2 tháng
nói chung không biết gì nhìn thì khó, nhưng tập trung tìm tòi rồi làm thì cũng mê lắm. Mình học IT, code ngu nhưng tới lúc làm đồ án cũng lao vào tìm tòi với làm như cái máy điện, ra được thành quả cũng vui =))
@BarryAllen Mấy cái pet project do mình tự nghĩ ra và tự làm nó thú vị lắm. Dù là công nghệ mới chưa đụng vào lần nào cũng cố tìm hiểu cho bằng được 😁 Làm được một sản phẩm, chia sẻ với cộng đồng, được người ta biết và góp ý nó vui lắm
GLES
ĐẠI BÀNG
2 tháng
@bango123 Mấy cái pet project làm xong thì đăng github để tạo cv cho đẹp và đóng góp cho ai có nhu cầu kéo về code lại 😁
@BarryAllen Vấn đề là thành quả nó ở mức nào thôi.
Ngành nào đi sâu cũng đều khó cả.
đối với những người biết rồi thì cái gì chẳng dễ!
@jeetkunedo Dạ vậy nên mình rủ mọi người học đó ạ ^^
@jeetkunedo Có ai dạy mà biết ti mẹ? Có ai dạy mà gặp phát phúc luôn?
tuananhcao
ĐẠI BÀNG
2 tháng
@jeetkunedo bạn này bắt đầu từ con số 0, không qua trường lớp nào, sau đó tự mày mò học làm app tiếng anh,... rất thông minh đấy bạn 😆
Tuy không khó nhưng cái khó là cái "biết cơ bản lập trình"
Cười vô mặt
@iPhonecafe cơ bản lập trình thì chương trình phổ thông cũng dạy mà. cái khó nhất của lập trình là tính kiên nhẫn thôi
game khá zui, chơi 2,3 lần gì đó là qua map 😆
Untitled.jpg
Ái chà tôi phải làm con máy mới chứ con laptop của tôi cùi quá
Nói chung không có mấy thằng PM, PO.. các thứ thúc đít, đẩy deadline thì lập trình luôn là vui =)))
@lxhxxnxxx ko thúc đít thì bác đi chơi rồi nhận lương cả tháng ầ 😁
@Dao Thi Thuc Trinh À mình có bảo là không được thúc đâu =))). Ý là nghịch thì vui chứ việc thì nó lại khác rồi.
@lxhxxnxxx em cũng bỏ code vì bị thúc đít nhiều quá ko theo được đây bác 😁
@Dao Thi Thuc Trinh Mình thì cố mãi lên làm người thúc đít. Mà xong thương dev quá không thúc nhiều nên sắp bị đuổi =))))).
Đi đâu cũng thấy truyền bá tư tưởng "trẻ em cũng làm được"
Thế thì cần dev làm gì nữa, học lập trình làm gì nữa, cho trẻ em vào làm game hết đi cho khoẻ
Cười vô mặt
@trungking Dạ em đang nói về cái game em làm trong bài thôi ạ ^^
@trungking nếu trẻ em mà chịu làm thì cho nó vào làm game luôn chứ cữ gì?
Làm game hay lập trình ko nhất thiết phải học vì đi làm kiếm tiền. Nó giúp rèn tư duy tốt lắm. Tốt cho trẻ em.
Harry La
TÍCH CỰC
2 tháng
Mình làm video cũng phải học 1 mớ JS 😁
Screenshot 2021-11-26 120542.png
tichla
ĐẠI BÀNG
2 tháng
bạn viết thêm phần cuhiep ngã đè lên Huyền vân
@tichla logic này khó quá em chịu ạ haha
@qsangp transform 180 độ là được. thêm -/+ để có các tư thế khác nhau
Cười vô mặt
zetbluez
TÍCH CỰC
2 tháng
Bạn dạy Anh Văn, sao không bắt đầu làm những game như Word Search, Anargram, Crossword, hay Hangman. Mình thấy nó có nhiều thuật toán để học và trao dồi đặc biệt là game Word Search và Crossword.
@zetbluez Dạ mình có làm khá nhiều project nhỏ, sẽ chia sẻ dần ạ ^^
quá hay lun sang ơi!
Nịnh sếp khéo quá! cao thủ
Khôn như mày :D
@D.lord BMW màu xanh trong cơn mưa lướt đi thật nhanh.
BMW màu xanh không biết khi nào trời tạnh.
Tung Bravo
ĐẠI BÀNG
2 tháng
Yêu quá
hmm cuối cùng có cho 2 mopd đó đánh nhau không vậy
Thú vị quá, mình làm cho các cty công nghệ đến nay là 16 năm rồi mà mỗi lần đi qua team dev vẫn rất tò mò nhìn vào những dòng code và cảm giác công việc đó nó đầy quyến rũ, bí ẩn và đầy quyền lực








  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2022 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: 209 Đường Nam Kỳ Khởi Nghĩa, Phường 7, Quận 3, TP.HCM
  • Số điện thoại: 02862713156
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019