CSS Minecraft

• CSSだけを使って実装された完全な Minecraft クローン
• JavaScriptを使わず、純粋な HTML と CSS だけですべての機能を実装
• CSS の :has() 疑似クラスを活用し、複雑なトリガーやレスポンシブなロジック設計などの相互作用処理を実現
• GitHub、CodePen、公式サイトでソースコードとデモを提供
• 最新ブラウザー（Chromium 105+、Safari 15.4+、Firefox 121+）が必須

[reedids]

CSS の力技ショー…

[anveloper]

わあ..

[ifmkl]

わお..?

[mkyoon]

なんてこった..

[ndrgrd]

各マスにブロックを選べるように配置して、見た目だけをCSSで整えたってことですか？ すごいですね

[GN⁺]

Hacker Newsのコメント

• これまで見たCSS作品の中でも最も印象的な事例の一つだという感想で、昔の素晴らしいCSSデモ「A Single Div」を思い出したと共有し、今回のデモはその記録を塗り替えたと表現。自分でも解析してみたいという期待とともに A Single Divリンク を共有
  • 多くの要素が相互作用しそうに見えるのに、クリックしても反応しないのが少し残念で、モバイル環境のせいなのか元からそうなのか気になるという声
• 本当に独創的でありながらエレガントなアイデアだと感嘆し、デモがどう動いているのかについての個人的なメモとして CSS Minecraftの分析リンク を共有
• 状態管理の方法が気になる人のためにソースコードを見てみると、ラジオボタンを活用しており、HTMLの中に配置可能なすべてのブロックが入っていることを共有
  • カメラの状態が気になる人向けの補足として、ボタンの :active 状態の間だけアニメーションが実行され、それ以外では停止していることを発見したと紹介
  • CSSデモでここまで大胆な手法を使っているのは初めて見た気がすると驚きつつ、とても好感を持ったという感想
  • なぜ世界が 9x9x9 に制限されているのか不思議だったが、46,000行のコードで各ブロックごとにさまざまな素材（空気、石、草、土、丸太、木、葉、ガラス）を指定していることを確認し、こういうやり方も興味深いと感じたという話
• このサイトを訪れたら、急にMinecraftをもう一度インストールしたくなったという愉快な感想
• 技術的に非常に印象的だという意見とともに、人生の中盤を過ぎてむしろ子ども時代に戻ったような気分で、HTMLとCSSでさまざまなアプリやサイトを作るのを楽しんでいるという個人的な経験を共有
• デモの実装方法について、自分の理解が合っているかを確認する形で整理。voxel（ボクセル）は として実装され、各面は異なるCSSクラスを持つ として指定され、各種類のブロックごとに voxel があり、一度に有効化できるのは1つだけ。これらの が 9x9 の10段グリッド × ブロック種類（約6500個）として並べられ、全体の構造はカメラ操作に反応するCSSクラスを持つ に包まれている、という整理で、このアプローチは非常に画期的だと称賛
• CSSはわずか480行しかなく、CSSソースコードリンク とともに、HTMLが46,022行（3.07MB）だという情報を共有
• 本当に驚異的だという反応とともに、Linux版Chromeでタブを何百個開いていても問題ないという経験を共有
  • タブが多くなっても、ブラウザがタブをアンロードして状態をディスクに保存するので、実際にそのタブを開かない限り性能上の問題はないという補足
• WebベースのMinecraftはいつ登場するのだろう、という疑問
  • 昔は minecraft.net で Minecraft classic をそのまま遊べたという思い出を共有
  • 昔のJava Applet時代に触れつつ、電話のベルが鳴っているという冗談を飛ばすコメント
  • Minecraftの初期バージョン（「classic」）をWebブラウザで直接プレイできて、子どものころ実際に楽しんでいたことを回想し、後になってそのゲームが見つからず夢の記憶だったのではと疑ったエピソードを共有
• 本当にすごい、という率直な感嘆