Hướng dẫn get file dimensions javascript - lấy kích thước tệp javascript

I.Giới thiệu về trò chơi:

• 15 puzzle do Sam Loyd nghĩ ra vào năm 1878 lúc đó là 1 món đồ chơi cầm tay bằng nhựa giống như hình minh họa.
  
• Nhìn bề ngoài trông có vẻ đơn giản nhưng tính "hại não" rất cao.
• Cách chơi rất đơn giản bạn chỉ đẩy các ô số vào ô trống, sắp xếp theo thứ tự 1 - 15 giống bảng bên dưới là dành chiến thắng :

1    2    3    4
5    6    7    8
9    10   11   12
13   14   15

II.Demo trò chơi:

• Dưới đây là phần trò chơi đã được số hóa bằng HTML/CSS/ Javascript, các bạn có thể bấm vào "click to play" để trải nghiệm ngay và luôn. Ấn các ô số xung quanh ô màu trắng để đổi vị trí. Game được thiết kế để chạy trên cả PC lẫn Mobile."click to play" để trải nghiệm ngay và luôn. Ấn các ô số xung quanh ô màu trắng để đổi vị trí. Game được thiết kế để chạy trên cả PC lẫn Mobile.

00:00

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

III.Hướng dẫn các bước code:

1. Tạo file

• Tạo file index.html hoặc file có đuôi .html

2. Code giao diện HTML/CSS

  

    

      
Puzzle 15
      
00:00
      

        Click to play
      
      

      

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
        
11
        
12
        
13
        
14
        
15
        

      
    
  

• Element có id="board-time" nơi hiển thị thời gian.id="board-time" nơi hiển thị thời gian.
• Element có id="play" nơi nhấn nút play.id="play" nơi nhấn nút play.
• Element có id="puzzle" nơi hiển thị matrix puzzle là phần quan trọng nhất của trò chơi.id="puzzle" nơi hiển thị matrix puzzle là phần quan trọng nhất của trò chơi.
• Mỗi element có class="cell-puzzle" là 1 phần tử của matrix puzzle. Matrix puzzle có cầu trúc 4 hàng * 4 cột, 1 phần tử là 1 ô vuông có cạnh 60px,nên mỗi phần tử sẽ thuộc 1 hàng và 1 cột riêng biệt nên sẽ có class riêng biệt để css.class="cell-puzzle" là 1 phần tử của matrix puzzle. Matrix puzzle có cầu trúc 4 hàng * 4 cột, 1 phần tử là 1 ô vuông có cạnh 60px,nên mỗi phần tử sẽ thuộc 1 hàng và 1 cột riêng biệt nên sẽ có class riêng biệt để css.
• VD: phần tử thuộc hàng số 2, cột số 3 sẽ có class lần lượt là: **class="cell-puzzle row-2 col-3" **

3. Code tính toán, hiệu ứng của trò chơi bằng Jquery/Javascript:

• Liên kết hàm jquery để code ngắn hơn, chạy mượt hơn.

4. Mở file lên bằng trình duyệt và chơi:

• Sử dụng trình duyệt internet explore, chrome, firefox... để chơi.
• Có thể chạy được trên các trình duyệt của mobile.

IV. Kết luận:

• Thành phần chính của game chỉ sử dụng những kiến thức cơ bản như mảng 2 chiều (matrix), hàm đếm thời gian(setTimeout), tạo số ngẫu nhiên(random)...
• Code game chỉ khoảng 300 dòng (hơi dài do HTML/CSS).
• Game có thể chạy trên mobile.
• Việc tập làm game có thể giúp cho bạn thấy rằng code không hẳn là khô khan mà thực chất rất thú vị và sống động, những kiến thức rất đơn giản và cơ bản khi kết hợp lại với nhau một cách khéo léo có thể tạo thành những game rất thú vị.