HTMLとCSSだけでMinecraftを再現 – GIGAZINE

「100％純粋なHTMLとCSS」で作成された「マインクラフト」のページが公開されています。

CSS Minecraft
https://benjaminaster.com/css-minecraft/

上記のページにアクセスすると以下の画面が現れます。

用意されているブロックは全部で7種類。左下から選んでフィールドをクリックすると設置できます。

右下のボタンをクリックするとフィールドの位置を変えられます。「Vertical」で垂直方向への視点移動、「Horizontal」で水平方向への視点移動、「Rotation」でフィールドの回転、「View」で視点の上下移動ができます。

左下のツルハシをクリックしてからブロックをクリックすると、ブロックを削除できます。

ブロックを設置できるのは9×9×9マスの間のみ。

最初からあるブロックを横に伸ばすことはできませんが、削ったり、新しいブロックに置き換えたりすることができます。

Z軸方向にも9マスの制限があります。

置いたブロックを削ってブロックを浮かせることも可能です。

このマインクラフトは、480行のCSSと4万6022行(3.07MB)のHTMLで実装されているとのことです。

CSS Minecraft
https://simonwillison.net/2025/May/26/css-minecraft/

本家マインクラフトは以下から購入できます。

この記事のタイトルとURLをコピーする

この記事は役に立ちましたか？

もし参考になりましたら、下記のボタンで教えてください。

関連記事