UJMLサンプル039：パッドボタンでゲーム（反射神経テスト）(2006/02/15)
「UJMLサンプル018：コンポーネントの利用（パッドボタン）」で使い方を紹介したpadbuttons.ujmsを使って、反射神経を鍛えるゲームを作ったのでソースコード付で紹介する。
画面に表示された数字のキーに割り当てられる文字を"UJML"の順に押していくだけのゲームだ。
万が一割り当てられていない文字があったら「0:無理」でスキップできる。
終わりは無い。
このコードのポイントは、padbuttons.ujms内で実装されているボタンが押されたときのステート変数sKeyの扱いだ。使う側のコードでPadButtons.sKeyとすることで、ボタンが押されたときの処理を実装できる。
今回の例のようにヴィジュアルエレメント（この場合padbuttonsのボタン郡）をステートマシンとして作り、再利用可能なコンポーネントとして用意しておくととても便利だ。作りたいものによって「どう動いて欲しいか？」は異なる。「どう動いて欲しいか？」は使う側で実装することができる。極めて合理的だ。
★---コード
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN"
"http://www.uievolution.com/dtd/ujml-1.5.dtd" [
<!ENTITY SPACING "4">
<!ENTITY MSEC_DELAY "200">
<!ENTITY PAD_BUTTON_SETTINGS '
0, 0, _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;),_getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;),
&_COLOR_BLUE;, &_COLOR_SILVER;, &_COLOR_BLACK;, &_COLOR_BLUE;,
&_COLOR_WHITE;, &_COLOR_BLUE;, &_FONT_SIZE_SMALL;,
&_FONT_STYLE_PLAIN;, &_FONT_FACE_SYSTEM;
'>
]>
<!-- http://uiengineda.blogs.com -->
<ujml>
<application>
<state-machines>
<include file="components/padbuttons.ujms" state-machine="PadButtons" />
</state-machines>
<state-variables>
<state-var name="sMessage" type="boolean"/>
<state-var name="sTimeLabel" type="boolean"/>
</state-variables>
<variables>
<var name="mScrWidth" type="int"/>
<var name="mScrHeight" type="int"/>
<var name="mLabelHeight" type="int"/>
<var name="mMessageTemp" type="string"/>
<var name="mCt" type="int"/>
<var name="mTime" type="int"/>
<var name="mChar" type="string" size="4"/>
<var name="mButtonCaption" type="string" size="9"/>
</variables>
<functions>
<function name="randRange" type="int"><!-- これは指定範囲の数字をランダムに作る関数 -->
<parameters>
<var name="seed" type="int"/>
<var name="min" type="int"/>
<var name="max" type="int"/>
</parameters>
<return>
<eval>
(_srand(seed) % (max - min + 1)) + min
</eval>
</return>
</function>
<function name="setButtonCaption" type="void"><!-- ボタンに割り当てる文字を決める -->
<variables>
<var name="i" type="int"/>
</variables>
<script>
for(i=0; i &_LT; 9;i++){
mButtonCaption[i] = mChar[randRange(_msec() + i ,0,3)];
}
</script>
</function>
<function name="showButtons" type="void"><!-- ボタンの表示 -->
<script>
if(mTime &_GT; 0){<!-- 初めて以外は結果の時間を表示する -->
mTime = _msec() - mTime;
sTimeLabel = false;
sTimeLabel = true;
}
mCt = 0;
mMessageTemp = "";
PadButtons.show(&PAD_BUTTON_SETTINGS;,
mButtonCaption[0], mButtonCaption[1], mButtonCaption[2],
mButtonCaption[3], mButtonCaption[4], mButtonCaption[5],
mButtonCaption[6], mButtonCaption[7], mButtonCaption[8],
"", "無理", "");
mTime = _msec();
sMessage = false;
sMessage = true;
</script>
</function>
</functions>
<script>
mChar[0] = "U";
mChar[1] = "J";
mChar[2] = "M";
mChar[3] = "L";
setButtonCaption();
showButtons();
mMessageTemp = "";
mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);
mLabelHeight = (&SPACING; * 2) + _text_height(&_FONT_SIZE_MEDIUM;, &_FONT_STYLE_PLAIN;, &_FONT_FACE_SYSTEM;);
sMessage = true;
</script>
<display>
<fn>
<text>New</text>
<event name="onSelect">
<accelerators>
<key>F2</key>
</accelerators>
<script>
mTime = 0;
setButtonCaption();
showButtons();
</script>
</event>
</fn>
</display>
<states>
<!-- 画面の下部にメッセージを出すための帯 -->
<state var="sMessage">
<transition value="true">
<display>
<box>
<x>0</x>
<y><eval>mScrHeight - mLabelHeight</eval></y>
<width><eval>mScrWidth / 2</eval></width>
<height><eval>mLabelHeight</eval></height>
<fg>&_COLOR_BLACK;</fg>
<bg>&_COLOR_BLACK;</bg>
<label>
<text><eval>mMessageTemp</eval></text>
<x>&SPACING;</x>
<y>&SPACING;</y>
<fg>&_COLOR_WHITE;</fg>
<bg>&_COLOR_BLACK;</bg>
</label>
</box>
</display>
</transition>
</state>
<state var="sTimeLabel">
<transition value="true">
<display>
<box>
<x><eval>mScrWidth / 2</eval></x>
<y><eval>mScrHeight - mLabelHeight</eval></y>
<width><eval>mScrWidth / 2</eval></width>
<height><eval>mLabelHeight</eval></height>
<fg>&_COLOR_BLACK;</fg>
<bg>&_COLOR_BLACK;</bg>
<label>
<text><eval>_strcat(mTime," msec")</eval></text>
<x>&SPACING;</x>
<y>&SPACING;</y>
<fg>&_COLOR_WHITE;</fg>
<bg>&_COLOR_BLACK;</bg>
</label>
</box>
</display>
</transition>
</state>
<!-- PadButtonsのステート変数が変わった時の動作 -->
<!-- ボタンが押されたときの動作をここから記述 -->
<state var="PadButtons.sKey">
<transition value="1">
<script>
sMessage = false;
if(_streq(mChar[mCt],mButtonCaption[0])){
mMessageTemp = _strcat(mMessageTemp,mChar[mCt]);
if(mCt==3){
mCt = 0;
setButtonCaption();
showButtons();
}else{
mCt++;
}
}else{
}
sMessage = true;
</script>
</transition>
<transition value="2">
<script>
sMessage = false;
if(_streq(mChar[mCt],mButtonCaption[1])){
mMessageTemp = _strcat(mMessageTemp,mChar[mCt]);
if(mCt==3){
mCt = 0;
setButtonCaption();
showButtons();
}else{
mCt++;
}
}else{
}
sMessage = true;
</script>
</transition>
<transition value="3">
<script>
sMessage = false;
if(_streq(mChar[mCt],mButtonCaption[2])){
mMessageTemp = _strcat(mMessageTemp,mChar[mCt]);
if(mCt==3){
mCt = 0;
setButtonCaption();
showButtons();
}else{
mCt++;
}
}else{
}
sMessage = true;
</script>
</transition>
<transition value="4">
<script>
sMessage = false;
if(_streq(mChar[mCt],mButtonCaption[3])){
mMessageTemp = _strcat(mMessageTemp,mChar[mCt]);
if(mCt==3){
mCt = 0;
setButtonCaption();
showButtons();
}else{
mCt++;
}
}else{
}
sMessage = true;
</script>
</transition>
<transition value="5">
<script>
sMessage = false;
if(_streq(mChar[mCt],mButtonCaption[4])){
mMessageTemp = _strcat(mMessageTemp,mChar[mCt]);
if(mCt==3){
mCt = 0;
setButtonCaption();
showButtons();
}else{
mCt++;
}
}else{
}
sMessage = true;
</script>
</transition>
<transition value="6">
<script>
sMessage = false;
if(_streq(mChar[mCt],mButtonCaption[5])){
mMessageTemp = _strcat(mMessageTemp,mChar[mCt]);
if(mCt==3){
mCt = 0;
setButtonCaption();
showButtons();
}else{
mCt++;
}
}else{
}
sMessage = true;
</script>
</transition>
<transition value="7">
<script>
sMessage = false;
if(_streq(mChar[mCt],mButtonCaption[6])){
mMessageTemp = _strcat(mMessageTemp,mChar[mCt]);
if(mCt==3){
mCt = 0;
setButtonCaption();
showButtons();
}else{
mCt++;
}
}else{
}
sMessage = true;
</script>
</transition>
<transition value="8">
<script>
sMessage = false;
if(_streq(mChar[mCt],mButtonCaption[7])){
mMessageTemp = _strcat(mMessageTemp,mChar[mCt]);
if(mCt==3){
mCt = 0;
setButtonCaption();
showButtons();
}else{
mCt++;
}
}else{
}
sMessage = true;
</script>
</transition>
<transition value="9">
<script>
sMessage = false;
if(_streq(mChar[mCt],mButtonCaption[8])){
mMessageTemp = _strcat(mMessageTemp,mChar[mCt]);
if(mCt==3){
mCt = 0;
setButtonCaption();
showButtons();
}else{
mCt++;
}
}else{
}
sMessage = true;
</script>
</transition>
<transition value="0">
<script>
sMessage = false;
mTime = 0;
setButtonCaption();
showButtons();
sMessage = true;
</script>
</transition>
</state>
</states>
</application>
</ujml>
コメント