Mini Block Game

by SonicBear35

133 lines2.6 KB🛠️ Three.js (3D graphics)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mini Block Game</title>
<style>
html,body{
margin:0;
overflow:hidden;
background:#87ceeb;
font-family:sans-serif;
}
#info{
position:absolute;
top:10px;
left:10px;
color:white;
background:rgba(0,0,0,.5);
padding:8px;
border-radius:8px;
}
button{
font-size:18px;
margin:2px;
}
</style>
</head>
<body>

<div id="info">
Move: WASD<br>
Jump: Space<br>
Click = Break Block<br>
Right Click = Place Block
</div>

<script type="module">
import * as THREE from "https://unpkg.com/three@0.160.0/build/three.module.js";
import {PointerLockControls} from "https://unpkg.com/three@0.160.0/examples/jsm/controls/PointerLockControls.js";

const scene=new THREE.Scene();
scene.background=new THREE.Color(0x87ceeb);

const camera=new THREE.PerspectiveCamera(75,innerWidth/innerHeight,.1,1000);

const renderer=new THREE.WebGLRenderer({antialias:true});
renderer.setSize(innerWidth,innerHeight);
document.body.appendChild(renderer.domElement);

const controls=new PointerLockControls(camera,document.body);

document.body.onclick=()=>controls.lock();

scene.add(new THREE.HemisphereLight(0xffffff,0x666666,2));

const sun=new THREE.DirectionalLight(0xffffff,2);
sun.position.set(10,20,10);
scene.add(sun);

const blocks=[];
const cubeGeo=new THREE.BoxGeometry(1,1,1);

function addBlock(x,y,z,color){
const mat=new THREE.MeshLambertMaterial({color});
const cube=new THREE.Mesh(cubeGeo,mat);
cube.position.set(x,y,z);
scene.add(cube);
blocks.push(cube);
}

for(let x=-10;x<=10;x++){
for(let z=-10;z<=10;z++){
addBlock(x,-1,z,0x44aa44);
}
}

addBlock(0,0,-5,0x8b4513);
addBlock(0,1,-5,0x228b22);

camera.position.set(0,2,5);

const keys={};

onkeydown=e=>keys[e.key.toLowerCase()]=true;
onkeyup=e=>keys[e.key.toLowerCase()]=false;

const raycaster=new THREE.Raycaster();

window.oncontextmenu=e=>e.preventDefault();

window.onmousedown=e=>{
raycaster.setFromCamera(new THREE.Vector2(0,0),camera);
const hit=raycaster.intersectObjects(blocks);

if(hit.length){
const block=hit[0].object;

if(e.button===0){
scene.remove(block);
blocks.splice(blocks.indexOf(block),1);
}

if(e.button===2){
const p=hit[0].point.clone().add(hit[0].face.normal.multiplyScalar(.5));
addBlock(Math.round(p.x),Math.round(p.y),Math.round(p.z),0x888888);
}
}
};

function animate(){

requestAnimationFrame(animate);

if(keys["w"])controls.moveForward(.1);
if(keys["s"])controls.moveForward(-.1);
if(keys["a"])controls.moveRight(-.1);
if(keys["d"])controls.moveRight(.1);

renderer.render(scene,camera);

}

animate();

onresize=()=>{
camera.aspect=innerWidth/innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth,innerHeight);
}
</script>

</body>
</html>

Game Source: Mini Block Game

Creator: SonicBear35

Libraries: three

Complexity: moderate (133 lines, 2.6 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: mini-block-game-sonicbear35" to link back to the original. Then publish at arcadelab.ai/publish.