🌸 「なでしこ」
>
🍯 「貯蔵庫」
激ムズブロック崩し
🌟新規
📒一覧
🔌
🔍検索
🚪ログイン
激ムズブロック崩し 📖
キャンバスを使った、モバイル/キーボード操作 対応のブロック崩し。詳細はプログラム内のコメント参照。
プログラム:
(→大)
/** * 操作方法: * [難易度選択] セレクトボックス or 上下キー * [ゲーム開始] スタートボタン or 左右キー or スペースキー * [パドル操作] 下部のバー or 左右キー * * メモ: * キャンバスを使ったブロック崩しです。 * 乱数を使っていないため、レベルごとのボールの動きは必ず同じになります。 * 要はボールの動きを覚えてしまえばクリアできるということです。 * 改造はご自由にどうぞ。というかしてください。 * * 参考にした記事: * https://developer.mozilla.org/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript * * TODO: * nako3kvs使う * https://nadesiko.net/index.php?nako3kvs * Key: Meatwo_Breakout_Loser, Meatwo_Breakout_Winner * Pass: MB310 */ #================================================== #MES設定 #================================================== !「https://n3s.nadesi.com/plain/nako3mes.nako3」を取込 #「30em」をMES高設定。 オンをMES空白文字設定。 「ダーク」をMESカラーテーマ設定。 2をMESインデントサイズ設定。 オフをMES読取専用設定。 #================================================== #定数 #================================================== 定数 デフォルトDOM親要素=DOM親要素。 定数 キャンバスサイズ=[480,320]。 定数 最大フレームレート=60。 定数 最小フレーム時間=1/最大フレームレート。 定数 ボール半径=10。 定数 パドルXサイズ=80。 定数 パドルYサイズ=5。 定数 パドル早さ=5。 定数 難易度リスト={ #"難易度名": [ボール速度倍率,メインカラー,メッセージ] "★1 簡単": [1.0000,"#0095DD",「まずは操作方法を覚えていきましょう。」], "★2 普通": [1.0060,"#006B9F",「速い動きに惑わされないでください。」], "★3 難しい": [1.0100,"#F7A034",「不規則な動きに惑わされないでください。」], "★4 激ムズ": [1.0150,"#AE6F20",「速い動きのボールに追いつきましょう。」], "★5 過激": [1.0200,"#D0434A",「何度も挑戦しましょう。」], "★6 究極": [1.0315,"#850A10",「諦めないでください。」], "★7 悪夢": [1.0400,"#2C134E",「挑戦し続ければいつかクリアできます。」], "★8 不可能": [1.0500,"#130722",「恐らくクリア不可能です。」], "★100 宇宙人用": [5.0000,"#13C834",「絶対に無理です。」], "★? ??????":[-0.9000,"#393939",「どうやってここまで?」], } 定数 難易度キー=難易度リストの辞書キー列挙。 定数 ブロック上オフセット=0。#ブロックと画面上部との感覚。 定数 ブロック左オフセット=0。#ブロックと画面左との間隔。 定数 ブロックパディング=2。 #ブロック同士の間隔。 定数 ブロック横=8。 #ブロックの横に並ぶ個数。 定数 ブロック縦=4。 #ブロックの縦に並ぶ個数。 定数 ブロック横幅=58。 #ブロックの横幅サイズ。 定数 ブロック縦幅=35。 #ブロックの縦幅サイズ。 #================================================== #DOM #================================================== ##スタイル DOM親要素に『<style> select:disabled, button:disabled { color: graytext !important; } </style> 』をDOM_HTML設定。 ##タイトル DOCUMENT["title"]=「激ムズブロック崩し」。 ##難易度選択ボックス 難易度選択=難易度キーのセレクトボックス作成。 難易度選択に{ "width": "240px" "height": "60px" "padding": "0" "margin": "0" "font-size": "20px" "color": "#0095DD" }をDOMスタイル一括設定。 「直近の難易度」を読む。 もし、(それ=undefined)ならば、それ=難易度キー[0]。 それを難易度選択にテキスト設定。 ##スタートボタン スタートボタン=「スタート」のボタン作成。 スタートボタンに{ "width": "240px" "height": "60px" "padding": "0" "margin": "0" "font-size": "20px" "color": "#0095DD" }をDOMスタイル一括設定。 改行作成。 ##キャンバス 「div」のDOM部品作成してDOM親要素設定。 DOM親要素に{ "width": "{キャンバスサイズ[0]}px" "height": "{キャンバスサイズ[1]}px" "position": "relative" "padding": "0" "margin": "0" "box-sizing": "content-box" #"touch-action": "pinch-zoom" }をDOMスタイル一括設定。 キャンバス={}。 ["背景","ブロック","ボール","UI"]を反復 キャンバス[対象]=キャンバスサイズのキャンバス作成。 キャンバス[対象]に{ "position": "absolute" "left": "0" "top": "0" "padding": "0" "margin": "0" "box-sizing": "content-box" "padding": "0" "margin": "0" }をDOMスタイル一括設定。 。。。 デフォルトDOM親要素にDOM親要素設定。 改行作成。 ##操作バー 操作バー=[ パドルXサイズ/2, キャンバスサイズ[0]-パドルXサイズ/2, キャンバスサイズ[0]/2 ]の値指定バー作成。 操作バーに{ "width": "{キャンバスサイズ[0]-パドルXサイズ}px" "margin": "0 {パドルXサイズ/2}px" }をDOMスタイル一括設定。 改行作成。 ##操作バー有効化チェックボックス 操作バー有効=「操作バー有効化」のチェックボックス作成。 操作バー有効の「checked」に真をDOM属性設定。 改行作成。 ##メッセージラベル メッセージラベル=「」のラベル作成。 改行作成。 ##空行 改行作成。 #================================================== #変数 #================================================== スコア=0。 ゲームプレイ中=偽。 ゲームクリア=偽。 描画回数=0。 フレームレート=0。 フレームレート測定=偽。 再描画=真。 メインカラー=難易度リスト[難易度選択のテキスト取得][1]。 ボール速度倍率=1.00。 ボールX=キャンバスサイズ[0]/2。 ボールY=キャンバスサイズ[1]-30。 ボールX速度=2。 ボールY速度=-2。 パドルX=(キャンバスサイズ[0]-パドルXサイズ)/2。 左入力中=偽。 右入力中=偽。 ブロックリスト=[]。 #================================================== #関数など #================================================== 関数 メインカラー変更とは メインカラー=難易度リスト[難易度選択のテキスト取得][1]。 。。。 関数 変数初期化とは ##ゲーム進行 スコア=0。 ゲームプレイ中=偽。 ゲームクリア=偽。 ##フレームレート関係 描画回数=0。 フレームレート=0。 フレームレート測定=偽。#偽にすると1秒間測定をキャンセル(ゲーム開始直後などに使用) 再描画=真。#真にするとフレームレートを次フレームで描画 ##難易度設定 「直近の難易度」を読む。 もし、(それ=undefined)ならば、それ=難易度キー[0]。 それを難易度選択にテキスト設定。 ##ボール ボール速度倍率=1.00。 ボールX=キャンバスサイズ[0]/2。 ボールY=キャンバスサイズ[1]-30。 ボールX速度=2。 ボールY速度=-2。 ##パドル パドルX=(キャンバスサイズ[0]-パドルXサイズ)/2。 左入力中=偽。#真ならば左へパドルを移動 右入力中=偽。#真ならば右へパドルを移動 ##操作バー 操作バーに「{キャンバスサイズ[0]/2}」をテキスト設定。 操作バーの「step」に「{パドル早さ}」をDOM属性設定。 操作バーの「disabled」に真をDOM属性設定。 操作バー有効の「disabled」に真をDOM属性設定。 ##ブロックリスト生成 ブロックリスト=[]。 縦で0からブロック縦-1まで繰り返す ブロックリスト[縦]=[]。 横で0からブロック横-1まで繰り返す ブロックリスト[縦][横]=[0,0,真]。#[x,y,show] 。。。 。。。 ##disabledクリア 難易度選択の「disabled」に偽をDOM属性設定。 スタートボタンの「disabled」に偽をDOM属性設定。 。。。 ##メッセージラベルにメッセージを設定 関数 (Aを)メッセージラベル設定とは メッセージラベルに「{メッセージラベルのテキスト取得}{A}<br>{改行}」をテキスト設定。 3秒後には、 変数 m=メッセージラベルのテキスト取得して、それを改行で文字列分割。 メッセージラベルに「{m[1]}」をテキスト設定。 。。。 。。。 #全キャンバスをクリアする 関数 塗りつぶし全クリアとは キャンバスの辞書キー列挙して反復 キャンバス[対象]へ描画開始。 全描画クリア。 。。。 キャンバス["背景"]へ描画開始。 「#eeeeee」に塗色設定。 [0,0,キャンバスサイズ[0],キャンバスサイズ[1]]へ四角描画。 。。。 ##キャンバスの中心に文字を描画 関数 (CANVASに、COLORで、FONTの、TEXTを、OFFSETへ)メッセージ描画とは CANVASへ描画開始。 COLORに塗色設定。 「{FONT}」に描画フォント設定。 W=TEXTの文字描画幅取得。 [ (キャンバスサイズ[0]-W["width"])/2, キャンバスサイズ[1]*2/3+OFFSET, ]にTEXTを文字描画。 。。。 ##キャンバスにボール・パドルを描画 関数 ボール描画とは キャンバス["ボール"]へ描画開始。 全描画クリア。 メインカラーに塗色設定。 「#00000000」に線色設定。 [ボールX,ボールY]へボール半径の円描画。#ボール [パドルX,キャンバスサイズ[1]-パドルYサイズ,パドルXサイズ,パドルYサイズ]へ四角描画。#パドル 。。。 ##キャンバスにブロックを描画 関数 ブロック描画とは キャンバス["ブロック"]へ描画開始。 全描画クリア。 縦で0からブロック縦-1まで繰り返す 横で0からブロック横-1まで繰り返す もし、(ブロックリスト[縦][横][2])ならば、 #ブロックが壊されていないならば 変数 x=(横*(ブロック横幅+ブロックパディング))+ブロック左オフセット。 変数 y=(縦*(ブロック縦幅+ブロックパディング))+ブロック上オフセット。 ブロックリスト[縦][横][0]=x。 ブロックリスト[縦][横][1]=y。 メインカラーに塗色設定。 「#00000000」に線色設定。 [x,y,ブロック横幅,ブロック縦幅]へ四角描画。 。。。 。。。 。。。 。。。 ##キャンバスにスコアを描画 関数 UI描画とは キャンバス["UI"]へ描画開始。 全描画クリア。 #スコア 「16px ヒラギノ角ゴシック」に描画フォント設定。 メインカラーに塗色設定。 「#000000」に線色設定。 [8,300]に「スコア: {スコア}/{ブロック横*ブロック縦}」を文字描画。 #フレームレート 「16px ヒラギノ角ゴシック」に描画フォント設定。 「#000000」に線色設定。 #FPSが0を超えている かつ FPS低下中(最大FPSの75%未満) もし、(フレームレート>0 && フレームレート<最大フレームレート*3/4)ならば、 赤色に塗色設定。 違えば、 メインカラーに塗色設定。 。。。 [キャンバスサイズ[0]-100,300]に「FPS: {フレームレート}/{最大フレームレート}」を文字描画。 #スピード 「16px ヒラギノ角ゴシック」に描画フォント設定。 「#000000」に線色設定。 メインカラーに塗色設定。 [8,280]に「スピード: {(切り捨て(絶対値(ボールX速度)*10/2))/10}x」を文字描画。 。。。 ##ボールの速度を上げる 関数 ボール早くとは ボールX速度=ボールX速度*ボール速度倍率。 ボールY速度=ボールY速度*ボール速度倍率。 再描画=真。 。。。 ##ブロックとボールの衝突を検知 関数 ブロック衝突検知とは 縦で0からブロック縦-1まで繰り返す 横で0からブロック横-1まで繰り返す 変数 ブロック=ブロックリスト[縦][横]。 もし、(ブロック[2])ならば、 もし、(ボールX>ブロック[0] && ボールX<ブロック[0]+ブロック横幅 && ボールY>ブロック[1] && ボールY<ブロック[1]+ブロック縦幅)ならば、 ボールY速度=-ボールY速度。 ブロック[2]=偽。 スコア=スコア+1。 ボール早く。 もし、(スコア>=ブロック横*ブロック縦)ならば、 ゲームクリア=真。 。。。 。。。 。。。 。。。 。。。 。。。 ##操作バーを確認 関数 操作バー確認とは 変数 N=(操作バーのテキスト取得)-パドルXサイズ/2。 右入力中=(N>パドルX)。 左入力中=(N<パドルX)。 。。。 ##操作バー有効化チェックボックスの状態に応じて、操作バーを有効化/無効化する 関数 操作バー変更とは もし、(操作バー有効の「checked」をDOM属性取得)ならば、 操作バーに(パドルX+パドルXサイズ/2)をテキスト設定。 操作バーの「disabled」に偽をDOM属性設定。 違えば、 操作バーの「disabled」に真をDOM属性設定。 「キーボード操作中は操作バーが無効になります」をメッセージラベル設定。 。。。 。。。 ##タイトルを描画 関数 タイトル描画とは メインカラー変更。 塗りつぶし全クリア。 ボール描画。 ブロック描画。 UI描画。 キャンバス["UI"]にメインカラーで「30px ヒラギノ角ゴシック」の「レベル: {難易度選択のテキスト取得}」を-20へメッセージ描画。 キャンバス["UI"]にメインカラーで「30px ヒラギノ角ゴシック」の「スタートボタンかキー入力で開始」を20へメッセージ描画。 。。。 ##キー入力 DOCUMENTをキー押時には(Key) 変数 K=Key["key"] もし、(K="ArrowRight" || K="Right")ならば、 右入力中=真。 違えば、もし、(K="ArrowLeft" || K="Left")ならば、 左入力中=真。 違えば、もし、(!ゲームプレイ中 && (K="ArrowUp" || K="Up"))ならば、 難易度選択に「{難易度キー[難易度キーから(難易度選択のテキスト取得)を配列検索して1を引く]}」をテキスト設定。 対象イベントのDOMイベント処理停止。 タイトル描画。 0を戻す。 違えば、もし、(!ゲームプレイ中 && (K="ArrowDown" || K="Down"))ならば、 難易度選択に「{難易度キー[難易度キーから(難易度選択のテキスト取得)を配列検索して1を足す]}」をテキスト設定。 対象イベントのDOMイベント処理停止。 タイトル描画。 0を戻す。 違えば、もし、(K=" ")ならば、 #何もしない 違えば、 #右左スペースキー以外は無視 0を戻す。 。。。 #操作バーが有効ならば無効化 もし、(操作バー有効の「checked」をDOM属性取得)ならば、 操作バー有効の「checked」に偽をDOM属性設定。 操作バー変更。 。。。 #ゲームプレイ中でなければゲーム開始 もし、(!ゲームプレイ中)ならば、 #デフォルトの動作をキャンセル(難易度が変更されないように) 対象イベントのDOMイベント処理停止。 ゲーム開始。 。。。 。。。 ##キー入力離す DOCUMENTをキー離時には(Key) 変数 K=Key["key"] もし、((K="ArrowRight")||(K="Right"))ならば 右入力中=偽。 違えば、もし、((K="ArrowLeft")||(K="Left"))ならば 左入力中=偽。 。。。 。。。 ##DOMイベント 操作バー有効の「change」がDOMイベント発火時には、 操作バー変更。 。。。 難易度選択の「change」がDOMイベント発火時には、 タイトル描画。 。。。 ##フレームレート測定 1秒毎には もし、(フレームレート測定)ならば、 フレームレート=描画回数。 描画回数=0。 再描画=真。 違えば、##フレームレート測定をスキップ フレームレート測定=真。 描画回数=0。 。。。 。。。 ##ゲーム開始 関数 ゲーム開始とは #難易度設定/保存、カラー設定 変数 D=難易度リスト[難易度選択のテキスト取得]。 「直近の難易度」に「{難易度選択のテキスト取得}」を保存。 #変数設定 ゲームプレイ中=真。 ボール速度倍率=D[0]。 メインカラー=D[1]。 #パーツのdisabled設定 難易度選択の「disabled」に真をDOM属性設定。 スタートボタンの「disabled」に真をDOM属性設定。 操作バーの「disabled」に!(操作バー有効の「checked」をDOM属性取得)をDOM属性設定。 操作バー有効の「disabled」に偽をDOM属性設定。 『const e=document.activeElement; if(e){e.blur();}』をJS実行。 #次回のフレームレート測定をスキップ フレームレート測定=偽。 #ループ部分 最小フレーム時間 秒毎には(タイマーID) #各種描画 ボール描画。 ブロック衝突検知。 もし、(再描画)ならば、 ブロック描画。 UI描画。 再描画=偽。 。。。 #ゲームクリア もし(ゲームクリア)ならば、 タイマーIDのタイマー停止。 難易度キーから「{難易度選択のテキスト取得}」を配列検索。 それ=「{難易度キー[それ+1]}」。 「直近の難易度」にそれを保存。 キャンバス["UI"]にメインカラーで「30px ヒラギノ角ゴシック」の「レベルクリア!」を0へメッセージ描画。 逐次実行 3秒待機。 変数初期化。 タイトル描画。 。。。 1を戻す。 。。。 #画面左右部分でのバウンド もし、(ボールX+ボールX速度>キャンバスサイズ[0]-ボール半径)||(ボールX+ボールX速度<ボール半径)ならば ボールX速度=-ボールX速度。 ボール早く。 。。。 #画面上部/下部でのバウンド もし、(ボールY+ボールY速度<ボール半径)ならば、#画面上部接触 ボールY速度=-ボールY速度。 ボール早く。 違えば、もし、(ボールY+ボールY速度>キャンバスサイズ[1]-ボール半径)ならば、#画面下部接触 もし、(ボールX>パドルX && ボールX<パドルX+パドルXサイズ)ならば、#パドル接触 ボールY速度=-ボールY速度。 ボール早く。 違えば、#パドル未接触 タイマーIDのタイマー停止。 キャンバス["UI"]に、赤色で「30px ヒラギノ角ゴシック」の「ゲームオーバー!」を0へメッセージ描画。 キャンバス["UI"]に、赤色で「15px ヒラギノ角ゴシック」の「ヒント: {難易度リスト[難易度選択のテキスト取得][2]}」を40へメッセージ描画。 逐次実行 1.5秒待機。 変数初期化。 タイトル描画。 。。。 1を戻す。 。。。 。。。 #操作バー確認 もし、(操作バー有効の「checked」をDOM属性取得)ならば、操作バー確認。 #パドル移動 もし、(右入力中 && パドルX<キャンバスサイズ[0]-パドルXサイズ)ならば、パドルX=パドルX+パドル早さ もし、(左入力中 && パドルX>0)ならば、パドルX=パドルX-パドル早さ #ボールを移動 ボールX=ボールX+ボールX速度。 ボールY=ボールY+ボールY速度。 #フレームレート確認用 描画回数=描画回数+1。 。。。 。。。 ##スタートボタン スタートボタンをクリック時には、 ゲーム開始。 。。。 #================================================== #初期化 #================================================== 変数初期化。 タイトル描画。
プログラムを実行
Meatwo 作
タイトル:
激ムズブロック崩し
ライセンス:
CC0 (著作権破棄)
タイプ:
wnako
タグ:
-
利用バージョン:
3.2.40
作成日時:
2022/02/05 16:39 (編集: 2022/03/31 13:41)
公開の投稿
⭐⭐⭐
ログイン
して★を付けよう!
📝作品を編集
作品公開情報
📍この作品のURL:
📍アプリ(即時実行)のURL:
📍アプリ(実行ボタンあり)のURL:
📍ブログパーツ:
上記HTML↑をブログに貼り付けることでアプリを埋め込めます。
📍ライブラリ直リンク - 『!「***」を取込』で使うとき:
📍なでしこハブ (最新版の反映は1日後):
ソースの確認
編集履歴の確認
通報数:
0
通報って何?