ブラウザ版テトリス メインスクリーンショット

ブラウザ版テトリス

制作区分
自主制作・研究開発
サービス分類
開発ツール・研究開発
公開状態
公開済み

SEGAアーケード版の操作感を意識した、HTML5 Canvasだけで動くブラウザ版テトリス。キー設定とハイスコアに対応。

HTML5 CanvasとJavaScriptだけで実装したブラウザ版テトリス。壁キック付き回転、3段階の設置猶予、レベル上昇、スコア計算、ネクストピース、効果音、ポーズに加え、キー割り当てのカスタマイズ(localStorage保存)と名前つきハイスコア(上位10件)を備える。F3による画面サイズ切替、URLパラメータによる開始レベル指定にも対応。業務アプリとは別系統の、Canvas描画・ゲームループ・状態管理の実装例。

同等規模を新規制作する場合の参考価格

300,000円〜

Canvas描画、ゲームループ、回転・当たり判定、スコア、キー設定、ハイスコア、効果音、画面演出を含む想定です。

掲載価格は、本事例と同等の規模・機能を新規制作する場合の目安です。ページ数、機能、素材、外部サービス連携、サーバー環境などによって変動します。

制作目的

業務アプリとは別に、Canvas描画、ゲームループ、キー入力、当たり判定、状態管理、操作感調整、localStorage による設定・記録の永続化を扱ったインタラクション作品として制作。

想定利用者

ブラウザで手軽に遊びたいユーザー、Canvasやゲームの状態管理・設定カスタマイズの実装を確認したい人

担当範囲

  • 企画・要件整理
  • UI設計
  • Webデザイン
  • フロントエンド実装
  • ゲームロジック実装
  • サウンド実装
  • テスト
  • サーバー設置・公開

主な機能・特徴

  • Canvas単体。外部ライブラリ不使用
  • 壁キック付き回転と3段階の設置猶予
  • キー割り当てカスタマイズ(複数キー・重複防止・localStorage)
  • 名前つきハイスコア(上位10件)
  • ライン消去フラッシュ・レベルアップトースト等の控えめな演出

技術スタック

JavaScriptCanvas APIlocalStorageKeyboard EventsHTMLAudioElementURLSearchParamsrequestAnimationFrameCSS

制作領域

制作期間

2025年〜

ご相談について

制作内容や規模についてのご相談は、AK²Lab本サイトのお問い合わせ窓口からお送りください。

ご相談・お問い合わせ