CSS マインクラフト

364日前原文(benjaminaster.com)

概要

このページは JavaScript未使用 で構成
HTMLとCSSのみ で全ロジック実装
:has()擬似クラス に対応した最新ブラウザが必要
パフォーマンス向上のため 他のタブやプログラムの終了 を推奨
サイトの詳細は GitHub、CodePen、benjaminaster.com で確認可能

このページの技術構成

JavaScript は一切使用していない構成
すべての動作は 純粋なHTMLおよびCSS のみで実現
:has() CSS擬似クラス を利用した高度なロジック設計
外部リンク としてGitHub、CodePen、benjaminaster.comを案内

動作要件と注意事項

:has()擬似クラス は多くの最新ブラウザでサポート
Chromium系ブラウザ はバージョン105以上が必要
Safari はバージョン15.4以上、 Firefox はバージョン121以上が必要
対応していないブラウザでは 正しく表示・動作しない 可能性
ブラウザのアップデート を強く推奨

パフォーマンス向上のための推奨事項

サイトの動作を最適化するため 他のタブや不要なプログラムの終了 を推奨
システムリソースの確保により 快適な閲覧体験 を実現

サイトへのアクセス方法

最新情報やソースコードは GitHub で公開
CodePen で実際の動作サンプルを確認可能
benjaminaster.com で追加情報や関連プロジェクトを掲載

Hackerたちの意見

CSSで見た中で間違いなく一番すごいものだね。これを見た瞬間、「A Single Div」を思い出したよ。あれは11年間見た中で一番クールなCSSデモだった！でも、これにはかなわないね。じっくり見てみるつもり。ありがとう！

状態管理がどうなってるのか気になる人がいたら、ソースコードをちょっと覗けば、ラジオボタンを使ってるのがわかるよ。HTMLには、配置できるすべてのブロックが含まれてる。

└

うん、君の言う通りだね。なんで世界が9x9x9だけなのか不思議だったけど、46k行もあって、各ブロックには空気、石、草、土、丸太、木、葉、ガラスがあるってことがわかった。結構好きかも。

└

これはCSSデモで見た中で一番ハッキーな解決策かもしれない。大好きだよ。

└

カメラの状態がどうなってるのか気になる人がいたら、ボタンが:active状態の時にアニメーションを実行して、それ以外の時は一時停止してるみたいだよ。

これを正しく理解してるか教えてほしいんだけど：ボクセルを実装してて、各ボクセルの面はそれぞれ異なるCSSクラスを持つsで設定されてる。ブロックの種類（土、草、石など）ごとにボクセルがあって、一度にアクティブになるのは一つだけ。sは9x9のグリッドで、異なるブロックの種類の数（約6500個）×10ブロックの高さになってる。それがカメラのナビゲーションに反応するCSSクラスを持つsで囲まれてる。これは素晴らしいね！

びっくりした。タブが何百も開いてるけど、LinuxのChromeでは全然問題ないね。

└

どこかの時点でタブの数は関係なくなると思う。タブがアンロードされて、状態がディスクに保存されるかもしれないから。開いていなければ、ブラウザが遅くなることはないはず。

よくやった！

すごい！マインクラフトは今までやったことなかったけど、このページを見てブロックの置き方が分かったよ。でも、マウスで回転できて、ホイールでスケール変更できるようにしてほしいな！

うわ、これすごいね。

かなり印象的だね。

ウェブ版マインクラフト、いつ出るの？

└

以前はminecraft.netでマインクラフトクラシックを直接プレイできたよね。

└

面白い豆知識：マインクラフトの最初のバージョン（「クラシック」）はウェブブラウザでプレイできたんだ。若い頃に実際にやってたけど、どこにも見つからなくて夢だったのかなって思ったこともあった。

└

電話が鳴ってる—Javaアプレットの呼び声だね B-)

ハクソク