HOME   >   WEB開発基礎(Servlet/JSP) >   JSPでスロットゲーム体験

JSPでスロットゲーム体験　


【使用方法】
・ここをクリックすると、以下の全Stepを開いたり閉じたりします。
  [Click here to Open/Close for all steps]
・以下のStepタイトルをクリックすると、そのStepを開いたり閉じたりします。

概要

今回はJSPだけで動くスロットゲームプログラムを作成してみましょう。
簡単なプログラムですが、画象を組み合わせることである程度見た目もそれらしく作ることができます。
それでは早速JSPで動くスロットゲームプログラムを作ってみましょう。

ページの先頭へ

Eclipse準備

1-1.　Eclipseの起動

Eclipseを起動します。※起動済みの場合は、スキップして下さい。
デスクトップにあるEclipse（Java）のアイコンをダブルクリックします。


1-2.　ワークスペースの指定

ワークスペースパスを指定します。
次のような画面が表示されます。（PC環境により異なることがあります）
ワークスペースに異なるフォルダーが選択されている場合は、「../../workspace」と入力し、[OK]をクリックします。


ワークスペースを選択すると、次のような画面が表示されます。
赤枠のところに「slotProj」フォルダがないことを確認して下さい。

※「slotProj」フォルダ以外のフォルダがあっても、無視してかまいません。

※作成済みの「slotProj」フォルダがあった場合
①右クリックで削除を選択します。


②「ディスク上からプロジェクト・コンテンツを削除(D)」をクリックして、[はい]をクリックします。
※コンテンツを削除しないと、以前のデータが残り、実行結果が上手く表示されないことがあります。


③次のようなウィンドウが表示されたら、[はい]をクリックします。
これで削除が完了します。
ページの先頭へ

Tomcatプロジェクトの作成

2-1.　Tomcatプロジェクトの作成

　　　　 「Tomcatプロジェクト」を作成します。
　　　　 Eclipseのメニューから「ファイル」 → 「新規」 → 「プロジェクト」を選択します。
　　　　 「Java」 → 「Tomcatプロジェクト」を選択し、「次へ」ボタンを押します。


2-2.　プロジェクト名の入力

　　　　 次の画面でプロジェクト名のところに任意の名前を入力します。
　　　　 ここでは「slotProj」という名前にします。
　　　　 今回はプロジェクトの設定に進まず「終了」ボタンを押します。


　　　　 Eclipseの左側のツリーの中に、作成したプロジェクトが表示されます。


ページの先頭へ

画像ファイルのダウンロードと解凍

3-1.ダウンロードリンクのクリック

　　　　 こちらをクリックします。



3-2.ダウンロード

　　　　 「slot_images.zip」ファイルをダウンロードします。



3-3.ダウンロードファイル保存

　　　　 ダウンロードファイルをデスクトップに保存します。



3-4.ダウンロードファイルの確認

　　　　 デスクトップ上にダウンロードファイルが保存されているのを確認します。



3-5.ダウンロードしたイメージファイルの解凍

　　　　 保存したZIPファイルを同じくデスクトップ上に解凍してください。



ページの先頭へ

画像ファイルのEclipseへのインポート

4-1.イメージファイルのEclipseプロジェクトへの格納（インポート）

　　　　 解凍された「slot_images」フォルダを、Eclipseの「slotProj」プロジェクトにドラッグ＆ドロップして、
　　　　 画像ファイルをEclipseにインポートしてください。



4-2.インポート結果の確認

　　　　 インポートしたフォルダがパッケージエクスプローラに表示されているのを確認します。



ページの先頭へ

JSPファイルの作成

5-1.新規ファイルの作成

　　　　 JSPファイルを「slotProj」プロジェクト直下に作成します。
　　　　 「slotProj」プロジェクトを選択後、マウスを右クリック → 「新規」 → 「ファイル」を選択します。


5-2.ファイル名の入力

　　　　 新規ファイル画面が開いたら、ファイル名に「slot.jsp」と入力します。
　　　　 「終了」ボタンを押します。

5-3.ファイル作成の確認

　　　　 作成したファイル「slot.jsp」がパッケージエクスプローラに表示され、開かれていることを確認します。


5-4.JSPファイルの編集

エディターの部分にコードを作成します。下のコードと同じになるように、エディタ内を編集してください。
※ここではコピー＆ペーストしてください（コピー＆ペースト方法は下記にあります。）
slot.jsp 
<%@page contentType="text/html;charset=Windows-31J" %>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Windows-31J">
    <title>sampleSlot.php</title>
  </head>
  <body bgcolor="#333333">
    <table align="center">
    <tr>
        <td><img src="./slot_images/title.png"></td>
      </tr>
    </table>
    <hr/>
    <%
    String buttonName = "スロットをまわす！";
    int numberArray[] = new int[3];

    for(int i=0;i<3;i++){
      numberArray[i] = (int)(Math.random() * 9) + 1;
    }
    %>

  <table align="center">
    <tr>
      <td><img src=./slot_images/<%=numberArray[0] %>.png></td>
      <td><img src=./slot_images/<%=numberArray[1] %>.png></td>
      <td><img src=./slot_images/<%=numberArray[2] %>.png></td>
    </tr>
    <tr>
      <td colspan="3">
        <form name="sample" action="slot.jsp" method="post">
        <input type="submit" name="submit_btn" value=<%= buttonName%>>
        </form>
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <%
          if(numberArray[0]==numberArray[1] && numberArray[0]==numberArray[2]){
        %>
            <img src=./slot_images/hit.png>
        <%
          }else{
        %>
            <img src=./slot_images/nohit.png>
        <%
          }
        %>
      </td>
    </tr>
  </table>
  </body>
</html>

注）ソースコードをコピー＆ペーストする方法

「view plain」をクリックします。


別ウィンドウが開きますので、「全選択(Ctrl+A)」⇒「コピー」します。


Eclipse上の「sample_slot.php」ファイルに「ペースト」します。

5-5.ソースファイルの保存

　　　　 編集が終わったら上書き保存してください。


ページの先頭へ

プログラムの動作確認

6-1.JSPファイルの実行

　　　　 ブラウザで「http://localhost:8080/slotProj/slot.jsp」にアクセスします。
　　　　 次の画面が表示されたらOKです。
　　　　　http://localhost:8080/slotProj/slot.jsp


　　　　　※表示されない場合は、Tomcatの起動を確認して下さい。

6-2.動作確認（はずれの場合）

　　　　 「スロットをまわす！！」ボタンを押して、数字が変わることを確認して下さい。

6-3.動作確認（当たりの場合）

　　　　 3つの数字が揃うと、下記の画面になります。

これでスロットゲームプログラムの作成は終了です。
ありがとうございました。

※完成しましたら、スタッフまでご連絡下さい。
ページの先頭へ
     
INDEX
WEB 開発基礎(Servlet/JSP)

　　JSP/サーブレット体験
　　JSPでスロットゲーム体験