Làm thế nào để Xây dựng Số Guesser trong trò chơi HTML5 của bạn - núm vú

Với số ngẫu nhiên, bạn có thể tạo các trò chơi HTML5 thú vị. Hãy xem một trò chơi đơn giản sử dụng HTML, CSS và JavaScript cùng nhau. Trò chơi này có một số tính năng thú vị:

• Nó sử dụng trang web làm giao diện. Giống như nhiều chương trình JavaScript, nó sử dụng một trang web làm giao diện người dùng. Một yếu tố đầu vào được sử dụng cho đầu vào, một div là yếu tố đầu ra chính, và một nút kích hoạt tất cả các hành động.

• Nó sử dụng CSS để tạo dáng. Các phần khác nhau của trang được định dạng bằng CSS. CSS được lưu trữ trong một tờ kiểu dáng bên ngoài để tiện lợi và có thể sử dụng lại được.

• Nó nói với người sử dụng bao nhiêu lượt cô đã chụp. Trên mỗi lần vượt qua, máy tính nhắc nhở người sử dụng biết bao lần lượt xảy ra.

• Khi người dùng đoán đúng, nút Khởi động lại sẽ xuất hiện. Nút này được ẩn lúc đầu, và chỉ xuất hiện khi cần thiết.

• Câu trả lời đúng cho các lập trình viên thông qua một tính năng gỡ lỗi đặc biệt. Trong khi thử nghiệm chương trình, nhà phát triển có thể thấy được câu trả lời đúng, nhưng thông tin này bị ẩn khỏi người dùng.

• Chức năng init () bắt đầu trò chơi. Chức năng init () khởi tạo trò chơi. Nó được gọi là khi chương trình đầu tiên bắt đầu và một lần nữa khi người dùng muốn bắt đầu lại.

• Một chức năng khác được gắn vào nút. Khi người dùng nhấp vào nút Kiểm tra Guess của bạn, đoán của người dùng hiện tại được so sánh với câu trả lời đúng, và một gợi ý sẽ được trả lại cho người dùng.

  

Làm thế nào để thiết kế các chương trình trò chơi

Khi bạn xây dựng một chương trình phức tạp, bạn cần phải bắt đầu với một kế hoạch thiết kế.

Phần lớn các công việc trong phát triển trò chơi xảy ra trước khi bạn bắt đầu lập trình. Nếu bạn thiết kế tốt các trò chơi, lập trình được dễ dàng hơn để làm. Một thiết kế trò chơi giúp bạn hiểu nhiều điều về trò chơi trước khi bạn bắt đầu viết mã:

• Bố trí chung: Trong khi bố cục không hoàn toàn quyết định bởi bản vẽ này, bạn sẽ dễ dàng nhìn thấy giao diện chung.

• Các thành phần được đặt tên: Mọi yếu tố cần có một tên đã được xác định, và tên được viết trên tài liệu. Một số phần tử (như nút đầu tiên) không cần tên vì chúng sẽ không được đề cập đến trong mã.

• Nút chức năng: Mỗi nút sẽ gọi một chức năng. Biểu đồ chỉ ra chức năng mà mỗi nút sẽ gọi.

• Kế hoạch các chức năng: Mỗi chức năng được lên kế hoạch với một mô tả bằng tiếng Anh về chức năng sẽ làm gì.

• Các biến toàn cục: Các biến số cần chia sẻ giữa các chức năng được mô tả.

Thật khó để tạo ra một tài liệu thiết kế tốt, nhưng làm như vậy làm cho việc lập trình trở nên dễ dàng hơn một chút. Thật khó để tìm ra những gì bạn đang cố gắng để làm, và nó cũng khó để tìm ra cách để làm điều đó. Có một tài liệu thiết kế tách hai quy trình này trước tiên bạn có thể tập trung vào bạn đang làm gì , và sau đó lo lắng về làm thế nào bạn sẽ làm điều đó.

Làm thế nào để xây dựng HTML cho trò chơi

Mã HTML cho trò chơi đoán số là khá dễ dàng để viết nếu bạn đã thiết kế các trò chơi trên giấy đầu tiên. Đây là mã:

Số Guesser

Số Guesser
Tôi đang nghĩ đến một số từ 0 đến 100. Đoán số của tôi, và tôi sẽ nói nếu bạn quá cao, quá thấp hoặc đúng. Đoán của bạn kiểm tra đoán của bạn thử lại

Rất tốt để tách HTML, CSS và JavaScript vì thực tế này cho phép bạn "phân chia và chinh phục" một vấn đề lớn thành một số vấn đề nhỏ hơn. Dưới đây là các tính năng chính của tài liệu HTML:

1. Liên kết đến CSS trong một tệp ngoài.

   Hiện tại, CSS không phải là quan trọng, vì vậy bạn chuyển nó sang một tệp riêng biệt để bạn có thể làm việc với nó sau này.

2. Nguồn ngoài mã JavaScript.

   Bạn cũng di chuyển mã JavaScript vào một tệp ngoài, do đó bạn không phải lo lắng về nó. Trong mã HTML, chỉ cần làm cho các liên kết đến các tập tin bên ngoài.

3. Tạo một biểu mẫu như là thành phần chính của trang.

   Khía cạnh quan trọng nhất của trang này là hình thức. Giống như hầu hết các biểu mẫu, nó sẽ có một fieldset, nhãn, các yếu tố đầu vào, và các nút.

4. Tạo một div cho đầu ra.

   div xuất chỉ là một div bình thường. Bạn đặt nó bên trong fieldset để nó sẽ duy trì liên kết hình ảnh với phần còn lại của biểu mẫu. Bạn có thể đặt văn bản mặc định bên trong div (mặc dù có thể bạn sẽ thay đổi văn bản này sau). Bởi vì div sẽ được gọi qua mã, nó cần một thuộc tính id.

5. Tạo một khu vực đầu vào cho người dùng đoán.

   Người dùng sẽ cần gõ một số kiểu nhập số. Sử dụng một yếu tố đầu vào cho mục đích này. Tham khảo tài liệu của bạn để nhớ id của phần tử này. (Bạn đã làm tạo một tài liệu thiết kế, phải không?) Rất tốt để thêm một nhãn vào đầu vào để người sử dụng biết những gì dự kiến ​​ở đó.

6. Tạo một nút để kiểm tra đoán.

   Người dùng không cam kết cho đến khi cô ấy nhấp vào nút Kiểm tra Guess của bạn. Vì vậy, bạn thực sự cần phải có nút như vậy. Nút này không cần tên, nhưng nó sẽ gọi hàm checkGuess ().

7. Tạo một nút thứ hai để bắt đầu lại.

   Một tính năng thú vị của chương trình này là một nút cho phép người dùng khởi động lại. Nút thứ hai này chỉ có sẵn khi người dùng đoán chính xác câu trả lời. Bạn tạo nó với HTML thông thường và sử dụng CSS và JavaScript thủ thuật để làm cho nó biến mất và xuất hiện theo yêu cầu.