Lập trình minigame với 7 dòng lệnh

Trong hội thảo “Trí tuệ nhân tạo Việt Nam 2018”, TS Lê Viết Quốc có nói rằng “Vào đại học mới dạy lập trình là quá muộn, nên dạy từ cấp 3”. Câu nói này của anh rất đúng. Đúng vì là bản thân mình chính là một minh chứng cho điều đó. Thực tế thì mình cũng được học lập trình từ cấp 3, khi đó môn học là Pascal. Điều kiện lúc đó ở một trường làng là khá thiếu thốn, học sinh chủ yếu học lập trình trên giấy. Khi đi thi thì được thực hành trên máy tính thật, nhớ hồi đó được cho tiền mua cái đĩa mềm Maxell là quý lắm. Sau đó lên đại học thì tự học lập trình nhiều hơn vì phục vụ mục đích lập trình Robot, hồi đó rất đam mê Robocon. Sau đó chuyển sang lĩnh vực vật lý thì gần như lập trình là công cụ sống còn. Điều mình nói ở đây là lập trình gần như có thể đi vào khía cạnh của rất nhiều lĩnh vực ngành nghề, từ điều khiển, cơ học, vật lý, và gần đây là trí tuệ nhân tạo. Đó cũng là lý do tại sao chúng ta phải quan tâm đến lập trình từ sớm, đặc biệt là cấp 3, vì khi đó tư duy là đủ để có thể tiếp nhận những khái niệm của lập trình. Gần đây vô tình phát hiện một trò chơi rất vui và “ngầu” của các bạn Nhật bản, thấy rất thích hợp để tổ chức những cuộc thi như vậy cho các bạn học sinh cấp 3. Đó là lập trình chỉ với 7 dòng lệnh. Và thật bất ngờ khi với chỉ 7 dòng lệnh, các bạn có thể lập trình các trò chơi như xếp hình hoặc trò chơi rắn nổi tiếng. Giờ chúng ta sẽ khám phá xem một đoạn lập trình với 7 dòng lệnh như thế nào nhé.

Bước 1:

Chắc các bạn ai cũng biết đến cho chơi rắn, một trò chơi kinh điển trên các điện thoại Nokia cục gạch 1082. Các bạn có thể download đoạn mã ran.html, nếu các bạn mở đoạn mã trên bằng một trình soạn thảo text, các bạn sẽ nhìn thấy như hình dưới, đó là một đoạn mã chỉ với 7 dòng lệnh.

ran-1

 

Bước 2:

Mở file ran.html trên với trình duyệt web Chrome (IE và Firefox có thể sẽ không hoạt động với đoạn mã trên) bạn sẽ thấy một trò chơi rắn hình như hình dưới. Thật ngạc nhiên khi nó chỉ là một đoạn code với 7 dòng lệnh như trên đúng không.

ran

Bây giờ chúng ta sẽ hiểu sâu hơn một chút về đoạn mã trên.

Giải thích code:

Để tiện giải thích code, mình sẽ viết lại code trên dưới dạng sau:

ran-2

  • 1: Trong HTML, thì một đoạn mã JavaScript phải được đặt giữa hai thẻ mở và đóng là < script> và </ script> .
    onKeyDown=~ : thực thi lệnh khi nhấn phím được chỉ định trên bàn phím.
    K=event.keyCode-37: số phím chỉ định được nhấn, trong đó 37 là mũi phím Left.
  • 2-14: Định nghĩa các hàm, các hàm này sẽ được gọi trong đoạn lệnh chính của chương trình. Trong JavaScript, một hàm được định nghĩ trong một đoạn mã như sau: function tên(biến1, biến2, ..){thuật toán thực thi}. Chú ý là ~.innerHTML nghĩa là kết quả được hiện thị trực tiếp trong một trình duyệt HTML như Chrome. Trong đó hàm Y() là quan trọng nhất, vì () nghĩa là không có biến, nên hàm sẽ luôn được thực thi. Do biến K được gắn giá trị -1 trong dòng 16, do đó trong lần thực thi đầu tiên thì K+1=0 và chương trình sẽ không thực thi trừ khi bạn nhấp phím. Sau khi bạn nhấn phím thì P sẽ trả về vị trí của con rắn “●”, trong khi K được gán giá trị 0, 2, 1, 3 tương ứng với phím trái, phải, trên, và dưới. X là vị trí tiếp theo của đầu rắn. if(X!=C)if(X!=”▲”){alert(“Over”);return} nghĩa là nếu vị trí X trùng với ký tự C (được gắn ký tự “□” trong dòng 16) và không trùng với ký tự “▲” thì game Over. Ngược lại nếu nó trùng với ký tự “▲”, giá trị M được tăng thêm (chiều dài của rắn) và ký tự “▲” mới sẽ được tạo ngẫu nhiên bằng lệnh ramdom() trong hàm R(H). Cuối cùng setTimeout(Y,99) nghĩa là tạo một vòng lặp của hàm Y() sau mỗi 99 mili giây. Các bạn có thể tăng độ khó lên bằng cách thay đổi câu lệnh như sau:
    setTimeout(Y,99) --> setTimeout(Y,99-M)

    với lệnh trên thì thời gian vòng lặp sẽ tăng nhanh lên khi chiều dài của rắn tăng lên.

  • 16: Gán giá trị cho các biến. Chú ý là đối với trình duyệt Firefox, D=document.all có thể không hoạt động, khi đó các bạn hãy thay thế bằng D=document.
  • 17-19: Đoạn thân chính, trong đó các hàm bên trên được gọi và sử dụng.

Kết luận:

Hi vọng sau khi hiểu đoạn lập trình trên, các bạn có thể tuỳ biến theo ý thích của mình hoặc lập trình cho các trò chơi đơn giản khác. Ví dụ, liên kết  https://zapanet.info/blog/item/1125 sẽ cung cấp cho các bạn về đoạn code cho trò chơi xếp hình.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s