[編集モード] 激ムズブロック崩し

キャンバスを使った、モバイル/キーボード操作対応のブロック崩し。詳細はプログラム内のコメント参照。

/**
 * 操作方法:
 *   [難易度選択] セレクトボックス 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。
  。。。
。。。

##スタートボタン
スタートボタンをクリック時には、
  ゲーム開始。
。。。

#==================================================
#初期化
#==================================================

変数初期化。
タイトル描画。

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

🍯 なでしこ3貯蔵庫

[編集モード] 激ムズブロック崩し

素材のアップロード