サーバーなしで独自の Web ページ「テトリス」を構築

背景

  このプロジェクトは React バージョンのTetrisからインスピレーションを得ています。私はその実装原理に興味があり、React よりも Vue を好むため、React バージョンを Vue バージョンにリファクタリングしました。一般的な考え方は、コンポーネントを関数として扱い、入力 (props) が明確な出力 (ビュー) を確実に取得できるようにし、さまざまなメソッドに対して同じことを行い、Vuex を使用して Redux を簡素化することです。

プロジェクト

  ソースコード: https://github.com/Binaryify/vue-tetris

  デモ:テトリス (qian.blue)

エフェクトのプレビュー

ビルドステップ

  これは純粋なフロントエンド プロジェクトであるため、Github ページと Cloudflare ページという 2 つのサービスが最も思い浮かぶでしょう。

  ここで示した例では、cloudflare ページを使用していますが、なぜですか? これは CDN によって高速化され、壁に囲まれないためです。

実装

①ソースコードをフォークする

②cloudflareページへインポート

③ビルド構成

画像-20210919222951609

④ ビルド成功

⑤ カスタムドメイン名(任意)

特徴

  • データの永続性: オープン後、ネットワークが切断されても正常にプレイできることを意味します。
プレビュー

エピローグ

  簡単、面白い、楽しい、そしてお金もかからない、こんな面白いプロジェクト、ぜひ試してみてはいかがでしょうか?

記事のソース: Build your own web page "Tetris" without a server-Technology Control-1OVE Forum | 1OVE Navigation

おすすめ

転載: blog.csdn.net/qq_43523315/article/details/120476099