2010/6/30 アプリケーション「じゃんけん」

最新推荐文章于 2025-05-16 20:50:16 发布

原创最新推荐文章于 2025-05-16 20:50:16 发布 · 634 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#2010 #activerecord #action #stylesheet #image #class

Ruby on Rails 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何使用Ruby on Rails框架快速搭建一个剪刀石头布小游戏，从项目创建到布局设计、样式应用、核心逻辑实现直至最终结果展示，全程通过实际操作演示，帮助开发者轻松上手。

前几天用Ruby on Rails框架做了个剪刀石头布的小应用程序。

下面放出程序过程。

-------------------
1. Appを作成
-------------------
>rails janken
>cd janken
>ruby script/generate controller Top index
>ruby script/generate controller Game start result

-------------------
2. ルーティング設定
-------------------
http://localhost:3000/にアクセスすると、直接アプリのメイン画面で開くように、以下の設定を行う。
config/routes.rbファイルに以下の1行を追加する
map.root :controller => 'top', :action => 'index'
こうすると、public/index.htmlを削除してもOK。

ActiveRecordモジュールの無効化
このアプリではデータベースを使用しませんので、ActiveRecordモジュールを無効にするため、以下の設定を行う。
config/enviroment.rbの29行目をコメントアウトにする。
config.frameworks -= [ :active_record, :active_resource, :action_mailer ]

ps:弄到这里不禁有种恍然大悟的感觉。以前为不使用数据库的程序苦恼了好久，后来没办法以为必须要使用数据库结果就硬是装了个sqlit3。傻啊~~~~

-------------------
3. ビューの作成
-------------------
1) レイアウトを作成
app/view/layoutsの下にapplication.html.erbを新規して次のような内容で作成する。
-------------------
<html>
<head>
    <meta http-equiv="content-type"　content="text/html; charset=UTF-8" />
    <title><%= h @document_title %></title>
</head>
<body>
    <div class="header">じゃんけんゲーム</div>
    <div class="main">
      <%= yield %>
    </div>
    <div class="footer">
      Powered by Ruby on Rails
   </div>
</body>
</html>
-------------------
<%= yield %>というのはWebページ本体です。

2) スタイルシートの適用
public/stylesheets/main.cssファイルを次のような内容で作成する。
-------------------
div.header, div.footer {
color: #fff;
background-color: #666;
padding: 5px;
text-align: center;
}
div.header {
font-size: 200%;
}
div.footer {
font-size: 90%;
}
div.main {
margin: 10px;
padding: 40px;
border: solid 2px #666;
text-align: center;
font-size: 120%;
}
-------------------
このスタイルをアプリ全体に適用するには、レイアウトapplication.html.erbのtitle用素に以下のような記述を追加する。
<%= stylesheet_link_tag 'main' %>

3) topページ作成
app/views/top/index.html.erbを次のように修正する。
-------------------
<% @document_title = 'じゃんけんゲーム' %>
<p>
<%= link_to 'ゲーム開始',:controller => 'game', :action => 'start' %>
</p>
-------------------

4) startページを作成
app/views/game/start.html.erbを次のように修正する。
-------------------
<% @document_title = 'ゲーム開始'
   hand_names = %w(gu choki pa)
   alt_texts = %w(グーチョキパー)
%>
<p>あなたの手を選んでください。</p>
<div>
<% 0.upto(2) do |index| %>
<%= link_to(image_tag(hand_names[index] + '.png',
      :size => '200x200', :alt => alt_texts[index]),
      :action => 'result', :hand => index) %>
<% end %>
</div>
-------------------
%w(...)は文字列の配列
0.upto(2) do |indxe|...endは、0から2までの繰り返し。

5) じゃけんの画像ファイルを用意
public/imagesのフォルダにgu.png、choki.png、pa.png三つのファイルを設置する。

ここまでで、「http://localhost:3030」にアクセスして、画面を確認する。

-----------------------------
4. ユーザー入力処理と結果表示
-----------------------------
1) 入力処理：コントローラ作成
app/controllers/game_controller.rbのresultメソッドを次のように修正する。
-------------------
def result
@player_hand = params[:hand].to_i
@computer_hand = rand(3)
case @computer_hand - @player_hand
when 0
    @result = 'aiko'
when 1, -2
    @result = 'kachi'
else
    @result = 'make'
end
end
-------------------

2) 結果表示：result画面
app/views/game/result.html.erbを次ように修正する。
-------------------
<%
@document_title = 'ゲーム結果'
hand_names = %w(gu choki pa)
alt_texts = %w(グーチョキパー)
%>
<p>あなたの手は…</p>
<div>
<%= image_tag(hand_names[@player_hand] + '.png',
      :size => '200x200',
      :alt => alt_texts[@player_hand]) %>
</div>
<p>コンピュータの手は…</p>
<div>
<%= image_tag(hand_names[@computer_hand] + '.png',
      :size => '200x200',
      :alt => alt_texts[@computer_hand]) %>
</div>
<p>
<%=
case @result
when 'aiko'
    'あいこです。'
when 'kachi'
    'あなたの勝ちです。'
when 'make'
    'コンピュータの勝ちです。'
end
%>
</p>
<p>
<%= link_to 'トップページへ', root_path %>
<%= link_to 'もう一度', :action => 'start' %>
</p>
-------------------