HTML5 Canvas を使用したクラシックなブロック崩しゲームです。レスポンシブデザインでどのデバイスでも楽しめます。
https://you-sk.github.io/web-simple-blockout/
- 純粋なWeb技術: HTML5、CSS3、JavaScript のみで構築
- 美しいUI: グラデーション背景とガラスモーフィズム効果
- パワーアップシステム: 6種類のアイテムでゲームプレイが多彩に
- 視覚効果: パーティクル、画面シェイク、ボールトレイル
- コンボシステム: 連続ブロック破壊でボーナス獲得
- ハイスコア保存: localStorage でベストスコアを記録
- 効果音: Web Audio API を使用したリアルタイム音響効果
- レスポンシブ: デスクトップ、タブレット、モバイル対応
- スムーズな物理: 正確な衝突判定と自然な跳ね返り
- プログレッシブ難易度: ゲーム進行に応じて速度が上昇
パドルを操作してボールを跳ね返し、画面上部のすべてのブロックを破壊して10ステージをクリアすることが目標です。
- マウス移動: パドルを左右に動かす
- A / Dキー: パドルを左右に動かす（キーボード操作）
- スペースキー: ゲーム開始 / 一時停止
- マウスクリック: ゲーム開始 / 一時停止
- 再開ボタン: ゲームリセット
- ステージ数: 全10ステージ
- 残機: 3回
- スコア: ブロック破壊で10点獲得
- コンボボーナス: 連続破壊で追加スコア（コンボ数 × 5点）
- ハイスコア: 自動保存されて常に表示
- 勝利条件: 全10ステージをクリア
- 敗北条件: ボールを3回落とす
- ステージ難易度:
- ボール速度: ステージごとに初期速度の20%ずつ増加
- パドル幅: ステージごとに初期幅の10%ずつ減少
- 速度上昇: ブロック破壊時に1%ずつ加速
- 角度制御: パドルの端で打ち返すと鋭角に跳ね返る
- 6色のブロック: 各行異なる色で6行60個のブロック
ブロック破壊時に30%の確率でアイテムがドロップ！パドルでキャッチして効果を得よう。
| アイテム | 効果 | 持続時間 |
|---|---|---|
| ⬌ (緑) | パドル拡大 - パドルが1.5倍に拡大 | 10秒 |
| ⬍ (赤) | パドル縮小 - パドルが0.7倍に縮小 | 10秒 |
| ↓ (青) | スロー - ボール速度が0.6倍に減速 | 8秒 |
| ↑ (橙) | 高速 - ボール速度が1.4倍に加速 | 8秒 |
| ● (紫) | マルチボール - ボールが3個に分裂 | - |
| ⚡ (黄) | 貫通 - ブロックを貫通して破壊 | 12秒 |
- パーティクルエフェクト: ブロック破壊時に色付きパーティクルが飛散
- 画面シェイク: ブロック破壊時に画面が振動
- ボールトレイル: ボールの軌跡が残像として表示
- コンボ表示: 連続破壊時に画面上部に「COMBO!」表示
- パワーアップタイマー: アクティブなパワーアップの残り時間を表示
- HTML5 Canvas: ゲーム描画エンジン
- Web Audio API: リアルタイム効果音生成
- CSS3: モダンなビジュアルエフェクト
- Vanilla JavaScript: フレームワーク不使用
- 60FPS: スムーズなアニメーション
- 軽量: 外部ライブラリ不使用
- 高効率: requestAnimationFrame 使用
以下の変数を編集して難易度を調整できます：
// ゲーム設定
const maxStages = 10; // 最大ステージ数
const blockRows = 6; // ブロックの行数
const blockCols = 10; // ブロックの列数
const paddle.speed = 8; // パドルの移動速度
const ball.maxSpeed = 8; // ボールの最大速度
// 初期速度
ball.speedX = 2.5; // 横方向の初期速度
ball.speedY = 2.5; // 縦方向の初期速度
// ステージ難易度調整
// ボール速度: ステージ × 20%増加
// パドル幅: ステージ × 10%減少CSS変数でテーマカラーを変更：
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--accent-color: #ff6b6b;
--text-color: white;
}このプロジェクトは MIT ライセンスの下で公開されています。詳細は LICENSE ファイルをご覧ください。