2013.06.03更新

HSPプログラミング入門

- じゃんけんゲームの制作 -

実習1 / 実習2 / フローチャート / ロケットマン /  Q&A


1. はじめに

 HSP (Hot Soup Processor; ホット スープ プロセッサ)は、初心者にも扱いやすい命令セットを備え、Windows環境で手軽に利用できるプログラミング言語です。まずは、この「じゃんけんゲーム」を通して、プログラミングの仕方を学び、その楽しさを味わって下さい (~o~)/


2. じゃんけんゲームの概要

 じゃんけんゲームでは、以下の処理の流れを考えています。

 1)最初の画面で[スタート]ボタンを押すと女の子が踊りだし、左手を挙げてポーズを決める。
 2)[グー]、[チョキ]、[パー]のボタンを表示し、プレイヤー(ゲームをする人)が何の手を出すかを決める。
 3)乱数を発生させて女の子(コンピュータ)の手を決める。プレイヤーと女の子の手を比べ、「勝ち」、「負け」、「あいこ」を判定する。
 4)勝敗数を表示し、1)の状態に戻る。

  
図1 処理の流れ


3. HSPのプログラミング環境とサンプル画像

 プログラミングに必要な環境とサンプル画像を授業時に配布します。計算機実習室内では、ネットワークドライブ(Z:)に「HSP」という名のフォルダを作り、その中にこの環境を収めます。(以後、このフォルダを作業フォルダと呼びます。)

-HSPプログラミング環境とサンプル画像DL(学内のみ,期間制限)-

 ※Windows8の場合、「閉じる」ボタンを押した時に「Microsoft Visual C++ Runtime Library」のエラー・メッセージが出現しますが、そのまま閉じて下さい。くわしくはこちらで説明。

4. HSPスクリプトエディタの起動

 作業フォルダ内の「hsed3(.exe)」をクリックします。すると以下の表示がなされます。黒い部分がプログラムを記述するテキストエディタ部分で、左側には行数が表示されます。「EOF; End of File(エンド オブ ファイル)」は、ファイルの末尾であることを表します。

図2 HSPスクリプトエディタ




5. 実習1- 画像の表示

その1

 1-1) サンプル画像を1つ読み込んでダイアログに表示させるプログラムを作ります。ます。以下の命令をテキストエディタ部に打ち込んで下さい。 

picload "try.jpg"

 1-2) メニューより[ファイル]−[名前を付けて保存]を選び、test01と名前を付けて作業フォルダに保存します。

 1-3) メニューより[HSP]-[実行]もしくは、HSP実行ボタンを押します。以後、実行するときは、1-2)及び1-3)の手続きを行って下さい。

《 スクリプトエディタ使用上の注意 》
 全角スペースが命令文に含まれ、エラーとなる場合があります。全角スペースが含まれているかどうかを確認するには、[メニュー]より[ツール]-[オプション]を選択し、左手のツリーで「エディタ」−「表示」をクリック。非文字の可視化で「全角スペース」にチェックを入れてください。
 ダウンロードした環境にはデバックモジュールが含まれていません。メニューの[HSP]において、[Debugウィンドウ表示]のチェックを外しておいてください。

その2

 次のプログラムに書き換え、実行してみて下さい。

*kaishi                             // ラベル 開始位置を表す(ラベルには*を付ける)
        picload "kati.jpg"          // kati.jpgを表示
        wait 100                    // 1秒待つ waitは10msec単位で時間を指定
        picload "make.jpg"          // make.jpgを表示
        wait 100
        goto *kaishi                // ラベルkaishiへ移動

   右手の「//」以降は、コメント(注釈)部分。各行の処理を説明している。

その3

 次のプログラムに書き替え、実行してみて下さい。

*kaishi                             // ラベル (開始位置)
        i=0                         // iに0を代入
*loop1                              // ラベル (繰返し位置)  
        picload "start"+i+".jpg"    // start0からstart10.jpgを切り替えて表示
        wait 50                     // 0.5秒待つ waitは10msec単位で時間を指定
        i=i+1                       // iの値を1増やす
        if i<11 : goto *loop1       // iが11より小さいならば、loop1へ移動
        stop                        // ストップ
 サンプル画像のstart0からstart10までを順に切り替え、表示します。先のpicload命令では、該当するファイル名が1つでしたが、変数 i を使ってファイル名の0から10の部分を表し、複数のファイルを同じ命令文で扱っています。i の値を変えるには代入式 i=i+1を使います。i が11になった時、if 命令文で記した条件は成立せず(偽)、loop1への移動は行われません。stopは、処理を停止させる命令です。



6. 実習2 - ボタンを表示

その1

次のプログラムを入力して動作を確認して下さい。
        title "じゃんけんゲーム"  // タイトルを付ける
        screen 0,240,350,4        // ウィンドウサイズ240×350を指定
        picload "try.jpg",1       // 画像の表示 「,1」の追加でサイズ固定
        pos 0,300                 // ボタンの表示位置(0,300)を指定
        button "start", *loop0    // ボタンにstartという表示をつける。
                                  // ボタンを押した時、*loop0へ移動
        stop                      // ボタンが押されるまで停止
        
*loop0                            // -- ボタンが押されてからの処理 --
        i=0
        pos 0,0                   // 画像の処理位置を(0,0)に指定
*loop1
        picload "start"+i+".jpg",1
        i=i+1
        wait 50
        if i<26 : goto *loop1

        cls                       // 画面のクリア
        picload "start26.jpg",1   // 画像の表示
        stop
 ボタンを表示するには、button命令を使います。ボタン命令は、表示する名前と押した時に移動するラベル名を記述します。

その2

 「グー」、「チョキ」、「パー」のボタン3つ表示させ、グーの時にはkati.jpg、チョキの時にはmake.jpg、パーの時にはaiko.jpgを表示するプログラムを考えて下さい。

参考サイト:


<TOP> <NEXT>