Giới thiệu  "Pokemon đó là ai?" nên mang lại kỷ niệm cho hầu hết mọi người. Nếu bạn không biết nội dung của nó thì tôi khuyên bạn nên đi và tìm kiếm cuộc phiêu lưu của Ash Ketchum và người bạn Pokemon Pikachu của anh ấy.  Trong bài đăng này, tôi sẽ hướng dẫn bạn cách tạo một trò chơi đoán Pokemon đơn giản bằng HTML, CSS và JavaScript. Trò chơi hoàn toàn dựa trên "Ai là Pokemon?" từ loạt phim hoạt hình Pokemon. Bạn có thể tự nhắc mình xem nó trông như thế nào   . ở đây  Nó là một trò chơi đơn giản, nó chỉ có dưới 70 dòng mã JavaScript.   . Tôi cũng sẽ dạy bạn cách bạn có thể triển khai nó miễn phí. Trò chơi này là một ý tưởng dự án hoàn hảo mà bạn có thể cải thiện và thêm vào danh mục đầu tư của mình. Bạn có thể xem nó trông như thế nào và thử nó tại đây  Tôi sẽ không dạy bạn nhiều JavaScript trong bài đăng này, bạn có thể học nó từ nhiều hướng dẫn miễn phí có sẵn trên mạng miễn phí. Tuy nhiên, tôi sẽ dạy những bước cần thiết cần thiết để tạo ra một trò chơi như thế này.  Làm thế nào để bắt đầu?  Hãy tưởng tượng rằng bạn nhận được điều này như một nhiệm vụ ở trường hoặc như một nhiệm vụ trong công việc của bạn. Ai đó vừa cho bạn xem một video từ trên cao và bạn cần tạo lại video đó. Bạn thậm chí sẽ bắt đầu như thế nào?  Điều đầu tiên bạn cần kiểm tra là dữ liệu bạn cần có là gì.  Trong trường hợp này, bạn cần phải có một danh sách các Pokemon sprite cùng với tên Pokemon cho mỗi sprite. Bạn thường nhận được dữ liệu như vậy từ một số tệp cơ sở dữ liệu, CSV hoặc excel. Một tùy chọn khác là kiểm tra xem có   Pokemon nào cung cấp tất cả những điều đó không. API  May mắn cho chúng tôi, có một   miễn phí và cung cấp mọi thứ chúng tôi cần. Trên trang web của họ, bạn có thể tìm thấy tài liệu API và bạn cũng có thể kiểm tra API. Chúng tôi chỉ muốn thực hiện một lệnh gọi API khi ứng dụng khởi động. Kết quả của cuộc gọi đó chúng tôi sẽ lưu vào biến và sử dụng nó trong toàn bộ thời gian. PokeAPI  Khi sử dụng các API miễn phí công khai, hãy luôn đảm bảo rằng bạn giảm thiểu số lượng cuộc gọi vì điều đó đang tạo ra một số công việc trên máy chủ mà ai đó đang trả tiền!  Nghĩ ra ý tưởng  Bây giờ khi bạn biết rằng bạn có tất cả dữ liệu cần thiết một cách dễ dàng, bạn cần kiểm tra xem ứng dụng của bạn cần có những tính năng nào. Đó được gọi là các yêu cầu chức năng. Bạn viết chúng ra và sau đó bạn bắt đầu thực hiện những gì bạn đã viết. Vì vậy, các yêu cầu chức năng cho ứng dụng này sẽ là:  lấy tất cả dữ liệu Pokemon từ API  hiển thị bóng của một sprite của một Pokemon ngẫu nhiên  hiển thị chuỗi dự đoán đúng của người chơi hiện tại  người chơi cần có khả năng đoán tên Pokemon bằng cách viết tên vào trường nhập liệu và nhấn phím Enter  nếu người chơi đoán đúng, hãy tăng khoảng cách lên một, nếu không thì đặt lại khoảng cách bằng 0  sau khi đoán, hãy tiết lộ Pokemon là gì bằng cách hiển thị hình vẽ và in tên của nó  lặp lại tất cả các bước ở trên ngoại trừ bước đầu tiên  Bạn cũng có thể lập danh sách các yêu cầu phi chức năng:  tìm hoặc tạo hình nền giống với hình nền trong anime  tìm một phông chữ tương tự như phông chữ Pokemon  thêm một số kiểu CSS vào biểu mẫu đầu vào  Thực hiện  Như bạn có thể thấy, ứng dụng này khá đơn giản. Bạn hiển thị bóng sprite ngẫu nhiên của Pokemon, để người chơi đoán, sau đó tăng hoặc đặt lại bộ đếm vệt. Và đối với bước cuối cùng, hiển thị Pokemon và sau đó nhận một Pokemon mới.   Mở trình soạn thảo văn bản yêu thích của bạn. Tôi thích sử dụng Visual Studio Code (VS Code). Tạo ba tệp - “   ”, “   ” và “   ”. Đặt tất cả ba tệp trong cùng một thư mục. Mở index.html và khởi tạo nó. Trong VS Code, bạn có thể làm điều đó đơn giản bằng cách gõ! và sau đó nhấn phím tab. Nếu bạn không sử dụng VS Code và không biết cách khởi tạo tệp HTML, bạn   . Sau đó, chỉ cần thêm liên kết đến các tệp CSS và JS bên trong thẻ head. index.html style.css action.js có thể kiểm tra tại đây  Bên trong các thẻ body, bạn cần thêm một thẻ hình ảnh nơi các sprites sẽ được hiển thị, một trường đầu vào để người dùng đoán và một trường span để hiển thị chuỗi đoán chính xác. Mỗi thẻ trong số đó phải có một thuộc tính id duy nhất. Bây giờ chúng ta đã hoàn thành với HTML, đây là giao diện của nó cho đến nay:   <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="action.js" defer></script> <link rel="stylesheet" href="style.css"> <title>Who's that Pokemon?</title> </head> <body> <img id="sprite"> <input type="text" placeholder="Who's that Pokemon?" id="guess"> <br> <span id="streak">Streak: 0</span> </body> </html>  Bây giờ chúng ta hãy tập trung vào tệp action.js. Có toàn bộ logic của trò chơi. Trên GitHub, bạn có thể kiểm tra   , nơi tôi đã nhận xét trên hầu hết mọi dòng về chức năng của nó. Đó là lý do tại sao tôi sẽ không giải thích từng dòng một ở đây. tệp action.js của tôi  Như bạn có thể thấy trong tệp, PokeAPI với URL cơ sở có thể nhận thêm các đối số "giới hạn" và "bù đắp". Bằng cách đó, bạn có thể chọn Pokemon nào bạn muốn nhận được trong phản hồi API và số lượng Pokemon trong số đó. Tôi đặt bù đắp thành 0 và giới hạn ở 150, vì vậy tôi sẽ luôn chỉ nhận được Pokemon từ thế hệ đầu tiên. Bạn có thể thay đổi điều này theo cách bạn muốn.   Như bạn có thể thấy trong hình trên - API sẽ trả về một mảng các đối tượng và mỗi đối tượng chứa tên Pokemon và URL mà bạn có thể mở để biết thêm thông tin về Pokemon đó. Pokemon được sắp xếp theo số PokeDex của chúng, tuy nhiên bên trong một mảng, số lượng của chúng bị giảm đi một vì mảng bắt đầu từ số không. Đây là lệnh gọi API duy nhất bạn cần thực hiện.  Trong JavaScript, bạn có thể thực hiện cuộc gọi tới API theo một số cách. Tôi đã sử dụng   . Sau khi dữ liệu được tìm nạp từ API và được lưu vào một biến, trò chơi có thể bắt đầu. chức năng tìm nạp  Trò chơi bắt đầu với   . Chức năng đó cũng được sử dụng để tạo ra một Pokemon mới mỗi khi người dùng đoán. Vì vậy, khi bắt đầu chức năng đó, cần phải dọn dẹp một số trước khi tạo Pokemon mới. getPokemon()  Tạo Pokemon rất đơn giản - lấy một số ngẫu nhiên, lấy tên Pokemon và viết theo số đó và lưu nó vào các biến. Sau đó, hiển thị bóng của Pokemon bằng cách đặt thuộc tính   để viết URL và đặt độ sáng thuộc tính CSS thành 0. img src  Sau đó, ứng dụng sẽ không làm gì cho đến khi người dùng nhấn phím Enter. Bạn nên thêm một trình xử lý   vào trường nhập liệu sẽ kiểm tra xem phím Enter có được nhấn hay không và nếu đó là một hàm   sẽ được gọi. sự kiện checkGuess()    chỉ đơn giản là tăng hoặc đặt lại giá trị chuỗi dựa trên suy đoán của người dùng và gọi   .   cập nhật giá trị vệt trên HTML, hiển thị hình vẽ của Pokemon và hiển thị tên của Pokemon. Sau 2 giây,   sẽ được gọi và toàn bộ quá trình sẽ bắt đầu lại. Và đó là nó. checkGuess() showPokemon() showPokemon() getPokemon()  Tạo kiểu  Ok, bây giờ là lúc để thêm một số phong cách cho trò chơi này để nó trông giống như trong video. Như bạn đã biết CSS được sử dụng để tạo kiểu. Bạn có thể kiểm tra   , nó không chứa nhiều. Và tôi khá chắc chắn rằng bạn có thể tạo kiểu này tốt hơn nhiều so với tôi. Rốt cuộc, tôi chỉ là một nhà phát triển phụ trợ.  tệp CSS của tôi  Tôi đã tìm thấy một hình nền mà bạn có thể   . Tôi cũng tìm thấy một phông chữ rất giống với phông chữ Pokemon. Bạn cũng có thể   . Việc đặt hình nền rất dễ dàng - bên trong tệp CSS, bạn cần thêm thuộc tính 'background-image' vào thẻ body với đường dẫn đến hình ảnh. xem và tải xuống tại đây tải xuống từ kho lưu trữ của tôi  Sprite luôn được hiển thị ở phía bên trái của màn hình, trong khi văn bản và tên Pokemon được hiển thị ở phía bên phải. Để tạo ra một hiệu ứng chỉ có hai cột, bạn có thể sử dụng   . Bên trong HTML, bạn cần thêm một div cha với một lớp “hàng” và bên trong div đó, bạn cần thêm hai div với một lớp “cột”. flexbox  Tải phông chữ tùy chỉnh cũng đơn giản trong CSS. Với @ font-face, bạn đặt tên của phông chữ và đường dẫn đến phông chữ. Sau đó, bạn có thể sử dụng phông chữ đó với tên của nó. Sử dụng phông chữ đó để tạo kiểu "Ai là Pokemon?" ở phía bên phải của màn hình và cũng là tên của Pokemon khi nó được tiết lộ.  Bạn có thể tạo kiểu cho trường nhập và đường kẻ theo cách bạn muốn, tôi chỉ thêm các góc tròn vào trường nhập và căn chỉnh văn bản. Tôi cũng đã thay đổi kích thước. Bạn có thể kiểm tra những gì bạn thích hoặc bạn có thể sử dụng giá trị của tôi.  Điều cuối cùng bạn cần thêm là tạo kiểu cho thiết bị di động. Nó được thêm vào với   nơi bạn đặt các thuộc tính CSS mới nếu cửa sổ trình duyệt rộng 500px trở xuống. Ở đó, bạn cần thay đổi các cột được hiển thị dưới dạng hàng, giảm kích thước phông chữ và tăng chiều rộng của trường nhập liệu. Và đó là nó để tạo kiểu. Như tôi đã nói, bạn có thể làm điều đó tốt hơn nhiều so với tôi, đây là mức tối thiểu cần thiết để làm cho nó trông giống với video. quy tắc @media  Bước tiếp theo  Trong hướng dẫn này, tôi đã chỉ cho bạn cách triển khai "Ai là Pokemon đó?" trò chơi với HTML, CSS và JavaScript. Nếu bạn gặp khó khăn ở phần nào đó, bạn có thể đọc nhận xét bên trong tệp action.js hoặc hỏi tôi tại đây hoặc trên   . Bạn cũng có thể theo dõi tôi ở đó cho các bài viết mới. Twitter  Để thực hành, bạn có thể triển khai một số tính năng mới để cải thiện trò chơi này và làm cho nó trở nên độc đáo. Ví dụ:  thêm các nút mà người dùng có thể nhấp để thay đổi các thế hệ Pokemons để đoán  thêm một chức năng sẽ phát giọng nói "Ai là Pokemon đó?" lần đầu tiên trò chơi được tải.  Tạo một biến mới sẽ hiển thị điểm cao.  Thêm đồng hồ đếm ngược thời gian nhận Pokemon mới  Có rất nhiều ý tưởng bạn có thể thực hiện, bằng cách đó bạn sẽ có được một số kinh nghiệm mới và bạn sẽ học được những điều mới.  Sau khi hoàn thành, bạn có thể   để bạn có thể thể hiện nó trong danh mục đầu tư hoặc trong CV của mình. Chỉ cần làm theo   . dễ dàng triển khai trò chơi này miễn phí hướng dẫn đơn giản này  Cũng được xuất bản   . ở đây

Amazon

Fetch

Mozilla

Twitter

YouTube

Free programming tutorials and project ideas

Writer

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

Tạo lại một trò chơi Pokemon đơn giản với 70 dòng Javascript

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

85 Stories To Learn About Productivity Hacks

287 Stories To Learn About Blockchain Development

145 Stories To Learn About Book

240 Stories To Learn About Astounding Stories

85 Stories To Learn About Productivity Hacks

287 Stories To Learn About Blockchain Development

145 Stories To Learn About Book

240 Stories To Learn About Astounding Stories

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps