Xây dựng trò chơi Hangman: Giao diện người dùng

Trong loạt bài này, chúng tôi sẽ xây dựng một trò chơi Hangman (người treo cổ) cho nền tảng Android. Trong hướng dẫn đầu tiên, chúng tôi thiết lập ứng dụng để hiển thị hai màn hình cho người dùng và chúng tôi cũng đã bắt đầu với các thành phần giao diện người dùng, hình ảnh và hình vẽ có thể chính xác. Trong hướng dẫn thứ hai, chúng tôi sẽ nhìn cận cảnh bố cục của trò chơi.

Giới thiệu

Việc tạo ra bố cục của trò chơi sẽ liên quan đến việc sử dụng adapter để tạo các nút chữ cái và định vị các bộ phận cơ thể chúng ta sẽ hiển thị khi người dùng chọn các chữ cái không chính xác. Chúng tôi cũng sẽ lưu lại các câu trả lời của người chơi bằng XML, truy xuất chúng và chọn một từ ngẫu nhiên bằng Java.

Để giúp bạn ghi nhớ, trò chơi sau cùng sẽ giống như vậy.

1. Định vị các bộ phận cơ thể

Bước 1

Trong hướng dẫn trước, chúng tôi đã tạo ra hình ảnh cho giá treo cổ và cho 6 bộ phận cơ thể. Chúng tôi sẽ xếp đặt chúng bên trong bố cục của trò chơi trong hướng dẫn này. Vị trí bạn đặt cho các thành phần này cần được xác định bởi các thành phần hình ảnh mà bạn đang sử dụng. Một cách tiếp cận là nhập hình ảnh vào trình chỉnh sửa hình ảnh, chẳng hạn như Photoshop của Adobe, định vị chúng theo cách thủ công và sau đó sử dụng vị trí x và y của chúng so với hình ảnh giá treo để tìm ra các vị trí chính xác để áp dụng cho từng hình ảnh trong bố cục XML. Nếu bạn đang bắt đầu với các hình ảnh demo mà chúng tôi đưa vào hướng dẫn trước, bạn có thể sử dụng các giá trị được liệt kê trong hướng dẫn này.

Bắt đầu bằng cách mở activity_game.xml. Bên trong bố cục tuyến tính mà chúng tôi đã bổ sung trong hướng dẫn trước, nhập bố cục tương đối để định vị 7 hình ảnh sẽ tạo nên khu vực giá treo cổ.

<RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="#FFFFFFFF"
  android:gravity="center"
  android:paddingTop="15dp" >
</RelativeLayout>

Bước 2

Bên trong bố cục tương đối vừa tạo, hãy bắt đầu bằng cách thêm ảnh giá treo như hình sau đây:

<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:contentDescription="@string/gallows"
  android:paddingLeft="0dp"
  android:paddingTop="0dp"
  android:src="@drawable/android_hangman_gallows" />

Nhớ sửa đổi tên drawable nếu hình ảnh bạn đang sử dụng được đặt tên khác. Chúng tôi thiết lập padding (vùng đệm) bên trái và trên cùng của hình ảnh thành 0 để chúng tôi có thể định vị các hình ảnh khác có liên quan đến vị trí của nó. Sau này, chúng tôi sẽ thêm tài nguyên string cho các mô tả nội dung trong hướng dẫn này. Tiếp theo là phần đầu.

<ImageView
  android:id="@+id/head"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:contentDescription="@string/head"
  android:paddingLeft="108dp"
  android:paddingTop="23dp"
  android:src="@drawable/android_hangman_head" />

Nếu bạn đang sử dụng hình ảnh của riêng mình, bạn sẽ cần thay đổi phần đệm bên trái và trên cùng cho phù hợp. Chúng tôi sử dụng một thuộc tính id để chúng tôi có thể tham chiếu đến hình ảnh trong mã. Điều này là cần thiết để làm cho nó xuất hiện và biến mất tùy thuộc vào đầu vào của người dùng. Hình ảnh tiếp theo chúng tôi thêm là cơ thể.

<ImageView
  android:id="@+id/body"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:contentDescription="@string/body"
  android:paddingLeft="120dp"
  android:paddingTop="53dp"
  android:src="@drawable/android_hangman_body" />

Điều này trông rất giống với những gì chúng ta đã làm cho đầu và, như bạn có thể thấy bên dưới, cánh tay và chân khá giống nhau.

<ImageView
  android:id="@+id/arm1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:contentDescription="@string/arm"
  android:paddingLeft="100dp"
  android:paddingTop="60dp"
  android:src="@drawable/android_hangman_arm1" />

<ImageView
  android:id="@+id/arm2"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:contentDescription="@string/arm"
  android:paddingLeft="120dp"
  android:paddingTop="60dp"
  android:src="@drawable/android_hangman_arm2" />

<ImageView
  android:id="@+id/leg1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:contentDescription="@string/leg"
  android:paddingLeft="101dp"
  android:paddingTop="90dp"
  android:src="@drawable/android_hangman_leg1" />

<ImageView
  android:id="@+id/leg2"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:contentDescription="@string/leg"
  android:paddingLeft="121dp"
  android:paddingTop="90dp"
  android:src="@drawable/android_hangman_leg2" />

Mở tệp XML chuỗi res / value của dự án và thêm các chuỗi mô tả nội dung mà chúng tôi đã sử dụng trong các đoạn mã trên.

<string name="gallows">The Gallows</string>
<string name="head">The Head</string>
<string name="body">The Body</string>
<string name="arm">An Arm</string>
<string name="leg">A Leg</string>

Quay trở lại tệp bố cục và chuyển sang tab General Layout để xem kết quả công việc của chúng tôi. Điều chỉnh phần đệm trên cùng và bên trái của mỗi hình ảnh để điều chỉnh vị trí của chúng nếu cần thiết.

Bất cứ khi nào một trò chơi mới được bắt đầu, các bộ phận cơ thể cần phải được ẩn đi. Mỗi phần cơ thể được tiết lộ nếu người chơi chọn một chữ cái không có trong từ mục tiêu.

2. Lưu trữ các từ trả lời

Trò chơi sẽ sử dụng một tập hợp các từ được xác định trước mà chúng tôi sẽ lưu trữ trong XML. Trong thư mục giá trị tài nguyên dự án của bạn, hãy thêm một tệp mới và đặt tên là Arrayays.xml.

Chuyển sang tab XML, tạo một mảng và thêm một vài từ vào nó.

<resources>
  <string-array name="words">
    <item>CHARGER</item>
    <item>COMPUTER</item>
    <item>TABLET</item>
    <item>SYSTEM</item>
    <item>APPLICATION</item>
    <item>INTERNET</item>
    <item>STYLUS</item>
    <item>ANDROID</item>
    <item>KEYBOARD</item>
    <item>SMARTPHONE</item>
  </string-array>
</resources>

Đối với hướng dẫn này, chúng tôi sử dụng một mảng các từ liên quan đến điện toán. Tuy nhiên, để làm cho trò chơi thú vị hơn, bạn có thể làm việc với nhiều danh mục khác nhau với mỗi danh mục có chứa các từ liên quan đến một chủ đề cụ thể. Khi người dùng nhấp vào nút phát, bạn có thể nhắc họ chọn một danh mục và đọc trong mảng từ có liên quan.

3. Chọn và trình bày một từ

Bước 1

Quay lại tệp bố cục hoạt động của trò chơi của bạn, thêm bố cục tuyến tính ngay sau bố cục tương đối mà chúng tôi đã thêm cho khu vực giá treo cổ. Bố cục tuyến tính được dành riêng cho khu vực trả lời.

<LinearLayout
  android:id="@+id/word"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_marginBottom="5dp"
  android:background="#FFFFFFFF"
  android:gravity="center"
  android:orientation="horizontal"
  android:padding="10dp" >
</LinearLayout>

Chúng tôi lưu trữ từng ký tự của từ mục tiêu trong chế độ xem văn bản của chính nó để chúng tôi có thể tiết lộ từng chữ cái riêng biệt. Chúng tôi sẽ sử dụng id của bố cục tuyến tính trong mã để thêm các chế độ xem văn bản mỗi khi một từ mới được chọn.

Bước 2

Mở lớp GameActivity và bắt đầu bằng cách thêm các câu lệnh nhập sau vào đầu.

import android.content.res.Resources;
import android.graphics.Color;
import android.view.Gravity;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;
import android.widget.TextView;

Trong khai báo lớp, thêm một phương thức onCreate như dưới đây.

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_game);
}

Chúng tôi đặt chế độ xem nội dung thành tệp bố cục mà chúng tôi đã tạo trước đây.

Bước 3

Trước khi chúng ta tiếp tục, chúng ta cần khai báo một vài biến thể hiện. Thêm khai báo ngay trước phương thức onCreate.

private String[] words;
private Random rand;
private String currWord;
private LinearLayout wordLayout;
private TextView[] charViews;

Bộ sưu tập các từ được lưu trữ trong một mảng và ứng dụng sử dụng đối tượng rand để chọn một từ trong mảng mỗi khi người dùng bắt đầu một trò chơi mới. Chúng tôi giữ một tham chiếu đến từ hiện tại (currWord), bố cục chúng tôi đã tạo để giữ vùng trả lời (wordLayout) và một loạt các chế độ xem văn bản cho các chữ cái (charViews). Quay lại onCreate, sau khi đặt chế độ xem nội dung, yêu cầu tài nguyên của ứng dụng, đọc bộ sưu tập các từ và lưu trữ chúng vào biến thể hiện của words.

Resources res = getResources();
words = res.getStringArray(R.array.words);

Lưu ý rằng chúng tôi sử dụng tên mà chúng tôi đã đưa ra mảng từ trong XML. Khởi tạo đối tượng rand và chuỗi currWord.

rand = new Random();
currWord = "";

Nhận một tham chiếu đến khu vực bố trí chúng tôi tạo ra cho các chữ cái trả lời.

wordLayout = (LinearLayout)findViewById(R.id.word);

Bước 4

Một số nhiệm vụ cần được thực hiện mỗi khi người chơi bắt đầu một trò chơi mới. Hãy tạo một phương thức trợ giúp để giữ mọi thứ ngăn nắp. Sau phương thức onCreate, thêm phác thảo phương thức sau.

private void playGame() {
  //play a new game
}

Trong phương thức playGame, bắt đầu bằng cách chọn một từ ngẫu nhiên từ mảng.

String newWord = words[rand.nextInt(words.length)];

Vì phương thức playGame được gọi khi người dùng chọn chơi lại sau khi thắng hoặc thua trò chơi, điều quan trọng là chúng tôi đảm bảo rằng chúng tôi không chọn cùng một từ hai lần liên tiếp.

while(newWord.equals(currWord)) newWord = words[rand.nextInt(words.length)];

Cập nhật biến đối tượng currWord với từ đích mới.

currWord = newWord;

Bước 5

Bước tiếp theo là tạo một chế độ xem văn bản cho mỗi chữ cái của từ mục tiêu. Vẫn bên trong phương thức trợ giúp của chúng tôi, tạo một mảng mới để lưu trữ các chế độ xem văn bản cho các chữ cái của từ mục tiêu.

charViews = new TextView[currWord.length()];

Tiếp theo, xóa mọi chế độ xem văn bản khỏi bố cục wordLayout.

wordLayout.removeAllViews();

Sử dụng một vòng lặp for đơn giản để lặp lại qua từng chữ cái của câu trả lời, tạo chế độ xem văn bản cho mỗi chữ cái và đặt văn bản của chế độ xem văn bản thành chữ cái hiện tại.

for (int c = 0; c < currWord.length(); c++) {
  charViews[c] = new TextView(this);
  charViews[c].setText(""+currWord.charAt(c));
}

Chuỗi được lưu trữ dưới dạng một mảng các ký tự. Phương thức charAt cho phép chúng ta truy cập các ký tự theo một chỉ mục cụ thể. Vẫn bên trong vòng lặp for, đặt thuộc tính hiển thị trên chế độ xem văn bản và thêm nó vào bố cục.

for (int c = 0; c < currWord.length(); c++) {
  charViews[c] = new TextView(this);
  charViews[c].setText(""+currWord.charAt(c));

  charViews[c].setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
  charViews[c].setGravity(Gravity.CENTER);
  charViews[c].setTextColor(Color.WHITE);
  charViews[c].setBackgroundResource(R.drawable.letter_bg);
  //add to layout
  wordLayout.addView(charViews[c]);
}

Chúng tôi đặt màu văn bản thành màu trắng để người dùng sẽ không thể nhìn thấy nó trên nền trắng. Nếu họ đoán đúng chữ cái, thuộc tính màu văn bản sẽ chuyển sang màu đen để hiển thị nó cho người chơi. Quay lại phương thức onCreate, gọi phương thức trợ giúp mà chúng ta vừa tạo.

playGame();

Chúng tôi sẽ mở rộng cả phương thức onCreate và helper một lát sau.

4. Tạo các nút chữ

Bước 1

Bước tiếp theo là tạo một khu vực để người chơi chọn các chữ cái để đoán. Xem lại bố cục hoạt động của trò chơi và thêm chế độ xem lưới sau để giữ các nút chữ cái. Chèn chế độ xem lưới ngay sau khi bố trí tuyến tính, chúng tôi đã thêm cho từ trả lời.

<GridView
  android:id="@+id/letters"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:layout_marginBottom="5dp"
  android:background="#FF000000"
  android:horizontalSpacing="5dp"
  android:numColumns="7"
  android:padding="5dp"
  android:stretchMode="columnWidth"
  android:verticalSpacing="5dp" />

Chúng tôi sẽ sử dụng một bộ chuyển đổi để ánh xạ các chữ cái của bảng chữ cái thành các nút trong chế độ xem lưới. Chúng tôi bố trí bảy nút trên mỗi hàng như bạn có thể thấy từ thuộc tính numColumns.

Bước 2

Mỗi chữ cái sẽ là một nút được thêm vào bố cục bằng cách sử dụng một bộ chuyển đổi. Thêm một tệp mới trong thư mục bố cục dự án của bạn, đặt tên là letter.xml và điền vào đó với đoạn mã sau.

<Button xmlns:android="//schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="35dp"
  android:background="@drawable/letter_up"
  android:onClick="letterPressed" />

Chúng tôi sử dụng một trong những hình dạng có thể vẽ mà chúng tôi đã tạo lần trước làm nền và đặt phương thức onClick mà chúng tôi sẽ triển khai vào lần tới. Nếu bạn đang tăng cường ứng dụng để nhắm mục tiêu mật độ màn hình khác nhau, bạn có thể xem xét điều chỉnh thuộc tính chiều cao cho phù hợp.

Bước 3

Thêm một lớp mới vào gói src của dự án của bạn, đặt tên là LetterAdapter và chọn android.widget.BaseAdapter làm siêu lớp của nó.

Như bạn sẽ thấy, một lớp bộ điều hợp bao gồm một loạt các phương thức tiêu chuẩn mà chúng tôi sẽ thực hiện. Thêm các báo cáo nhập sau vào lớp mới.

import android.content.Context;
import android.view.LayoutInflater;
import android.widget.Button;

Trong khai báo lớp, thêm hai biến đối tượng như dưới đây.

private String[] letters;
private LayoutInflater letterInf;

Mảng letters sẽ lưu trữ các chữ cái của bảng chữ cái và biểu đồ bố trí sẽ áp dụng bố cục nút mà chúng ta đã xác định cho mỗi chế độ xem được xử lý bởi bộ điều hợp. Sau các biến đối tượng, thêm phương thức constructor cho bộ điều hợp.

public LetterAdapter(Context c) {
  //setup adapter
}

Bên trong hàm tạo, khởi tạo mảng bảng chữ cái và gán các chữ cái A-Z cho từng vị trí.

letters=new String[26];
for (int a = 0; a < letters.length; a++) {
  letters[a] = "" + (char)(a+'A');
}

Mỗi ký tự được biểu diễn dưới dạng một số để chúng ta có thể đặt các chữ cái A thành Z trong một vòng lặp bắt đầu từ 0 bằng cách thêm giá trị của ký tự A vào mỗi chỉ số mảng. Vẫn bên trong phương thức constructor, xác định bối cảnh mà chúng ta muốn làm tăng bố cục, sẽ được truyền từ hoạt động chính sau này.

letterInf = LayoutInflater.from(c);

Eclipse nên tạo ra một phác thảo phương thức getCount. Cập nhật thực hiện của nó như sau.

@Override
public int getCount() {
  return letters.length;
}

Điều này thể hiện số lượt xem, một lượt xem cho mỗi chữ cái. Chúng tôi không gọi các phương thức trong lớp bộ điều hợp một cách rõ ràng trong ứng dụng. Đó là hệ điều hành sử dụng chúng để xây dựng thành phần giao diện người dùng mà chúng tôi áp dụng bộ điều hợp, trong trường hợp này sẽ là chế độ xem lưới.

Cập nhật việc triển khai getView như trong đoạn mã dưới đây.

@Override
public View getView(int position, View convertView, ViewGroup parent) {
  //create a button for the letter at this position in the alphabet
  Button letterBtn;
  if (convertView == null) {
    //inflate the button layout
    letterBtn = (Button)letterInf.inflate(R.layout.letter, parent, false);
  } else {
    letterBtn = (Button) convertView;
  }
  //set the text to this letter
  letterBtn.setText(letters[position]);
  return letterBtn;
}

Hãy dành một chút thời gian để cho mọi thứ chìm vào. Về cơ bản, phương pháp này xây dựng mỗi chế độ xem được ánh xạ tới thành phần giao diện người dùng thông qua bộ điều hợp. Chúng tôi thổi phồng bố cục nút mà chúng tôi đã tạo và đặt chữ theo vị trí trong bảng chữ cái mà chế độ xem đại diện. Chúng tôi đã tuyên bố rằng sẽ có 26 khung nhìn được ánh xạ, với vị trí của mỗi khung nhìn phản ánh vị trí của nó trong mảng bảng chữ cái. Bạn có thể để các phương thức khác trong lớp bộ điều hợp như chúng là.

@Override
public Object getItem(int arg0) {
  return null;
}

@Override
public long getItemId(int arg0) {
  return 0;
}

Bước 4

Xem lại lớp hoạt động của trò chơi và thêm một biến đối tượng cho chế độ xem lưới và bộ điều hợp.

private GridView letters;
private LetterAdapter ltrAdapt;

Bạn cũng cần thêm một báo cáo nhập khẩu.

import android.widget.GridView;

Trong phương thức onCreate, trước dòng mà bạn gọi là phương thức trình trợ giúp playGame, hãy tham chiếu đến chế độ xem lưới.

letters = (GridView)findViewById(R.id.letters);

Nối phần triển khai hiện tại của playGame với đoạn mã sau. Trong đoạn trích này, chúng tôi khởi tạo bộ điều hợp và đặt nó trên chế độ xem lưới.

ltrAdapt=new LetterAdapter(this);
letters.setAdapter(ltrAdapt);

Chạy ứng dụng trong trình giả lập và bạn sẽ thấy giao diện người dùng. Tuy nhiên, bạn sẽ không thể tương tác với các nút. Đó là những gì chúng tôi sẽ tập trung vào phần thứ ba và cuối cùng của loạt bài này.

Tổng kết

Nếu bạn chạy ứng dụng của mình vào thời điểm này, nó sẽ hiển thị cho bạn giao diện của trò chơi, nhưng nó sẽ không đáp ứng với tương tác của người dùng. Chúng tôi sẽ thực hiện các chức năng còn lại trong phần cuối cùng của loạt bài này.

Khi người chơi nhấp vào nút chữ cái, ứng dụng cần xác minh xem chữ cái đã chọn có được bao gồm trong từ mục tiêu hay không và cập nhật câu trả lời và giá trị phù hợp. Chúng tôi cũng sẽ trình bày một hộp thoại cho người chơi nếu họ thắng hoặc thua và chúng tôi cũng sẽ thêm nút trợ giúp. Cuối cùng, chúng tôi sẽ thêm điều hướng cơ bản thông qua một thanh hành động.