Minecraft

minceraft
<!DOCTYPE html>
<html>
<head>
    <title>JS Minecraft Canvas</title>
    <style>
        body { margin: 0; background: #111; overflow: hidden; font-family: sans-serif; }
        canvas { display: block; image-rendering: pixelated; width: 100vw; height: 100vh; }
        #ui { position: absolute; top: 10px; left: 10px; color: white; text-shadow: 2px 2px #000; pointer-events: none; }
    </style>
</head>
<body>
    <div id="ui"><b>WASD</b> to Move | <b>Arrows</b> to Turn</div>
    <canvas id="gameCanvas"></canvas>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// --- Configuration ---
const res = 2; // Resolution divider (higher = more pixelated/faster)
const mapSize = 16;
const FOV = Math.PI / 3;
let width, height;

// --- Textures (Procedural) ---
const texSize = 64;
const textures = [];

function createTextures() {
    const canvasTex = document.createElement('canvas');
    canvasTex.width = texSize;
    canvasTex.height = texSize;
    const tCtx = canvasTex.getContext('2d');

    // 1. Grass Block Texture
    tCtx.fillStyle = '#4a9540'; // Green
    tCtx.fillRect(0, 0, texSize, texSize);
    for(let i=0; i<100; i++) {
        tCtx.fillStyle = Math.random() > 0.5 ? '#5eb053' : '#3d7a35';
        tCtx.fillRect(Math.random()*texSize, Math.random()*texSize, 4, 4);
    }
    textures[1] = new Image(); textures[1].src = canvasTex.toDataURL();

    // 2. Stone Block Texture
    tCtx.fillStyle = '#777';
    tCtx.fillRect(0, 0, texSize, texSize);
    for(let i=0; i<80; i++) {
        tCtx.fillStyle = Math.random() > 0.5 ? '#888' : '#666';
        tCtx.fillRect(Math.random()*texSize, Math.random()*texSize, 6, 3);
    }
    textures[2] = new Image(); textures[2].src = canvasTex.toDataURL();
}

// --- Map Data ---
const map = [
    1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
    1,0,0,0,0,0,2,0,0,0,0,0,0,0,0,1,
    1,0,0,0,0,0,2,0,0,0,0,2,2,0,0,1,
    1,0,0,1,1,0,0,0,0,0,0,2,0,0,0,1,
    1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,
    1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
    1,2,2,0,0,0,0,0,1,1,1,0,0,0,0,1,
    1,0,0,0,0,0,0,0,1,0,1,0,0,0,0,1,
    1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,1,
    1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
];

// --- Player State ---
const player = { x: 2, y: 2, dir: 0, speed: 0 };
const keys = {};

window.addEventListener('keydown', e => keys[e.code] = true);
window.addEventListener('keyup', e => keys[e.code] = false);

function resize() {
    width = canvas.width = window.innerWidth / res;
    height = canvas.height = window.innerHeight / res;
}

function update() {
    if (keys['ArrowLeft']) player.dir -= 0.05;
Editor is loading...