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]へ「右」を文字描画。 ここまで。