Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mini Block Game</title>
<style>
body{
        margin:0;
            display:flex;
                justify-content:center;
                    align-items:center;
                        height:100vh;
                            background:#87CEEB;
}
#world{
        display:grid;
            grid-template-columns:repeat(20,32px);
}
.block{
        width:32px;
            height:32px;
                border:1px solid #999;
                    box-sizing:border-box;
}
.grass{background:#4CAF50;}
.dirt{background:#8B4513;}
.air{background:#87CEEB;}
</style>
</head>
<body>

<div id="world"></div>

<script>
const world=document.getElementById("world");

for(let y=0;y<15;y++){
        for(let x=0;x<20;x++){
                    const b=document.createElement("div");
                            b.className="block "+(y<8?"air":y===8?"grass":"dirt");

                                    b.oncontextmenu=e=>{
                                                    e.preventDefault();
                                                                b.className="block grass";
                                    };

                                            b.onclick=()=>{
                                                            b.className="block air";
                                            };

                                                    world.appendChild(b);
        }
}
</script>

</body>
</html>

                                            }
                                    }
        }
}
}
}
}
Editor is loading...