カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-2

サンプルアプリの概要を理解しよう

基本的な操作のみ可能なシンプルなテトリスです。下記機能の実装は行っておりません。

  • T スピン
  • ホールド機能
  • ゴーストブロック表示

トップページ

最初に表示される画面です。ユーザ名を入力する画面となります。

トップページ

ゲームページ

実際にテトリスが遊べる画面です。画面には 3 つの状態があります。

ゲームスタート

ゲーム開始時に表示される画面です。画面右下の ゲームスタート をクリックしてテトリスを開始できます。

ゲームスタート

ゲームプレイ

テトリスを遊ぶための画面です。方向キーやスペースキーでブロックを操作することができます。

ゲームプレイ

ゲームオーバー

テトリスの続行が不可能になった際に表示される画面です。再度テトリスを遊ぶには、画面右下の ゲームスタート をクリックする必要があります。

ゲームオーバー

画面遷移図

画面遷移図

サンプルアプリケーション

本教材を通して作れるようになるテトリスは netlify で下記にデプロイされています。

https://vue-typescript-tetris.netlify.app/

上記図のような画面遷移を実現するための状態管理については後述の章で詳細を説明します。