Jan 01, 1970
5,425 lượt đọc
Tạo lại một trò chơi Pokemon đơn giản với 70 dòng Javascript
dài quá đọc không nổi
Trò chơi dựa trên "Ai là Pokemon đó?" từ loạt phim hoạt hình Pokemon. 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. Ứng dụng này khá đơn giản. Bạn hiển thị bóng hình sprite ngẫu nhiên của Pokemon, để người chơi phỏng đoán, sau đó tăng hoặc đặt lại bộ đếm vệt.Companies Mentioned
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. Bạn có thể xem nó trông như thế nào và thử nó tại đây . 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.
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ó API Pokemon nào cung cấp tất cả những điều đó không.
May mắn cho chúng tôi, có một PokeAPI 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.
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 - “ index.html ”, “ style.css ” và “ action.js ”. Đặ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 có thể kiểm tra tại đây . Sau đó, chỉ cần thêm liên kết đến các tệp CSS và JS bên trong thẻ head.
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> <!--For implementation details visit marinsborg.com--> <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 tệp action.js của tôi , 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.
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 chức năng tìm nạp . 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.
Trò chơi bắt đầu với getPokemon() . 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.
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 img src để viết URL và đặt độ sáng thuộc tính CSS thành 0.
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ý sự kiện 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 checkGuess() sẽ được gọi.
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 showPokemon() . showPokemon() 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, getPokemon() sẽ được gọi và toàn bộ quá trình sẽ bắt đầu lại. Và đó là nó.
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 tệp CSS của tôi , 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ôi đã tìm thấy một hình nền mà bạn có thể xem và tải xuống tại đây . 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ể tải xuống từ kho lưu trữ của tôi . 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.
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 flexbox . 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”.
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 quy tắc @media 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.
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 Twitter . Bạn cũng có thể theo dõi tôi ở đó cho các bài viết mới.
Để 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ể dễ dàng triển khai trò chơi này miễn phí để 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 hướng dẫn đơn giản này .
Cũng được xuất bản ở đây .
L O A D I N G
. . . comments & more!
. . . comments & more!
