世界を動かす技術を、日本語で。

CSS マインクラフト

概要

  • このページは 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-)