wbinter

home

have fun!

my channel (click here)

my frends channel

questions

whath game must i do l:

counterstrike 2

rec room

minecraft

people playground

scruw drivers

COPS AND ROBBERS CODE :

<!DOCTYPE html>

<head>

<title>JS Minecraft - Final Fix</title>

<style>

body { margin: 0; overflow: hidden; font-family: 'Segoe UI', sans-serif; background-color: #87CEEB; }

#crosshair { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border: 2px solid white; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 10; }

/* Hotbar */

#hotbar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: rgba(0, 0, 0, 0.8); padding: 5px; border: 3px solid #333; z-index: 20; }

.slot { width: 50px; height: 50px; border: 3px solid #777; background: #444; display: flex; justify-content: center; align-items: center; color: white; font-size: 10px; font-weight: bold; text-align: center; }

.slot.selected { border-color: #fff; background: #666; box-shadow: inset 0 0 5px white; }

/* Inventaris */

#inventory-screen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 450px; background: rgba(30, 30, 30, 0.95); border: 5px solid #111; display: none; padding: 20px; z-index: 30; color: white; text-align: center; }

.inv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 20px; }

.inv-item { width: 75px; height: 75px; background: #444; border: 2px solid #888; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 11px; }

.inv-item:hover { border-color: white; background: #555; }

#info { position: absolute; top: 10px; left: 10px; color: white; background: rgba(0,0,0,0.5); padding: 10px; font-size: 12px; border-radius: 5px; pointer-events: none; }

</style>

</head>

<body>

<div id="info"><b>Scroll/1-9</b>: Wisselen | <b>WASD</b>: Lopen | <b>E</b>: Inventaris | <b>L-Klik</b>: Bouwen | <b>R-Klik</b>: Slopen</div>

<div class="slot" data-type="dirt">AARDE</div>

<div class="slot" data-type="stone">STEEN</div>

</div>

<h2>INVENTARIS</h2>

<p style="margin-top:15px">Klik op een item om het in je hand te nemen</p>

</div>

{

"imports": {

"three": "https://unpkg.com/three@0.160.0/build/three.module.js",

"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"

}

</script>

import * as THREE from 'three';

import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';

// --- INITIALISATIE ---

const scene = new THREE.Scene();

scene.background = new THREE.Color(0x87CEEB);

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

const renderer = new THREE.WebGLRenderer({ antialias: false });

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

scene.add(new THREE.AmbientLight(0xffffff, 1.2));

// --- MATERIALEN ---

const loader = new THREE.TextureLoader();

const materials = {

grass: new THREE.MeshLambertMaterial({ map: loader.load('https://threejs.org/examples/textures/minecraft/grass.png') }),

dirt: new THREE.MeshLambertMaterial({ map: loader.load('https://threejs.org/examples/textures/minecraft/dirt.png') }),

stone: new THREE.MeshLambertMaterial({ color: 0x888888 }),

wood: new THREE.MeshLambertMaterial({ color: 0x5D4037 }),

door: new THREE.MeshLambertMaterial({ color: 0x8B4513, transparent: true, opacity: 0.9 }),

leaves: new THREE.MeshLambertMaterial({ color: 0x2D5A27, transparent: true, opacity: 0.8 }),

glass: new THREE.MeshLambertMaterial({ color: 0xCCFFFF, transparent: true, opacity: 0.4 }),

gold: new THREE.MeshLambertMaterial({ color: 0xFFD700 }),

sand: new THREE.MeshLambertMaterial({ color: 0xEDC9AF }),

lava: new THREE.MeshLambertMaterial({ color: 0xFF4500 })

};

Object.values(materials).forEach(m => { if(m.map) m.map.magFilter = THREE.NearestFilter; });

const boxGeo = new THREE.BoxGeometry(1, 1, 1);

const chunks = new Map();

const collisionObjects = [];

let currentBlockType = 'grass';

// --- WERELD GENERATIE ---

function getTerrainHeight(x, z) {

return Math.floor(Math.sin(x * 0.1) * Math.cos(z * 0.1) * 4);

}

function generateBlock(x, z) {

const key = `${x},${z}`;

if (chunks.has(key)) return;

const h = getTerrainHeight(x, z);

const mesh = new THREE.Mesh(boxGeo, h > 3 ? materials.stone : materials.grass);

mesh.position.set(x, h, z);

scene.add(mesh);

chunks.set(key, mesh);

collisionObjects.push(mesh);

}

// --- CONTROLS & UI ---

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

document.body.addEventListener('click', () => {

if(document.getElementById('inventory-screen').style.display !== 'block') controls.lock();

});

const slots = document.querySelectorAll('.slot');

let activeIdx = 0;

function selectSlot(index) {

activeIdx = (index + 9) % 9;

slots.forEach((s, i) => s.classList.toggle('selected', i === activeIdx));

currentBlockType = slots[activeIdx].getAttribute('data-type');

}

window.addEventListener('wheel', (e) => {

if (controls.isLocked) selectSlot(activeIdx + (e.deltaY > 0 ? 1 : -1));

});

// Inventaris vullen

const invGrid = document.getElementById('inv-items');

Object.keys(materials).forEach(type => {

const item = document.createElement('div');

item.className = 'inv-item';

item.innerText = type.toUpperCase();

item.onclick = () => {

slots[activeIdx].setAttribute('data-type', type);

slots[activeIdx].innerText = type.toUpperCase();

currentBlockType = type;

document.getElementById('inventory-screen').style.display = 'none';

controls.lock();

};

invGrid.appendChild(item);

});

// Toetsenbord

const vel = new THREE.Vector3();

const keys = { w:false, s:false, a:false, d:false };

document.addEventListener('keydown', (e) => {

if(keys.hasOwnProperty(e.key.toLowerCase())) keys[e.key.toLowerCase()] = true;

if(e.code === 'Space' && Math.abs(vel.y) < 0.1) vel.y = 8;

if(e.code === 'KeyE') {

if(controls.isLocked) {

controls.unlock();

document.getElementById('inventory-screen').style.display = 'block';

} else {

controls.lock();

document.getElementById('inventory-screen').style.display = 'none';

}

if(!isNaN(e.key) && e.key > 0) selectSlot(parseInt(e.key) - 1);

});

document.addEventListener('keyup', (e) => { if(keys.hasOwnProperty(e.key.toLowerCase())) keys[e.key.toLowerCase()] = false; });

// --- BOUWEN & SLOPEN ---

const raycaster = new THREE.Raycaster();

window.addEventListener('mousedown', (e) => {

if (!controls.isLocked) return;

raycaster.setFromCamera(new THREE.Vector2(0,0), camera);

const hits = raycaster.intersectObjects(collisionObjects);

if (hits.length > 0) {

if (e.button === 0) { // Bouwen

const b = new THREE.Mesh(boxGeo, materials[currentBlockType]);

const pos = hits[0].object.position.clone().add(hits[0].face.normal).round();

b.position.copy(pos);

scene.add(b);

collisionObjects.push(b);

} else if (e.button === 2) { // Slopen

scene.remove(hits[0].object);

collisionObjects.splice(collisionObjects.indexOf(hits[0].object), 1);

}

});

// --- PHYSICS & ANIMATIE ---

const downRay = new THREE.Raycaster();

camera.position.set(0, 10, 0);

function animate() {

requestAnimationFrame(animate);

if (controls.isLocked) {

const px = Math.floor(camera.position.x);

const pz = Math.floor(camera.position.z);

// Genereer blokken

for(let x = px-12; x < px+12; x++) {

for(let z = pz-12; z < pz+12; z++) generateBlock(x, z);

}

const d = 0.016;

vel.x -= vel.x * 10 * d;

vel.z -= vel.z * 10 * d;

vel.y -= 25 * d;

if (keys.w) vel.z -= 70 * d;

if (keys.s) vel.z += 70 * d;

if (keys.a) vel.x -= 70 * d;

if (keys.d) vel.x += 70 * d;

controls.moveRight(-vel.x * d);

controls.moveForward(-vel.z * d);

// --- DE ESSENTIËLE HOOGTE CHECK ---

downRay.set(camera.position, new THREE.Vector3(0, -1, 0));

const hits = downRay.intersectObjects(collisionObjects);

const terrainH = getTerrainHeight(camera.position.x, camera.position.z) + 1.6;

let floorH = terrainH;

if (hits.length > 0) {

const blockTop = camera.position.y - hits[0].distance + 1.6;

floorH = Math.max(terrainH, blockTop);

}

camera.position.y += vel.y * d;

if (camera.position.y < floorH) {

vel.y = 0;

camera.position.y = floorH;

}

renderer.render(scene, camera);

}

animate();

window.addEventListener('resize', () => {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

</script>

</body>

</html>

MINECRAFT CODE:

<!DOCTYPE html>

<head>

<title>JS Minecraft - Final Fix</title>

<style>

body { margin: 0; overflow: hidden; font-family: 'Segoe UI', sans-serif; background-color: #87CEEB; }

#crosshair { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border: 2px solid white; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 10; }

/* Hotbar */

#hotbar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: rgba(0, 0, 0, 0.8); padding: 5px; border: 3px solid #333; z-index: 20; }

.slot { width: 50px; height: 50px; border: 3px solid #777; background: #444; display: flex; justify-content: center; align-items: center; color: white; font-size: 10px; font-weight: bold; text-align: center; }

.slot.selected { border-color: #fff; background: #666; box-shadow: inset 0 0 5px white; }

/* Inventaris */

#inventory-screen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 450px; background: rgba(30, 30, 30, 0.95); border: 5px solid #111; display: none; padding: 20px; z-index: 30; color: white; text-align: center; }

.inv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 20px; }

.inv-item { width: 75px; height: 75px; background: #444; border: 2px solid #888; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 11px; }

.inv-item:hover { border-color: white; background: #555; }

#info { position: absolute; top: 10px; left: 10px; color: white; background: rgba(0,0,0,0.5); padding: 10px; font-size: 12px; border-radius: 5px; pointer-events: none; }

</style>

</head>

<body>

<div id="info"><b>Scroll/1-9</b>: Wisselen | <b>WASD</b>: Lopen | <b>E</b>: Inventaris | <b>L-Klik</b>: Bouwen | <b>R-Klik</b>: Slopen</div>

<div class="slot" data-type="dirt">AARDE</div>

<div class="slot" data-type="stone">STEEN</div>

</div>

<h2>INVENTARIS</h2>

<p style="margin-top:15px">Klik op een item om het in je hand te nemen</p>

</div>

{

"imports": {

"three": "https://unpkg.com/three@0.160.0/build/three.module.js",

"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"

}

</script>

import * as THREE from 'three';

import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';

// --- INITIALISATIE ---

const scene = new THREE.Scene();

scene.background = new THREE.Color(0x87CEEB);

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

const renderer = new THREE.WebGLRenderer({ antialias: false });

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

scene.add(new THREE.AmbientLight(0xffffff, 1.2));

// --- MATERIALEN ---

const loader = new THREE.TextureLoader();

const materials = {

grass: new THREE.MeshLambertMaterial({ map: loader.load('https://threejs.org/examples/textures/minecraft/grass.png') }),

dirt: new THREE.MeshLambertMaterial({ map: loader.load('https://threejs.org/examples/textures/minecraft/dirt.png') }),

stone: new THREE.MeshLambertMaterial({ color: 0x888888 }),

wood: new THREE.MeshLambertMaterial({ color: 0x5D4037 }),

door: new THREE.MeshLambertMaterial({ color: 0x8B4513, transparent: true, opacity: 0.9 }),

leaves: new THREE.MeshLambertMaterial({ color: 0x2D5A27, transparent: true, opacity: 0.8 }),

glass: new THREE.MeshLambertMaterial({ color: 0xCCFFFF, transparent: true, opacity: 0.4 }),

gold: new THREE.MeshLambertMaterial({ color: 0xFFD700 }),

sand: new THREE.MeshLambertMaterial({ color: 0xEDC9AF }),

lava: new THREE.MeshLambertMaterial({ color: 0xFF4500 })

};

Object.values(materials).forEach(m => { if(m.map) m.map.magFilter = THREE.NearestFilter; });

const boxGeo = new THREE.BoxGeometry(1, 1, 1);

const chunks = new Map();

const collisionObjects = [];

let currentBlockType = 'grass';

// --- WERELD GENERATIE ---

function getTerrainHeight(x, z) {

return Math.floor(Math.sin(x * 0.1) * Math.cos(z * 0.1) * 4);

}

function generateBlock(x, z) {

const key = `${x},${z}`;

if (chunks.has(key)) return;

const h = getTerrainHeight(x, z);

const mesh = new THREE.Mesh(boxGeo, h > 3 ? materials.stone : materials.grass);

mesh.position.set(x, h, z);

scene.add(mesh);

chunks.set(key, mesh);

collisionObjects.push(mesh);

}

// --- CONTROLS & UI ---

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

document.body.addEventListener('click', () => {

if(document.getElementById('inventory-screen').style.display !== 'block') controls.lock();

});

const slots = document.querySelectorAll('.slot');

let activeIdx = 0;

function selectSlot(index) {

activeIdx = (index + 9) % 9;

slots.forEach((s, i) => s.classList.toggle('selected', i === activeIdx));

currentBlockType = slots[activeIdx].getAttribute('data-type');

}

window.addEventListener('wheel', (e) => {

if (controls.isLocked) selectSlot(activeIdx + (e.deltaY > 0 ? 1 : -1));

});

// Inventaris vullen

const invGrid = document.getElementById('inv-items');

Object.keys(materials).forEach(type => {

const item = document.createElement('div');

item.className = 'inv-item';

item.innerText = type.toUpperCase();

item.onclick = () => {

slots[activeIdx].setAttribute('data-type', type);

slots[activeIdx].innerText = type.toUpperCase();

currentBlockType = type;

document.getElementById('inventory-screen').style.display = 'none';

controls.lock();

};

invGrid.appendChild(item);

});

// Toetsenbord

const vel = new THREE.Vector3();

const keys = { w:false, s:false, a:false, d:false };

document.addEventListener('keydown', (e) => {

if(keys.hasOwnProperty(e.key.toLowerCase())) keys[e.key.toLowerCase()] = true;

if(e.code === 'Space' && Math.abs(vel.y) < 0.1) vel.y = 8;

if(e.code === 'KeyE') {

if(controls.isLocked) {

controls.unlock();

document.getElementById('inventory-screen').style.display = 'block';

} else {

controls.lock();

document.getElementById('inventory-screen').style.display = 'none';

}

if(!isNaN(e.key) && e.key > 0) selectSlot(parseInt(e.key) - 1);

});

document.addEventListener('keyup', (e) => { if(keys.hasOwnProperty(e.key.toLowerCase())) keys[e.key.toLowerCase()] = false; });

// --- BOUWEN & SLOPEN ---

const raycaster = new THREE.Raycaster();

window.addEventListener('mousedown', (e) => {

if (!controls.isLocked) return;

raycaster.setFromCamera(new THREE.Vector2(0,0), camera);

const hits = raycaster.intersectObjects(collisionObjects);

if (hits.length > 0) {

if (e.button === 0) { // Bouwen

const b = new THREE.Mesh(boxGeo, materials[currentBlockType]);

const pos = hits[0].object.position.clone().add(hits[0].face.normal).round();

b.position.copy(pos);

scene.add(b);

collisionObjects.push(b);

} else if (e.button === 2) { // Slopen

scene.remove(hits[0].object);

collisionObjects.splice(collisionObjects.indexOf(hits[0].object), 1);

}

});

// --- PHYSICS & ANIMATIE ---

const downRay = new THREE.Raycaster();

camera.position.set(0, 10, 0);

function animate() {

requestAnimationFrame(animate);

if (controls.isLocked) {

const px = Math.floor(camera.position.x);

const pz = Math.floor(camera.position.z);

// Genereer blokken

for(let x = px-12; x < px+12; x++) {

for(let z = pz-12; z < pz+12; z++) generateBlock(x, z);

}

const d = 0.016;

vel.x -= vel.x * 10 * d;

vel.z -= vel.z * 10 * d;

vel.y -= 25 * d;

if (keys.w) vel.z -= 70 * d;

if (keys.s) vel.z += 70 * d;

if (keys.a) vel.x -= 70 * d;

if (keys.d) vel.x += 70 * d;

controls.moveRight(-vel.x * d);

controls.moveForward(-vel.z * d);

// --- DE ESSENTIËLE HOOGTE CHECK ---

downRay.set(camera.position, new THREE.Vector3(0, -1, 0));

const hits = downRay.intersectObjects(collisionObjects);

const terrainH = getTerrainHeight(camera.position.x, camera.position.z) + 1.6;

let floorH = terrainH;

if (hits.length > 0) {

const blockTop = camera.position.y - hits[0].distance + 1.6;

floorH = Math.max(terrainH, blockTop);

}

camera.position.y += vel.y * d;

if (camera.position.y < floorH) {

vel.y = 0;

camera.position.y = floorH;

}

renderer.render(scene, camera);

}

animate();

window.addEventListener('resize', () => {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

</script>

</body>

</html>