[ 📌文法] [ 🎨命令一覧]

[編集モード] Rope with Ribbon 改訂版

天井から地上まで吊り下げられたロープをサルに順次飛び移らせて、目標数のリボンにタッチしてゴールするまでの時間を競うゲームです。マウスの左クリックと右クリックの判別が可能になりましたので、その機能を使って操作性を良くしてみました。また、ステージ数も5から10に倍増してみました。ただ、マウスが無いデバイスでは遊ぶことが出来ません。タブレット等で遊ぶ場合は前のバージョンをお使いください。遊び方は、タイトル画面をご覧ください。

# Rope with Ribbon 03
描画中キャンバスの「背景色」に「#aaeeee」をDOMスタイル設定。
全描画クリア。
{"声高":1.5, "速度":2.0}に話者詳細設定。
Ribbon=[
[55,50,45,40,35,30,25,20,15,10,5],
[50,50,40,40,30,30,20,20,10,10,0],
[50,40,39,30,29,28,20,19,18,18,17],
[25,20,15,14,13,12,12,20,18,16,12],
[55,30,28,20,19,18,25,15,15,10,5],
[55,53,31,37,37,22,13,19,25,16,0],
[55,49,48,36,35,19,20,19,12,14,5],
[55,25,38,36,10,39,32,11,26,10,3],
[55,39,48,39,23,18,32,15,8,28,7],
[55,50,40,42,35,45,43,36,25,19,4]
]
Kiroku=[20000,20000,20000,20000,20000,20000,2000,20000,20000,20000]
もし、「最短記録」が存在するならば、
　　「最短記録」を開いてKirokuに代入。
ここまで。
開始時刻=0。終了時刻=0。経過時間=0。
stage=0。maxstage=9。
Kokomade=[0,0,0,0,0,0,0,0,0,0,0]
Touch=[0,0,0,0,0,0,0,0,0,0,0]
mx=0。my=0。
sx=0。sy=0。
bx=0。by=0。
mokuhyou=0。
saikou=0
tokuten=0。
takasa=60。
rope=0。
goal=0。
down=0。
場面=「タイトル」。
タイトル画面表示。

描画中キャンバスをマウス押した時には
　　対象イベントのDOMイベント処理停止。
　　mx=マウスX。my=マウスY
　　場面で条件分岐
　　　　「ゲーム中」ならば、
　　　　　　もし、（押したボタン＝「左」）かつ（takasa>0）ならば
　　　　　　　　down=1。
　　　　　　ここまで。
　　　　　　もし、（押したボタン＝「右」）かつ（rope<10）ならば
　　　　　　　　down=0。
　　　　　　　　rope=rope+1。
　　　　　　　　#0.1秒待つ。
　　　　　　ここまで。
　　　　ここまで。
　　　　「タイトル」ならば、
　　　　　　もし、（mx>224）かつ（mx<384）かつ（my>530）かつ（my<570）ならば、
　　　　　　　　場面=「ゲーム中」
　　　　　　　　ゲーム開始。
　　　　　　ここまで。
　　　　　　もし、（mx>726）かつ（mx<743）かつ（my>33）かつ（my<54）ならば、
　　　　　　　　「最短記録」をローカルストレージキー削除。
　　　　　　　　Kiroku=[20000,20000,20000,20000,20000,20000,2000,20000,20000,20000]
　　　　　　ここまで。
　　　　ここまで。
　　　　「終了」ならば、
　　　　　　もし、（mx>7）かつ（mx<599）かつ（my>10）かつ（my<590）ならば、
　　　　　　　　もし、（stage=0）ならば、
　　　　　　　　　　場面=「タイトル」。
　　　　　　　　　　タイトル画面表示。
　　　　　　　　違えば、
　　　　　　　　　　場面=「ゲーム中」
　　　　　　　　　　ゲーム開始。
　　　　　　　　ここまで。
　　　　　　ここまで。
　　　　ここまで。
　　ここまで。
ここまで。
描画中キャンバスを右クリックした時には
　　対象イベントのDOMイベント処理停止。
ここまで。

●変数初期化とは
　　Kokomade=[0,0,0,0,0,0,0,0,0,0,0]
　　Touch=[0,0,0,0,0,0,0,0,0,0,0]
　　tokuten=0。
　　takasa=60。
　　rope=0。
　　goal=0。
　　down=0。
ここまで。

●ゲーム開始とは
　　0に線太設定。「#aaeeee」に線色設定。「#aaeeee」に塗色設定。
　　[0,0,605,600]へ四角描画。
　　変数初期化。
　　目標設定。
　　得点表示。
　　計時開始。
　　「ゲーム進行」を画面更新時実行。
ここまで。

●ゲーム進行とは
　　綱描画。
　　リボン描画。
　　ステージ等表示。
　　猿描画。
　　リボン判定。
　　得点表示。
　　ゴール判定。
　　タイム表示。
　　もし、goal>0ならば、
　　　　計時終了。
　　　　1.5秒待つ。
　　　　終了処理。
　　ここまで。
　　もし、場面=「ゲーム中」ならば、
    　　「ゲーム進行」を画面更新時実行。
　　ここまで。
ここまで。

●タイトル画面表示とは
　　情報板表示。
　　綱描画。
　　遊び方表示。
ここまで

●遊び方表示とは
　　1に線太設定。「#ffffff」に線色設定。
　　yを0から290まで繰り返す
　　　　[7,10+y*2]から[599,10+y*2]まで線描画。
　　ここまで。
　　xを0から296まで繰り返す
　　　　[7+x*2,10]から[7+x*2,590]まで線描画。
　　ここまで。
　　「#000077」に塗色設定。
　　「24px sans-serif」に描画フォント設定。
　　[120,43]へ『「Rope with Ribbon」の遊び方』を文字描画。
　　「16px sans-serif」に描画フォント設定。
　　ly=100
　　[55,ly]へ「天井から地上まで吊り下げられたロープをサルに順次飛び移らせて、」を文字描画。
　　[43,ly+30]へ「目標数のリボンにタッチしてゴールするまでの時間を競うゲームです。」を文字描画。
　　[129,ly+60]へ「ロープは全部で11本あり、一列に並んでいます。」を文字描画。
　　[40,ly+90]へ「はじめ、サルは左端の1本目のロープの高さ60メートルの位置にいます。」を文字描画。
　　[79,ly+120]へ「右端の11本目のロープの高さ0メートルの位置がゴールです。」を文字描画。
　　[131,ly+150]へ「各ロープには1か所ずつリボンが巻かれていて、」を文字描画。
　　[59,ly+180]へ「サルがこのリボンに触れると、1ポイント獲得することが出来ます。」を文字描画。
　　[63,ly+210]へ「目標ポイントを獲得することが出来ずにゴールすると、失格です。」を文字描画。
　　[51,ly+240]へ「サルは、マウスの左クリック，右クリックで動かすことが出来ます。」を文字描画。
　　[98,ly+270]へ「左クリックで、サルは一定の速さでロープを降りますが、」を文字描画。
　　[147,ly+300]へ「リボンに触れると、その高さで止まります。」を文字描画。
　　[98,ly+330]へ「右クリックで、右のロープに移動し、そこで止まります。」を文字描画。
　　[63,ly+360]へ「ロープを登ったり、左のロープに戻ったりすることは出来ません。」を文字描画。
　　[87,ly+390]へ「では、最短記録を目指して、頑張っていきましょう！」を文字描画。
　　2に線太設定。「#000077」に線色設定。「#ffffff」に塗色設定。
　　[224,530,160,40]へ四角描画。
　　「#000077」に塗色設定。
　　「20px sans-serif」に描画フォント設定。
　　[234,557]へ「ゲームを始める」を文字描画。
ここまで。

●情報板表示とは
　　1に線太設定。「#660033」に線色設定。「#663300」に塗色設定。
　　[606,10,182,580]へ四角描画。
　　「#ffffff」に塗色設定。
　　「40px sans-serif」に描画フォント設定。
　　[648,55]へ「Rope」を文字描画。
　　[630,138]へ「Ribbon」を文字描画。
　　「24px sans-serif」に描画フォント設定。
　　[672,92]へ「with」を文字描画。
　　「20px sans-serif」に描画フォント設定。
　　[636,190]へ「目標ポイント」を文字描画。
　　[618,280]へ「あなたのポイント」を文字描画。
　　[618,380]へ「経過時間(ミリ秒)」を文字描画。
　　bx=644。by=460。
　　bx,byへ操作ボタン。
ここまで。

●ステージ等表示
　　「#ffffff」に塗色設定。
　　「24px sans-serif」に描画フォント設定。
　　[34,43]へ「STAGE {stage+1}」を文字描画。
　　「20px sans-serif」に描画フォント設定。
　　[360,43]へ「最短記録 {Kiroku[stage]}ミリ秒」を文字描画。
ここまで。

●綱描画とは
　　0に線太設定。「#aaeeee」に線色設定。「#aaeeee」に塗色設定。
　　[0,0,605,600]へ四角描画。
　　i=0
　　11回
　　　　50+50*i,50へロープ。
　　　　i=i+1
　　ここまで。
　　0に線太設定。「#993300」に線色設定。「#993300」に塗色設定。
　　[20,18,565,32]へ四角描画。
　　「16px sans-serif」に描画フォント設定。
　　[528,566]へ「ゴール」を文字描画。
ここまで。

●リボン描画とは
　　「12px sans-serif」に描画フォント設定。
　　i=0
　　11回
　　　　rx=50+50*i。ry=550-Ribbon[stage][i]*8。
　　　　[rx-5,ry]へ「🎀」を文字描画。
　　　　i=i+1
　　ここまで。
　　「16px sans-serif」に描画フォント設定。
　　[528,566]へ「ゴール」を文字描画。
ここまで。

●猿描画とは
　　もし、（down=1）かつ（takasa>0）ならば、takasa=takasa-0.2。
　　sx=40+50*rope。sy=550-takasa*8。
　　「20px sans-serif」に描画フォント設定。
　　[sx,sy]へ「🐵」を文字描画。
ここまで。

●目標設定とは
　　Kokomade=[0,0,0,0,0,0,0,0,0,0,0]
　　Kokomade[0]=1
　　iを1から10まで1ずつ増やし繰り返す
　　　　saikou=0
　　　　tを0からi-1まで1ずつ増やし繰り返す
　　　　　　もし、（Ribbon[stage][t]>=Ribbon[stage][i]）かつ（saikou<Kokomade[t]）ならば、
　　　　　　　　saikou=Kokomade[t]
　　　　　　ここまで。
　　　　ここまで。
　　　　Kokomade[i]=saikou+1
　　ここまで。
　　mokuhyou=Kokomade[10]
　　目標文字=RIGHT(「 ｛mokuhyou｝」,2)
　　0に線太設定。「#663300」に線色設定。「#663300」に塗色設定。
　　[670,197,80,50]へ四角描画。
　　「#ffffff」に塗色設定。
　　「48px sans-serif」に描画フォント設定。
　　[685,240]へ目標文字を文字描画。
ここまで。

●得点表示とは
　　得点文字=RIGHT(「 ｛tokuten｝」,2)
　　0に線太設定。「#663300」に線色設定。「#663300」に塗色設定。
　　[670,288,80,50]へ四角描画。
　　「#ffffff」に塗色設定。
　　「48px sans-serif」に描画フォント設定。
　　[685,330]へ得点文字を文字描画。
ここまで。

●計時開始とは
　　開始時刻=システム時間ミリ秒
　　計時フラグはオン。
ここまで。

●計時終了とは
　　終了時刻=システム時間ミリ秒
　　経過時間=終了時刻-開始時刻
　　計時フラグはオフ。
ここまで。

●タイム表示とは
　　現在時刻=システム時間ミリ秒
　　計時=現在時刻-開始時刻
　　計時文字=RIGHT(「     ｛計時｝」,6)
　　0に線太設定。「#663300」に線色設定。「#663300」に塗色設定。
　　[620,392,150,40]へ四角描画。
　　「#ffffff」に塗色設定。
　　「36px sans-serif」に描画フォント設定。
　　[629,425]へ計時文字を文字描画。
　　もし、（計時>599999）ならば、
　　　　goal=2
    ここまで。
ここまで。

●リボン判定とは
　　rh=Ribbon[stage][rope]
　　もし、（takasa>rh-0.1）かつ（takasa<rh+0.1）かつ（Touch[rope]=0）ならば、
　　　　down=0
　　　　tokuten=tokuten+1
　　　　Touch[rope]=1
　　　　「タッチ」と話す。
　　ここまで。
ここまで。

●ゴール判定とは
　　もし、（rope=10）かつ（takasa>-0.1）かつ（takasa<0.1）ならば、
　　　　goal=1
　　　　「ゴール」と話す。
　　ここまで。
ここまで。

●終了処理とは
　　場面=「終了」
　　1に線太設定。「#ffffff」に線色設定。
　　yを0から290まで繰り返す
　　　　[7,10+y*2]から[599,10+y*2]まで線描画。
　　ここまで。
　　もし、（goal=1）ならば、
　　　　「#0000cc」に塗色設定。
　　　　「40px sans-serif」に描画フォント設定。
　　　　[165,150]へ「ゴールに到着！」を文字描画。
　　　　もし、（tokuten<mokuhyou）ならば、
　　　　　　[50,275]へ「ポイント不足で、失格です。」を文字描画。
　　　　　　「24px sans-serif」に描画フォント設定。
　　　　　　「#aa0000」に塗り色設定。
　　　　　　[70,450]に「この画面をクリックしてください。」を文字描画。
　　　　　　[260,490]に「はじめの画面に戻ります。」を文字描画。
　　　　　　stage=0
　　　　違えば、
　　　　　　[40,225]へ「あなたの記録：｛経過時間｝ミリ秒」を文字描画。
　　　　　　もし、（経過時間<Kiroku[stage]）ならば、
　　　　　　　　[165,300]へ「最短記録更新！」を文字描画。
　　　　　　　　Kiroku[stage]=経過時間
　　　　　　　　Kirokuを「最短記録」に保存。
　　　　　　ここまで。
　　　　　　もし、（stage<maxstage）ならば、
　　　　　　　　「24px sans-serif」に描画フォント設定。
　　　　　　　　「#aa0000」に塗り色設定。
　　　　　　　　[70,450]に「この画面をクリックしてください。」を文字描画。
　　　　　　　　[180,490]に「次のステージがすぐ始まります。」を文字描画。
　　　　　　　　stage=stage+1
　　　　　　違えば、
　　　　　　　　「40px sans-serif」に描画フォント設定。
　　　　　　　　「#0000cc」に塗り色設定。
　　　　　　　　[88,375]に「全ステージクリアー！！」を文字描画。
　　　　　　　　「16px sans-serif」に描画フォント設定。
　　　　　　　　「#000000」に塗り色設定。
　　　　　　　　[20,410]に『【秘密の情報】タイトル画面でタイトルの「e」をクリックすると、』を文字描画。
　　　　　　　　[300,440]に『最短記録を初期化することができます。』を文字描画。
　　　　　　　　「24px sans-serif」に描画フォント設定。
　　　　　　　　「#aa0000」に塗り色設定。
　　　　　　　　[70,480]に「この画面をクリックしてください。」を文字描画。
　　　　　　　　[260,520]に「はじめの画面に戻ります。」を文字描画。
　　　　　　　　stage=0
　　　　　　ここまで。
　　　　ここまで。
　　違えば、
　　　　「#cc0000」に塗色設定。
　　　　「40px sans-serif」に描画フォント設定。
　　　　[165,150]へ「時間オーバー！」を文字描画。
　　　　[30,275]へ「10分経過したので、失格です。」を文字描画。
　　　　「24px sans-serif」に描画フォント設定。
　　　　「#aa0000」に塗り色設定。
　　　　[70,450]に「この画面をクリックしてください。」を文字描画。
　　　　[260,490]に「はじめの画面に戻ります。」を文字描画。
　　　　stage=0
　　ここまで。
ここまで。

●（x,yへ）ロープとは
　　0に線太設定。「#cccc00」に線色設定。「#cccc00」に塗色設定。
　　[x,y,5,500]へ四角描画。
　　「#777777」に線色設定。「#777777」に塗色設定。
　　ii=0
　　50回
　　　　[[x,y+2+10*ii],[x+5,y+6+10*ii],[x+6,y+7+10*ii],[x,y+3+10*ii],[x,y+2+10*ii]]で多角形描画。
　　　　ii=ii+1
　　ここまで。
ここまで。

●（x,yへ）操作ボタンとは
　　2に線太設定。
　　「#999999」に線色設定。
　　「#cccccc」に塗り色設定。
　　[x+52,y+80]へ40の円描画。
　　[x+52,y+41]へ40の円描画。
　　[x+12, y+42, 80, 39]へ四角描画。
　　[x+13, y+51]から[x+91, y+51]まで線描画。
　　「#cccccc」に線色設定。
　　[x+13, y+42]から[x+91, y+42]まで線描画。
　　[x+13, y+81]から[x+91, y+81]まで線描画。
　　「#999999」に線色設定。
　　「#ffffff」に塗り色設定。
　　[x+52, y+1]から[x+52, y+51]まで線描画。
　　[x+52,y+22]へ5の円描画。
　　[x+52,y+33]へ5の円描画。
　　[x+47, y+22, 10, 11]へ四角描画。
　　「#ffffff」に線色設定。
　　[x+48, y+22]から[x+56, y+22]まで線描画。
　　[x+48, y+33]から[x+56, y+33]まで線描画。
　　「36px sans-serif」に描画フォント設定。
　　「#ffffff」に塗色設定。
　　[x-22,y+40]へ「下」を文字描画。
　　[x+95,y+40]へ「右」を文字描画。
ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] Rope with Ribbon 改訂版

素材のアップロード