Chúng tôi sẽ sử dụng:
Rails [phiên bản 4]: bạn sẽ thấy những gì hoàn toàn khác nếu bạn cài sai phiên bản. Foundation: cho looks & feels Font Awesome: cho icons
Tổng Quan:
Ứng dụng sẽ bao gồm 2 trang: 1. Welcome page - bắt đầu một game mới - tiếp tục game khi người dùng sẵn sàng bắt đầu 2. Game page - gallows container - một bộ chứa các chữ cái - một bộ chứa các ký tự la tinh - một button để quay trở lại home page và bắt đầu một game mới
Chúng tôi không dùng authentication/authorisation và không dùng active record để lưu trữ dữ liệu. Tất cả người dùng và trạng thái game sẽ lưu giữ trong session.
Code cho bài viết có sẵn trên Github
Hands on:
Hãy bắt đầu bằng việc tạo một ứng dụng rails và sử dụng -O để loại bỏ Active Record:
def guessed?
[word.split[''] - selected_letters].empty?
end
4
Bây giờ trong ứng dụng chúng tôi sẽ xóa đi những thứ không sử dụng:
Turbolinks: remove turbolinks từ Gemfile
mở file
def guessed?
[word.split[''] - selected_letters].empty?
end
5 và remove đi dòng //=require turbolinks
mở
def guessed?
[word.split[''] - selected_letters].empty?
end
6 và remove đi
def guessed?
[word.split[''] - selected_letters].empty?
end
7
CoffeeScript:
remove đi gem coffee-rails từ Gemfile
sau khi đã thay đổi, mở terminal và chạy bundle từ thư mục root của ứng dụng để đảm bảo chúng ta không làm hỏng bất cứ thứ gì
def guessed?
[word.split[''] - selected_letters].empty?
end
8
bây giờ sẽ bật server để kiểm tra tiến trình mà chúng ta đã thiết lập từ trước. Từ thư mục root của ứng dụng thực thi
def guessed?
[word.split[''] - selected_letters].empty?
end
9
Controllers:
tạo ra 2 controller là HomeController và GamesController
rails generate controller home index rails generate controller games new show update destroy
Routes: mở file
def finished?
failed_attempts >= MAX_FAILED_ATTEMPTS || guessed?
end
0 và remove tất cả nội dung ở bên trong, sau đó thêm vào các dòng sau:
root to: 'home#index' resource :game, only: [:new, :show, :update, :destroy]`
Model: chúng ta cần tạo ra một lớp Game để giứ trạng thái game [tạo ra một file
def finished?
failed_attempts >= MAX_FAILED_ATTEMPTS || guessed?
end
1 nằm trong thư mục models].
trong lớp Game cần làm những việc sau: 1. Xác định số lần lớn nhất của người chơi bị trượt. 2. Giữ những từ đã đoán được 3. Giữ những chữ cái đã được lựa chọn bởi người chơi 4. khởi tạo game 5. Trả lời số chữ cái đoán trượt 6. Trả lời nếu người chơi đoán được từ hay không 7. Trả lời nếu game là kết thúc hay chưa 8. Lựa chọn chữ cái
Xác định số lần lớn nhất của người chơi bị trượt:
Người chơi không thể cứ tiếp tục lựa chọn chữ cái mãi bởi vì như thế sẽ không phải là một trò chơi mà một bài tập luyện click chuột. Chúng ta phải xác định một gioi hạn số lận đoán trượt. Do đó thêm dòng sau vào lớp Game
def finished?
failed_attempts >= MAX_FAILED_ATTEMPTS || guessed?
end
2
Giữ những từ đã được đoán: thêm một attribute accessor cho word
def finished?
failed_attempts >= MAX_FAILED_ATTEMPTS || guessed?
end
3
Giữ những chữ cái mà người chơi đã lựa chọn:
def finished?
failed_attempts >= MAX_FAILED_ATTEMPTS || guessed?
end
4
Khởi tạo một game:
def initialize
@word = 'Hangman'.upcase
@selected_letters = []
end
Giờ tạm thời chúng ta lựa chọn từ Hangman nhưng sau chúng ta sẽ tạo ra một cơ chế cho phép lựa chọn từ ngẫu nhiên từ một nguồn cụ thể.
Trả lời số chữ cái đoán trượt:
def failed_attempts
selected_letters.select { |letter|
!word.include?[letter]
}.size
end
Ở đây chúng ta lặp qua các chữ cái được lựa chọn và đếm xem có bao nhiêu trong số chúng đã được bao gồm trong từ của game.
Trả lời nếu người chơi đã đoán được từ
def guessed?
[word.split[''] - selected_letters].empty?
end
Ở đây chúng ta chuyển đổi word thành một mảng các ký tự của nó và sau đó chúng ta sẽ loại bỏ những chữ cái được lựa chọn từ mảng này. Nếu kết qủa là empty điều đó có nghĩa là người dùng đã lựa chọn tất cả các chữ cái của từ và người chơi đã đoán được từ.
Trả lời nếu trò trơi được kết thúc:
def finished?
failed_attempts >= MAX_FAILED_ATTEMPTS || guessed?
end
Ở đây chúng ta sẽ trả lời rằng một game đã kết thúc khi đã đạt đén giới hạn số lần đoán trượt hoặc người chơi đã đoán từ thành công.
Lựa chọn một chữ cái:
def select![letter]
raise GameOverError if finished?
selected_letters = MAX_FAILED_ATTEMPTS || guessed?
end
7
tiếp đến khi chạy câu lệnh trên terminal có hỏi chúng ta có muốn ghi đè message thì nhấn enter tiếp tục, lúc đó Foundation đã được cài đặt thành công và thiết lập cho ứng dụng.
Font Awesome:
chúng tôi sử dụng font-awesome bởi vì các icons tuyệt vời của nó và thực tế chúng có thay đổi được kích thước và màu sắc theo quy luật kích thước font và màu sắc của css.
đầu tiên chúng ta cần cài đặt gem font-awesome-rails:
`gem 'font-awesome-rails'
thêm dòng sau vào file
def finished?
failed_attempts >= MAX_FAILED_ATTEMPTS || guessed?
end
8:
*= require font-awesome`
Bây giờ chúng ta có thể bắt đầu xây dựng views
Welcome page:
Giao diện của trang như hình dưới:
Thêm code sau tới file
def finished?
failed_attempts >= MAX_FAILED_ATTEMPTS || guessed?
end
9
Welcome to Hangman!
New game
Continue game
Chúng tôi không sử dụng bất kỳ database nào mà chúng tôi sử dụng session để lưu trữ vì đây là một ví dụ cơ bản để thực hành còn trong các ứng dụng thực thì không nên dùng theo cách này.
Do đó mở file
def select![letter]
raise GameOverError if finished?
selected_letters
Welcome to Hangman!
'button expand' do %>
New game
'button expand' do %>
Continue game
Reload lại page của trình duyệt
Ở đây khi nhấn button "New game" chúng ta chỉ cần tạo ra một game hangman mới, thiết lập session của người chơi giống như là game hiện thời và sau đó chuyển đến page show game.
Bởi vậy, xóa đi file phát sinh tự động
def select![letter]
raise GameOverError if finished?
selected_letters