PinCurve

無題

長い間、更新を休んでました。ごめんなさい。
まぁ、とりあえず忙しいです。

更新サボりのお詫びといっちゃなんですが、作りかけのゲームを公開しようと思います。
非常に単純なパズルゲームです。マウス入力です。
これ
まだ、ツメがあれなので、不快に思われる方がおられるかもしれません。
完成度の低いゲームが大嫌い！と言う方はご遠慮ください。

万が一、アドバイスをして頂ける方がおられましたら、メールでよろしくお願いします。
すぐに対応するのは難しいかもしれませんが・・・

ＨＴＭＬ謎

　今までのＨＳＰコンテンツをＨＴＭＬに纏めようとおもって早速取り掛かるのはいいのですが、なかなか難しい・・・

　メニューつくるのって、どうなんだろう？
　ホームページっていったら、やっぱり色々網状にリンクはるじゃないですか。そのときに、どのページにも同じメニューを出すにはインラインフレーム（？）とかいうのを使うんですかね？ちょっとやってるんですけど、ブラウザによって表示されるとか表示されないとか。実際良く分からない。

　全く。ブラウザによっていろいろ表示のされ方が違うとかやめてほしいです。

HSP講座10-配列変数

　
　今回は、変数は変数でもただの変数ではない配列変数を紹介したいと思います。とはいっても、全然難しいことではないので安心してください。

　例えば、シューティングゲームを作るとしましょう。当然、敵が動いて襲ってくるはずです。「敵が動く」ということは、1コマ1コマ敵の座標が変わっているということです。アニメーションの時にやったように、敵の座標を変数で管理して、1コマ1コマ値をちょっとずつ変えながら描画すれば出来そうです。ここで具体的に敵の座標を
　tekix, tekiy
という2つの変数で管理するとします。

　そのシューティングゲームには1匹の敵しか出てこないなら上でいいでしょう。しかし恐らく、一般的なシューティングゲームには、敵は少なくても3匹は出てくるはずです。と言うことで変数を増やして
　tekix1, tekiy1, tekix2, tekiy2, tekix3, tekiy3
としましょう。（一番最初の文字でなければ変数の名前に数字が使えます。）

　このシューティングゲームを作っている間に更に2匹欲しくなってきました。やっぱり敵は多いに越したことはないですよね。と言うことで変数をもっと増やして
　tekix1, tekiy1, tekix2, tekiy2, tekix3, tekiy3, tekix4, tekiy4, tekix5, tekiy5
としました。

　ここの辺りで気付いた人は入ると思いますが、上の方法では非常に面倒です。敵の数を増やすたびに変数の数も増えていくと言うのは不合理です。しかも、この場合では、敵によって変数名が違うため、例えその敵が同じ種類で同じ動きをするとしても、それぞれに対してプログラムを個別に書かなくてはなりません。

　変数の1番最後の数字が変わっているだけなのに・・・

　ここで非常に便利なのが配列変数です。これを使うと
　tekix, tekiy
という、たった2つの変数名で、いくつもの敵の座標を管理することが出来ます。

　配列変数とは、普通の変数の集まりです。その変数の集まり全体に変数名があり、それぞれには識別するために番号が付けられています。その、それぞれを識別するための番号を「添え字」と言います。

　呼び方のシステムとしては、駅のコインロッカーによく似ています。例えばある駅に、「改札口前ロッカー」と「売店横ロッカー」があるとします。それぞれ、いくつかのロッカーの集まりです。通常、ロッカーには通し番号が付けられていますよね？それで、「改札前ロッカーの3番」とか、「売店横ロッカーの5番」とか言う風に呼べるわけです。

　配列変数も非常にこれと似ています。「改札前ロッカーの3番」という呼び方の、「改札前ロッカー」の部分が配列変数の変数名にあたり、「3番」の部分が配列変数の添え字にあたります。また、1つ1つのロッカー（1つ1つの変数）を要素といいます。つまり、改札前のロッカーが全部で50個あった時、要素数は50個である、と言う風に言います。

　プログラム上でどのように使うかと言うと
　　変数名（添え字）
のように使います。ちょっとだけ具体的に使ってみましょう

// 配列変数を作成
dim tekix, 3
dim tekiy, 3

// 配列変数にそれぞれ値を代入
tekix(0) = 100
tekiy(0) = 100
tekix(1) = 200
tekiy(1) = 200
tekix(2) = 300
tekiy(2) = 300

// それぞれの位置に円を描画
repeat 3
circle tekix(cnt) - 5, tekiy(cnt) - 5, tekix(cnt) + 5, tekiy(cnt) + 5
loop

　実行すると小さい円が斜めに3つ表示されます。

　プログラムを最初から見ていきましょう。まず
dim tekix, 3
dim tekiy, 3
があります。dim命令が使われていますが、これはそれぞれ、「tekixという要素数が3の配列変数を作れ」「tekiyという要素数が3の配列変数を作れ」といっています。実はこのdim命令をつかって
　dim 変数名
と言う風に要素数を指定しなければ、普通の変数を作ることが出来ますが、今までは省略してきました。この命令を使わなくても、最初に変数に代入した時にHSPが勝手に作ってくれるからです。配列変数でもこの命令を使わなくとも、最初に代入した時に配列変数を作ってくれます。つまり、この2行は無くてもとりあえず問題ありません。こういう命令があることを示すために書いておきました。

　つぎに、
tekix(0) = 100
tekiy(0) = 100
tekix(1) = 200
tekiy(1) = 200
tekix(2) = 300
tekiy(2) = 300
とあります。これは、tekix、tekiyという配列変数の各要素に値を代入しています。普通の変数と違うのは、何番目の要素かを示す添え字があるところです。ここで注意して欲しいのは、要素の番号は0から始まる、と言うことです。よってこの場合、要素数が3であるため、添え字に指定できるのは、0、1、2の3つです。

　そして、注目して欲しいのはこの部分です。
repeat 3
circle tekix(cnt) - 5, tekiy(cnt) - 5, tekix(cnt) + 5, tekiy(cnt) + 5
loop
repeat命令とloop命令で、circle命令を3回繰り返しています。このcircle命令ではtekix、tekiyの配列変数の要素の値を利用して円を描画するわ訳ですが、添え字の部分に「cnt」とかかれています。これはシステム変数の1種で、repeat-loop命令で何回目の繰り返しか、と言う値が入っています。つまり、一番最初の繰り返しでは0、次の繰り返しでは1、その次の繰り返しでは2、・・・と言う風に順次変化していきます。よって、3つの円がそれぞれの位置に描画されます。
　ここで味噌なのが、添え字には普通の命令のパラメータと同じように、変数や、計算式を入れることが出来る、と言うことです。これが、普通の変数の名前の最後に数字を付ける時との大きな差で、配列変数を利用する時の最大の利点です。上のプログラムの描画部分のような書き方は、ゲームを作る際にたくさん出てくると思うので是非身につけて下さい。

　今回の例はあまり面白くないかもしれませんが、これから配列変数は割と出てくると思います。いろいろ、配列変数で遊んでください。

HSP講座9-システム変数とマウス入力

　今回はマウスを簡単に使ってみたいと思います。

　マウスのボタンの入力は、前回触れたgetkey命令で取得できます。キーコードは、「HSP講座8」の表のとおり、左ボタンが1、右ボタンが2です。

　キーボードと違うのは、マウスの座標の取得ですが、それは、システム変数の値を利用することで、簡単に取得できます。

　システム変数とは、変数の一種です。今まで使ってきた、自分たちで初期化して使う変数とは違い、HSPのシステムであらかじめ用意されている変数のことです。システムが用意する変数であるため、変数の名前はあらかじめ決まっています。

　例えば、「mousex」というシステム変数には、マウスカーソルのx座標が入っています。また、同じように「mousey」というシステム変数に、マウスカーソルのy座標が入っています。

　実際に使ってみましょう。
　次のプログラムは、マウスの左ボタンを押している間、カラフルで大小さまざまな円がマウスカーソルの位置に描画され、右ボタンを押すと、画面内が白でクリア（塗りつぶし）されると言うものです。

// 乱数初期化
randomize

repeat

// マウス左ボタン検出
getkey lclick, 1
// マウス右ボタン検出
getkey rclick, 2

// 条件：左が押されていれば
if (lclick == 1) {
   // 色：ランダム
   color rnd(256), rnd(256), rnd(256)
   // 半径：1から100の間でランダム
   r = rnd(100) + 1
   // (mousex, mousey)中心の円描画
   circle mousex - r, mousey - r, mousex + r, mousey + r
}

// 条件：右が押されていれば
if (rclick == 1) {
   // 色：白
   color 255, 255, 255
   // 画面内塗りつぶし
   boxf
}

wait 5
loop

　if文の色をちょっと変えてみました。見やすいでしょうか？

　実行すると、マウスを押している間、ずっと円が描画されると思います。円と次の円が描画されるまでの時間が、「wait 5」です。（実際は、他の処理も多少時間をとっていますが）

　プログラムの説明ですが、getkey命令付近は、大体分かると思います。前回説明したとおりです。

　今回は色と半径をランダムにしています。「r = rnd(100) + 1」の「+1」は「r」が0になるのを防ぐ役割があります。「+1」がなければ、rの範囲は0～99ですが、「+1」することで1~100となっています。　

　問題のマウス座標ですが、円描画の行を見てください。
circle mousex - r, mousey - r, mousex + r, mousey + r
　となっています。このように、「mousex」「mousey」というシステム変数も、代入さえしなければ、普通の変数のように利用することが出来ます。この「mousex」「mousey」には、常に、その時のマウスの座標が入っているため、マウスを押しながら移動させたりしても円はマウスの位置にちゃんと描画されます。

　とても簡単だとは思いませんか？ここまでやってくれば、簡単なペイントソフトみたいなものは出来そうな気がしますね。

このサイトについて

　ここはプログラミングについての記事が主である雑記HPです。

　次のカゴテリーの中に興味があるものがあればご覧下さい。

●HSP入門（今のところメインコンテンツ）
　HSPによるゲームプログラミングの講座です。今までにプログラミングの経験がない方を対象に書いています。僕自身未熟で勉強中の身なので色々間違いや勘違いなどあるかもしれません。それでも何かゲームが作りたい！と思う方、是非見てみてください。

●ゲームプログラミング
　ゲームを作ることに関していろいろ書くところです。まだあまり書いていません。

●電子工作
　電子工作についてぐだぐだ書いてあります。あまりにも中途半端なので見ないほうがいいかもしれません。

●どうでもいいこと
　”日記”的な要素が強い記事です。気が向いた時に見てください。

　上のどれについても、記事内に誤りや勘違いが含まれている可能性が十分あります。このHPのことで何か問題が起きてもぴんかびは責任を負えませんのでご了承ください。

　このページはリンクフリーです。相互リンクも大歓迎です。もし相互リンクしていただける方は、恐れ入りますがメールを下さい。アドレスは
　_m_s_k_あっとまーくmail.goo.ne.jp
です。（メールする際、上の”あっとまーく”の部分を”@”に直してください。）

　他にも、感想や要望がありましたら、メール下さい。
　　

HSP講座8-キー入力と条件判断

　今日は、玉をキーボードで動かしてみようと思います。

　キー情報は、getkey命令で取得します。getkey命令は、ある指定したキーが、押されている状態か押されていない状態かを取得する命令で、
getkey 変数, キーコード
と言う風に使います。
　キーコードとは、キーボードのキー一つ一つに割り振られた番号のことで、次のようになっています。

キーコード : 実際のキー
------------------------------------------
        1    : マウスの左ボタン
        2    : マウスの右ボタン
        3    : キャンセル（[CTRL]+[BREAK]）
        4    : ３ボタンマウスのまん中のボタン
        8    : [BACKSPACE]（PC98の[BS]）
        9    : [TAB]
       13    : [ENTER]
       16    : [SHIFT]
       17    : [CTRL]
       18    : [ALT]（PC98の[GRPH]）
       20    : [CAPSLOCK]
       27    : [ESC]
       32    : スペースキー
       33    : [PAGEUP]（PC98の[ROLLDOWN]）
       34    : [PAGEDOWN]（PC98の[ROLLUP]）
       35    : [END]（PC98の[HELP]）
       36    : [HOME]（PC98の[HOMECLR]）
       37    : カーソルキー[←]
       38    : カーソルキー[↑]
       39    : カーソルキー[→]
       40    : カーソルキー[↓]
   48～57    : [0]～[9]（メインキーボード）
   65～90    : [A]～[Z]
96～105    : [0]～[9]（テンキー）
112～121    : ファンクションキー [F1]～[F10]

（「HSP　HELP　Browser　Ⅱ」　から引用）

　この数値をgetkey命令に指定すると、押されている状態であれば変数に1が、押されていない状態であれば変数に0が代入されます。

　実際に使えば分かると思います。ちょっと長いですが次のプログラムを実行してみてください。

// 初期位置
x = 100
y = 100

// 移動スピード
sp = 10

// 半径
r = 10

repeat

// キー情報取得
getkey hidari, 37
getkey ue, 38
getkey migi, 39
getkey sita, 40

// 移動
if (hidari == 1) {
   x -= sp
}
if (ue == 1) {
   y -= sp
}
if (migi == 1) {
   x += sp
}
if (sita == 1) {
   y += sp
}

// 描画始め ++++++++++++++++++
redraw 0

// 背景
color 0, 0, 0
boxf

// 玉
color 255, 255, 255
circle x - r, y - r, x + r, y + r

redraw 1
// 描画終わり ++++++++++++++++

wait 3

loop

　カーソルキー（十字キー）を押すと、その方向に玉が動くと思います。

　最初に
x -= sp
　という書き方に触れておきますが、これは今まで使ってきた、
x = x - sp　
　と同じことです。つまり、xの値をspの値だけ減らす、と言う意味です。スマートに見えるので書き換えました。
　今まではspの部分は定数を用いてきましたが、変数にすることで、「アイテム取得でスピードアップ！」と言うような処理が出来ます。今回はしていませんが、今後ゲームを作る際に、こういう書き方が必要になると思うので、こうしておきました。他に、spの代入する値を変更するだけで、spの部分の値を一括変更できるというメリットもあります。

　キーの情報の取得はこの部分です。
getkey hidari, 37
getkey ue, 38
getkey migi, 39
getkey sita, 40
　37,38,39,40と言うキーコードは、上の表で見ると、カーソルキーの左、上、右、下であることが分かると思います。
　つまり、カーソルキーが押されているか押されていないかの情報が、それぞれ、hidari、ue、migi、sitaと言う変数に代入されることになります。

　そして、その変数の値を利用しているところがここです。
if (hidari == 1) {
   x -= sp
}
if (ue == 1) {
   y -= sp
}
if (migi == 1) {
   x += sp
}
if (sita == 1) {
   y += sp
}
　ここで、if (なんたら) {　かんたら }　という文が出てきました。この文をif文と言います。ifと言うのは英語で「もしも～ならば」という意味を持ちますが、プログラム上のif文もそうです。もし（）内の条件が満たされていれば、｛｝内の処理をします。逆に（）内の条件が満たされていなければ、｛｝内の処理を行いません。
　ここで==は左辺と右辺が等しい場合、という条件を示します。つまり、それぞれ、hidari、ue、migi、sitaの値が1、つまりキーが押されている状態であれば｛｝内の処理を行うというものです。｛｝内の処理はそれぞれ、x座標、あるいはy座標を変化させる処理となっているので、カーソルキーを押すと、円が移動する、ということになります。
　xを増やすか減らすかという符合の問題は、x座標の正方向が右、y座標の正方向が下、と言うことを考えれば分かると思います。

　

　なんだかゲームっぽくなってきたと思いませんか？次はマウスでも触ってみるかもしれません。

　あと、HSP　HELP　Browser　Ⅱは、スクリプトエディタのメニューのヘルプ＞HSP命令リファレンスを開く、から起動することが出来ますので、命令の詳細が知りたい時や、どんな命令や関数があるか知りたい時は開いてみてください。

HSP講座7-乱数

これまでは、プログラムを実行する度、毎回同じ処理をしていました。
そんなプログラムにはそろそろ飽きてきたかもしれません。

ということで、とりあえず乱数を使ってみようと思います。

乱数とはランダムな数のことです。サイコロ振った目の数みたいなもんです。
ただ、パソコン内でサイコロを振っているわけではないので、
プログラムで使えるのは
計算から求められた擬似的な乱数です。

その前に、関数の説明をしておこうと思います。
（乱数と同じ”数”がついていますが全く関係ありません。）

特に難しい話ではないのですが、中学や高校の数学で、
y = f(x) とか y = g(x) とか、あるいはf(x)の中身を具体的に書いて、
y = 2x とかいう関数を見たことがあるかと思います。
プログラム上の関数もこんな感じです。
xの値を与えることで、f(x)の値が決まる、というものです。
このxのことを命令と同様にパラメータと言いますが、
このパラメータの数は1つとは限りません。
x, y, zの値を参考に、g(x, y, z)の値が決まる、というのもあるでしょう。

実際に使ってみましょう。

// 半径
r = 5

// 乱数の初期化
randomize

repeat

// ランダムに位置を決める
x = rnd(640)
y = rnd(480)

// 円の描画
circle x - r, y - r, x + r, y + r

wait 1

loop

実行したら、黒い点が次々に表示されます。

もう、大体のプログラムの流れは分かると思うので割愛します。

乱数を使う時は、使う前にrandomize命令を置いて下さい。乱数が初期化されます。
これをしないと、乱数が毎回同じ、つまり乱数でなくなってしまいます。

それをしたあとに、
x = rnd(640)
y = rnd(480)
のところで、乱数を作っています。
rnd関数が乱数を発生させる関数で、数値のパラメータを1つとります。
上のプログラムの場合、xに0から639までの数（640通り）の中のどれか、
yに0から479までの数（480通り）のどれかがランダムで代入されます。

前にも言った通り、ウィンドウのサイズはデフォルト（標準初期値）で640×480なので、
rnd関数によって決められた円の中心座標は、画面内のどこかの点です。

乱数の使い方は大体分かったでしょうか？
ゲームでも、
降り注ぐ岩の位置とか、
的の出てくる微妙なタイミングとか
煙球のランダムな色など
色々使えるとおもうので、覚えておきましょう。

次回はキーボードの情報を利用する予定です。
ここから、面白くなってくる可能性があります。

HSP講座6-アニメーション-2

前のプログラムでチカチカしていた理由。

それは、背景を塗りつぶした瞬間が見えてしまっていた、ということです。
背景を塗りつぶした瞬間と、その後に円を描画した絵が交互に映ったため、チカチカ見えたのです。

次のようにプログラムを変えましょう。

// 変数初期化
x = 100
y = 100
r = 10

repeat

// 描画モード→0
redraw 0

// 背景塗りつぶし
color 0, 0, 0 // 黒
boxf

// 円の描画
color 255, 255, 255 // 白
circle x - r, y - r, x + r, y + r

// 描画モード→1
redraw 1

// x座標を5増やす
x = x + 5

// 50ms待つ
wait 5

loop

redraw命令が新しく加わりました。redraw命令は描画モードを変更する命令です。
描画モード0は、描画命令が実行されても、実際の画面には反映されず、仮想画面上の描画にとどまる、と言う状態です。
一方描画モード1は、描画命令が実行されたその時に、実際の画面に反映されるというモードです。
また、描画モード1にした瞬間、それまで仮想画面にあったイメージが実際の画面に反映されます。

と言うことは、いろいろ描画する前に描画モードを0にしておいて、全ての描画が終わったところでモードを1にすれば、描画の過程は画面に反映されず、結果のみが見えるということになります。これで、ちらつきが解決されます。
これから、いろいろプログラムを書いていく上で、呪文のように毎回書くことになります。大切なことなので、是非覚えておきましょう。

HSP講座5-アニメーション-1

今日は、アニメーションをしたいと思います。
これを、プレーヤーが動かせるようになればゲーム？ですからゲームプログラマーまでもう少しです。

今までは、動かない図形や文字を描いてきました。
今日は動く図形を描くわけですが、ちょっとした工夫で簡単に出来ます。

パラパラマンガを作ったことはあるでしょうか？原理はあれと全く同じです。
１コマ１コマ少しずつ変化するコマを連続的に速く切り替えることにより、人間の目にはそれが動いているように見える、というものです。

まず、このプログラムを見てください。

x = 100
y = 100
r = 10
circle x - r, y - r, x + r, y + r

今まで言ってきませんでしたが、パラメータを指定する時に、数式で書くことも可能です。
つまり、この「circle」のパラメータは数値に直すと「90,90,110,110」ですね。
と言うことは上のプログラムで、(x, y)つまり(100, 100)を中心に、半径r=10の円が描かれることは理解できるでしょうか？パッとみて分からない人も、今までのところを振り返りながらちょっと考えれば分かるはずです。

あと補足ですが、今回のプログラムにはあちこちにスペースが入っています。これは見易さのためで、命令とパラメータの間のスペース（今回の場合、「circle」の直後のみ）以外は必要ではありません。好みで入れても入れなくてもいいです。

で、上のプログラムで（x,y）中心の円が描けると言うことは、このxとyという変数をちょっとずつ変化させながら、描画すれば、アニメーションになると言うことです。ということで、次のプログラムにしてみましょう。

// 変数初期化
x = 100
y = 100
r = 10

repeat

// 背景塗りつぶし
color 0, 0, 0 // 黒
boxf

// 円の描画
color 255, 255, 255 // 白
circle x - r, y - r, x + r, y + r

// x座標を5増やす
x = x + 5

// 50ms待つ
wait 5

loop

ちょっとプログラムが長くなってきたので、コメントを入れてみました。（←用語）
コメントとは、プログラムの節々に入れるメモみたいなものです。
//や;の後なら、好きなことが書けるので、自分で分かりやすいようなコメントを是非入れておきましょう。
この癖はつけておいたほうがいいです。

コメントを見れば、どの行がどんな役割があるか分かると思います。

ちょっと付け足すと、

・repeat命令にパラメータで繰り返し数を指定していないのは、無限に繰り返すことを意味します。
こんなループのことを無限ループと言ったりします。

・boxf命令にパラメータが1つもないのは、画面全体の塗りつぶしを意味します。

プログラム全体の流れとしては、
まず、無限ループに入る前に、変数を初期化しておきます。
そして、ループに入り、次のことを繰り返します。
①背景を塗りつぶす
　これがないと、前のターンで書いたものが残ったままなので必要です。試しに消してやってみるとよく分かります。
②円を描く
　その時の変数の値で(x,y)を中心に半径rの円を描きます。実質変化する変数はxのみですが・・・
③x座標を増やす
　ちょっと円の中心位置をずらします。これで、動いているように見えます。
④50ms待つ
　wait命令が、待ち時間を作る命令です。パラメータ×10ms待ちます。
　これがないと、フリーズに近い状況になってしまうので注意しましょう。絶対必要です。

とにかく、描く→待つ→描く→待つ→・・・と繰り返すのが基本です。
ゲームでも、おおよそこんな流れなので覚えておきましょう。

この例では、xを変化させましたが、yとかrとかを変化させても面白いかもしれません。

気付いた人はいるかもしれませんが、
上のプログラムを実行すると、チカチカします。
この対策は次回します。

HSP講座4-変数と繰り返し文-2

前回の続きで、3の倍数を表示するプログラムを考えていきます。

前回の最終的なプログラムは

x=3
mes x
x=x+3
mes x
x=x+3
mes x
x=x+3
mes x
x=x+3
mes x
x=x+3
mes x
x=x+3
mes x
x=x+3
mes x
x=x+3
mes x

でした。最初の2行以外は、同じ事の繰り返しです。
これを今回はrepeat命令とloop命令を使って簡単にします。
repeat命令とloop命令は繰り返し文を作るための命令です。
繰り返し文のことはループとも呼びます。ループの方が言いやすいので、今後は多用すると思います。

それで、使い方ですが、
repeatとloopは互いを対にして、1組で1つのループを作ります。下のようにして使います。

repeat 10
mes "なんたら"
mes "かんたら"
loop

このようにrepeatを先、loopを後に書く事によって、その間のプログラムを繰り返します。
繰り返し回数は、repeatの後にパラメータとして与えます。
今は、必ず繰り返し回数を書いてください。
繰り返し回数を書かないと、無限に繰り返すことになり、ウィンドウが固まります。
万一そうなってしまった場合は、Ctrl+Alt+Deleteでタスクマネージャーを開いて、「応答なし」のタスクを終了してください。

で、実際に上のプログラムを実行すると、「なんたら」「かんたら」「なんたら」「かんたら」・・・・と言う風に、「なんたら」「かんたら」が10回繰り返し表示されると思います。

これを利用して、3の倍数のプログラムを書き直すと、下のようになります。

x=3
mes x
repeat 8
x=x+3
mes x
loop

だいぶ簡単になりました。

簡単に動作を説明すると、1行目「x=3」でまずxの値を3に初期化します。前回は言ってませんでしたが、一番最初の代入は、その後の代入と違って、今から変数としてxを使いますよ、という宣言も含んでいます。
2行目「mes x」で、ここでのxの値、つまり3を表示します。
この次3行目で、ループに入ります。
4行目でxの値を3増やし、5行目で表示します。
そして6行目でloop命令にたどり着くと、また3行目のrepeat命令まで戻って、4行目、5行目を繰り返します。

分かったでしょうか？
今まで、１行目→２行目→３行目→４行目→５行目→・・・・・→最終行、
と言う風に上から下まで順番に実行していました。
が、今回のプログラムでは２行目を実行した後、
４行目→５行目→４行目→５行目→・・・・・・→５行目、
と言う風な繰り返しがあります。と言うことです。

もう少しプログラムを代えて、こうできるのは分かるでしょうか？

x = 0
repeat 9
x = x + 3
mes x
loop

ちょっと考えれば、これも３の倍数を表示してくれるプログラムであることが分かると思います。
このプログラムでは、xを0から始め、後は「3増やして表示」をいうのを繰り返しています。
確かに、3、6、9、・・・と繰り返しますね。

このプログラムであれば、3の倍数がいっぱい欲しければ、2行目の「9」をもっと大きな数にすればいいだけですし、4の倍数が欲しければ、3行目の「3」を「4」に書き換えるだけです。

2回にわたって、3の倍数を表示するなんて何も面白くない話でしたが、
その間に出てきた変数や、ループは非常に重要です。これからボコボコ出てきます。
ちょっと辛抱してここの辺りを理解すれば、後にゲーム作りが更に楽しくなると思います。

最後に、前回書き忘れていたことを書きます。

まず、
前回何気なく出てきた「x=x+3」の「+」。他の記号も書いておきましょう。

「-」・・・引き算。（例）3引く2⇒3-2
「*」・・・掛け算。（例）5掛け2⇒5*2
「/」・・・割り算。（例）8割る2⇒8/2
「%」・・・割り算のあまり。（例）5割る3の余り（2）⇒5%2

これらの記号のことを演算子と言います。

で、次に、変数の名前の付け方ですが、
これまでは「x」しか使ってきませんでした。
しかし、「y」や「a」とかいう記号も使えるのは当たり前で、
「okane」とか「teki」とかゆう風にアルファベットをいくつか並べたものでもOKです。
ただし、命令や他のワードとかぶらないように注意しましょう。

次は、何かが動くかも。