Cách tạo game Hangman bằng Svelte

Svelte là một framework JavaScript hoàn toàn mới đang chiếm được cảm tình của lập trình viên. Bạn có thể dùng Svelte để tạo một game Hangman hấp dẫn theo cách cực kỳ đơn giản.

Cú pháp đơn giản của Svelte khiến nó trở thành “ứng cử viên” tuyệt vời cho người mới bắt đầu đi sâu vào thế giới framework JavaScript. Một trong số những cách tuyệt nhất để học Svelte là xây dựng một app hay game đơn giản như Hangman.

Game Hangman là gì?

Hangman là một game đoán từ thường được chơi bởi 2 người. Trong đó, một người chơi sẽ đưa ra một từ bí mật, người còn lại cần đoán từng chữ cái có trong từ đó. Mục tiêu dành cho người đoán là tìm ra từ bí mật trước khi hết lượt đoán sai.

Khi game bắt đầu, chủ trò chơi chọn một từ bí mật. Độ dài của từ thường được biểu thị bằng số nét gạch. Khi người đoán chữ cái không đúng, vẽ một phần của hangman, từ đầu, thân, cánh tay tới chân.

Người đoán giành chiến thắng nếu họ đoán đúng toàn bộ chữ cái trong từ bí mật trước khi quá trình vẽ người que hoàn thành. Hangman là cách tuyệt vời để kiểm tra từ vựng, kỹ năng lý luận và suy luận.

Thiết lập môi trường phát triển

Để thiết lập Svelte và chạy trên máy, bạn nên xây dựng dự án bằng Vite.js. Để dùng Vite, đảm bảo bạn đã cài Node Package Manager (NPM) và Node.js trên máy. Bạn cũng có thể dùng trình quản lý gói thay thế như Yarn. Giờ mở terminal và chạy lệnh sau:

npm create vite

Hành động này sẽ khởi động một dự án mới với Vite Command Line Interface (CLI). Đặt tên cho dự án của bạn, chọn Svelte làm framework, và đặt biến sang JavaScript. Giờ cd ở trong thư mục dự án và chạy lệnh sau để cài các phần phụ thuộc:

npm create vite

Giờ mở dự án, và trong thư mục src, tạo file hangmanArt.js, xóa thư mục assets và lib. Sau đó xóa nội dung của file App.svelte, App.css. Trong file App.css, thêm:

:root{
  background-color: rgb(0, 0, 0);
  color:green;
  font-family: monospace;
}

Sao chép nội dung của hangmanArt.js từ repository GitHub của dự án này, sau đó dán nó vào file hangmanArt.js. Bạn có thể khởi động server lập trình bằng lệnh sau:

npm run dev

Xác định logic của ứng dụng

Mở file App.svelte và tạo tag script sẽ chứa hầu hết logic của ứng dụng. Tạo mảng words để chứa một danh sách từ.

let words = [
  "appetizer",
  "roommates",
  "shrinking",
  "freedom",
  "happiness",
  "development",
];

Tiếp theo, nhập mảng hangmanArt từ file hangmanArt.js. Sau đó, tạo biến userInput, một biến randomNumber và biến khác để chứa từ được chọn ngẫu nhiên từ mảng words.

Gắn word đã chọn cho biến khác initial. Ngoài các biến khác, tạo biến sau: match, message, hangmanStages, và output. Khởi tạo biến kết quả bằng một chuỗi nét gạch, tùy thuộc vào độ dài của selectedWord. Gán mảng hangmanArt cho biến hangmanStages.

import { hangmanArt } from "./hangmanArt";
let userInput;
let randomNum = Math.floor(Math.random() * (words.length - 1));
let selectedWord = words[randomNum].toUpperCase();
let initial = selectedWord;
let match;
let message;
let hangmanStages = hangmanArt;
let output = "";
[...selectedWord].forEach(() => (output += "-"));
match = output;

Thêm các chức năng cần thiết

Khi người chơi đoán từ, bạn muốn hiện kết quả cho biết họ đã đoán đúng hay sai. Tạo hàm generateOutput để xử lý nhiệm vụ tạo đầu ra.

function generateOutput(input1, input2) {
  output = "";
  for (let i = 0; i < input1.length; i++) {
    if (input2[i] === "-") {
      output += input1[i];
    } else {
      output += "-";
    }
  }
}

Đối với mỗi lần người chơi đoán, chương trình sẽ phải xác định xem nó đúng hay sai. Tạo một hàm evaluate di chuyển bản vẽ người chơi sang giai đoạn tiếp theo nếu người chơi đoán sai, hoặc gọi hàm generateOuput nếu người chơi đoán đúng.

function evaluate() {
  let guess = userInput.toUpperCase().trim();
  if (!guess) {
    return;
  }
  if (selectedWord.includes(guess)) {
    selectedWord = selectedWord.replaceAll(guess, "-");
    generateOutput(initial, selectedWord);
  } else {
    hangmanStages.shift();
    hangmanStages = hangmanStages;
  }
  userInput = "";
}

Kết quả, bạn đã hoàn thành logic của ứng dụng. Giờ bạn có thể chuyển sang xác định đánh dấu.

Xác định đánh dấu của dự án

Tạo phần tử main chứa mọi thành phần trong game. Ở thành phần main, xác định h1 với text Hangman.

<h1 class="title">
    Hangman
</h1>

Tạo tagline và hiện hangman ở giai đoạn đầu tiên nếu số phần tử trong mảng hangmanStages lớn hơn 0.

<div class="tagline">
  I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
  <pre class="hangman">
  {hangmanStages[0]}</pre>
{/if}

Sau đó, triển khai logic hiện thông báo cho người chơi biết họ đã giành chiến thắng hay thua cuộc:

{#if hangmanStages.length === 1}
  <div class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord === match}
  <div class="message" bind:this={message}>You Win...</div>
{/if}

Tiếp theo, hiện kết quả và một biểu mẫu chấp nhận dữ liệu nhập vào từ người dùng. Kết quả và biểu mẫu này sẽ chỉ được hiện nếu phần tử chứa class “message” không nằm trên màn hình.

{#if !message}
  <div class="output">
    {#each output as letter}
      {#if letter !== "-"}
        <span class="complete box">{letter}</span>
      {:else}
        <span class="incomplete box" />
      {/if}
    {/each}
  </div>
  <form on:submit|preventDefault={() => evaluate()}>
    <input
      type="text"
      placeholder="Enter a letter"
      maxlength="1"
      bind:value={userInput}
    />
    <button type="submit">Submit</button>
  </form>
{/if}

Giờ bạn có thể thêm kiểu phù hợp cho ứng dụng. Tạo tag style và thêm code sau vào bên trong nó:

  * {
    color: green;
    text-align: center;
  }

  main {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  input,
  button {
    text-transform: uppercase;
    background-color: transparent;
    border: solid 1.2px green;
    height:40px;
    font-size: 15px;
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: inherit;
    border: dotted 1.2px green;
  }

  .output {
    display: flex;
    font-size: 23px;
    font-weight: 600;
    height: 45px;
    gap: 10px;
    justify-content: center;
  }

  .hangman {
    font-size: 32px;
  }

  form {
    margin-top: 50px;
  }

  .tagline,
  .message {
    font-size: 20px;
  }

Bạn đã tạo game Hangman thành công với Svelte.