Minecraft Alpha 2D

Left: break · Right: place · 1-5: select

:root { --bg: #6ec0ff; --ground: #8bc34a; --ui-bg: rgba(0,0,0,0.35); --ui-text: #fff; } html, body { height: 100%; margin: 0; background: linear-gradient(#9be0ff, var(--bg)); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } canvas { display: block; width: 100vw; height: 100vh; background: linear-gradient(#87ceeb, #9be0ff); image-rendering: pixelated; } #ui { position: fixed; left: 0; right: 0; bottom: 12px; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; } #hotbar { pointer-events: auto; display: flex; gap: 8px; padding: 6px; background: var(--ui-bg); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); } .slot { width: 44px; height: 44px; background: rgba(255,255,255,0.06); border-radius: 6px; display: grid; place-items: center; color: var(--ui-text); font-weight: 600; border: 2px solid rgba(255,255,255,0.06); box-sizing: border-box; } .slot.selected { border-color: rgba(255,255,255,0.9); box-shadow: 0 6px 18px rgba(0,0,0,0.45); } #info { color: var(--ui-text); font-size: 13px; background: rgba(0,0,0,0.25); padding: 6px 10px; border-radius: 6px; pointer-events: none; } const keys = {}; const mouse = { x: 0, y: 0, left: false, right: false }; function install(canvas) { window.addEventListener('keydown', (e) => { keys[e.key.toLowerCase()] = true; }); window.addEventListener('keyup', (e) => { keys[e.key.toLowerCase()] = false; }); canvas.addEventListener('mousemove', (e) => { const rect = canvas.getBoundingClientRect(); mouse.x = (e.clientX - rect.left) * (canvas.width / rect.width); mouse.y = (e.clientY - rect.top) * (canvas.height / rect.height); }); canvas.addEventListener('mousedown', (e) => { if (e.button === 0) mouse.left = true; if (e.button === 2) mouse.right = true; }); canvas.addEventListener('mouseup', (e) => { if (e.button === 0) mouse.left = false; if (e.button === 2) mouse.right = false; }); // prevent context menu on right click canvas.addEventListener('contextmenu', (e) => e.preventDefault()); } export { keys, mouse, install }; // World management, generation, draw, tiles const TILE = { AIR: 0, GRASS: 1, DIRT: 2, STONE: 3, WATER: 4, WOOD: 5, LEAVES: 6, SAND: 7 }; class World { constructor(cols = 512, rows = 128, tileSize = 16, seed = 1337) { this.cols = cols; this.rows = rows; this.tileSize = tileSize; this.tiles = new Uint8Array(cols * rows); this.seed = seed; this.prng = this.createRng(seed); this.generate(); } createRng(seed) { // mulberry32 let t = seed >>> 0; return function() { t += 0x6D2B79F5; let r = Math.imul(t ^ (t >>> 15), 1 | t); r ^= r + Math.imul(r ^ (r >>> 7), 61 | r); return ((r ^ (r >>> 14)) >>> 0) / 4294967296; }; } noise(x) { // simple multi-octave value noise using seeded prng offsets const base = Math.sin(x * 0.02) * 10 + Math.cos(x * 0.01) * 6; const w = (Math.sin(x * 0.005 + this.seed) + 1) * 2; return base + w; } generate() { // empty first this.tiles.fill(TILE.AIR); // generate height map const groundBase = Math.floor(this.rows * 0.6); for (let x = 0; x < this.cols; x++) { const h = Math.floor(groundBase + this.noise(x) + (this.prng() - 0.5) * 6); for (let y = h; y < this.rows; y++) { const depth = y - h; let tile = TILE.DIRT; if (depth === 0) tile = TILE.GRASS; else if (depth > 6) tile = TILE.STONE; // beaches if (y > this.rows * 0.82 && x % 7 === 0) tile = TILE.SAND; this.setTile(x, y, tile); } } // lakes: carve basins and fill with water for (let i = 0; i < 20; i++) { const cx = Math.floor(this.prng() * this.cols); const radius = 6 + Math.floor(this.prng() * 12); let minY = this.rows, maxY = 0; for (let x = Math.max(0, cx - radius); x < Math.min(this.cols, cx + radius); x++) { for (let y = 0; y < this.rows; y++) { const t = this.getTile(x, y); if (t !== TILE.AIR) { minY = Math.min(minY, y); maxY = Math.max(maxY, y); break; } } } const waterY = Math.min(this.rows - 1, minY + Math.floor(radius / 2)); for (let x = Math.max(0, cx - radius); x < Math.min(this.cols, cx + radius); x++) { for (let y = waterY; y < waterY + radius; y++) { const dx = x - cx, dy = y - waterY; if (dx * dx + dy * dy < radius * radius) { this.setTile(x, y, TILE.WATER); } } } } // add a simple tree patch for (let i = 0; i < 80; i++) { const x = Math.floor(this.prng() * (this.cols - 8)) + 4; // find surface let y = 0; for (let yy = 0; yy < this.rows; yy++) { if (this.getTile(x, yy) !== TILE.AIR && this.getTile(x, yy) !== TILE.WATER) { y = yy - 1; break; } } if (y < 3) continue; this.placeTree(x, y); } } placeTree(x, y) { // trunk const height = 4 + Math.floor(this.prng() * 3); for (let i = 0; i < height; i++) { this.setTile(x, y - i, TILE.WOOD); } // leaves for (let dx = -2; dx <= 2; dx++) { for (let dy = -3; dy <= 0; dy++) { const px = x + dx; const py = y - height + dy; if (px < 0 || px >= this.cols || py < 0) continue; if (Math.abs(dx) + Math.abs(dy) < 4) { if (this.getTile(px, py) === TILE.AIR) this.setTile(px, py, TILE.LEAVES); } } } } index(x, y) { return y * this.cols + x; } inBounds(x, y) { return x >= 0 && x < this.cols && y >= 0 && y < this.rows; } getTile(x, y) { if (!this.inBounds(x, y)) return TILE.AIR; return this.tiles[this.index(x, y)]; } setTile(x, y, v) { if (!this.inBounds(x, y)) return; this.tiles[this.index(x, y)] = v; } isSolidTile(tile) { return tile !== TILE.AIR && tile !== TILE.WATER && tile !== TILE.LEAVES; } draw(ctx, camera, screenWidth, screenHeight) { const ts = this.tileSize; const startX = Math.max(0, Math.floor(camera.x / ts) - 2); const endX = Math.min(this.cols, Math.ceil((camera.x + screenWidth) / ts) + 2); const startY = Math.max(0, Math.floor(camera.y / ts) - 2); const endY = Math.min(this.rows, Math.ceil((camera.y + screenHeight) / ts) + 2); for (let x = startX; x < endX; x++) { for (let y = startY; y < endY; y++) { const t = this.getTile(x, y); if (t === TILE.AIR) continue; const sx = x * ts - camera.x; const sy = y * ts - camera.y; switch (t) { case TILE.GRASS: ctx.fillStyle = '#4CAF50'; ctx.fillRect(sx, sy, ts, ts); ctx.fillStyle = '#3f8d3f'; ctx.fillRect(sx, sy + ts * 0.6, ts, ts * 0.4); break; case TILE.DIRT: ctx.fillStyle = '#8B5A2B'; ctx.fillRect(sx, sy, ts, ts); break; case TILE.STONE: ctx.fillStyle = '#7f8c8d'; ctx.fillRect(sx, sy, ts, ts); break; case TILE.WATER: ctx.fillStyle = '#3aa0ff'; ctx.fillRect(sx, sy, ts, ts); ctx.fillStyle = 'rgba(255,255,255,0.12)'; ctx.fillRect(sx + 2, sy + 2, ts - 4, ts - 4); break; case TILE.WOOD: ctx.fillStyle = '#6b4226'; ctx.fillRect(sx, sy, ts, ts); ctx.strokeStyle = '#5a351f'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(sx + 2, sy + 2); ctx.lineTo(sx + ts - 2, sy + ts - 2); ctx.stroke(); break; case TILE.LEAVES: ctx.fillStyle = '#2e8b3a'; ctx.fillRect(sx, sy, ts, ts); break; case TILE.SAND: ctx.fillStyle = '#e2c97a'; ctx.fillRect(sx, sy, ts, ts); break; default: ctx.fillStyle = '#ff00ff'; ctx.fillRect(sx, sy, ts, ts); } // subtle border pixel to emulate block art ctx.strokeStyle = 'rgba(0,0,0,0.06)'; ctx.lineWidth = 0.5; ctx.strokeRect(sx + 0.25, sy + 0.25, ts - 0.5, ts - 0.5); } } } } export { World, TILE }; import { TILE } from './world.js'; class Player { constructor(x = 100, y = 100, world) { this.world = world; this.x = x; this.y = y; this.w = world.tileSize * 0.8; this.h = world.tileSize * 1.6; this.vx = 0; this.vy = 0; this.speed = 120; // px/s this.jumpSpeed = -340; this.onGround = false; } tileAt(px, py) { const tx = Math.floor(px / this.world.tileSize); const ty = Math.floor(py / this.world.tileSize); return { tx, ty, tile: this.world.getTile(tx, ty) }; } resolveCollisions() { // AABB vs tile map simple resolver const ts = this.world.tileSize; const left = this.x; const right = this.x + this.w; const top = this.y; const bottom = this.y + this.h; const minTx = Math.floor(left / ts); const maxTx = Math.floor((right - 1) / ts); const minTy = Math.floor(top / ts); const maxTy = Math.floor((bottom - 1) / ts); this.onGround = false; for (let tx = minTx; tx <= maxTx; tx++) { for (let ty = minTy; ty <= maxTy; ty++) { if (this.world.isSolidTile(this.world.getTile(tx, ty))) { const bx = tx * ts; const by = ty * ts; // AABB intersection const ix = Math.max(0, Math.min(right, bx + ts) - Math.max(left, bx)); const iy = Math.max(0, Math.min(bottom, by + ts) - Math.max(top, by)); if (ix > 0 && iy > 0) { // resolve smallest penetration if (ix < iy) { // push horizontally if (left < bx) { this.x -= ix; } else { this.x += ix; } this.vx = 0; } else { // push vertically if (top < by) { this.y -= iy; this.vy = 0; this.onGround = true; } else { this.y += iy; this.vy = 0; } } } } } } } update(dt, input) { // horizontal movement if (input.keys['a'] || input.keys['arrowleft']) { this.vx = -this.speed; } else if (input.keys['d'] || input.keys['arrowright']) { this.vx = this.speed; } else { this.vx = 0; } // jump if ((input.keys['w'] || input.keys['arrowup'] || input.keys[' ']) && this.onGround) { this.vy = this.jumpSpeed; this.onGround = false; } // apply gravity this.vy += 900 * dt; // px/s^2 // integrate this.x += this.vx * dt; this.y += this.vy * dt; // collision this.resolveCollisions(); // keep in world bounds if (this.x < 0) this.x = 0; if (this.x + this.w > this.world.cols * this.world.tileSize) this.x = this.world.cols * this.world.tileSize - this.w; if (this.y + this.h > this.world.rows * this.world.tileSize) { this.y = this.world.rows * this.world.tileSize - this.h; this.vy = 0; this.onGround = true; } } draw(ctx, camera) { const sx = this.x - camera.x; const sy = this.y - camera.y; // body ctx.fillStyle = '#ffd966'; ctx.fillRect(sx, sy, this.w, this.h); // face ctx.fillStyle = '#000'; ctx.fillRect(sx + this.w * 0.15, sy + this.h * 0.25, 3, 3); ctx.fillRect(sx + this.w * 0.65, sy + this.h * 0.25, 3, 3); } getCenter() { return { x: this.x + this.w / 2, y: this.y + this.h / 2 }; } } export { Player }; import { World, TILE } from './world.js'; import { Player } from './player.js'; import * as Input from './input.js'; const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); function resize() { const dpr = window.devicePixelRatio || 1; canvas.width = Math.floor(innerWidth * dpr); canvas.height = Math.floor(innerHeight * dpr); canvas.style.width = innerWidth + 'px'; canvas.style.height = innerHeight + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } window.addEventListener('resize', resize); resize(); Input.install(canvas); const world = new World(512, 160, 16, 424242); const player = new Player(200, 200, world); const camera = { x: 0, y: 0 }; // hotbar const hotbarEl = document.getElementById('hotbar'); const ITEMS = [ { id: TILE.DIRT, name: 'Dirt' }, { id: TILE.GRASS, name: 'Grass' }, { id: TILE.STONE, name: 'Stone' }, { id: TILE.WOOD, name: 'Wood' }, { id: TILE.LEAVES, name: 'Leaves' } ]; let selectedIndex = 0; function buildHotbar() { hotbarEl.innerHTML = ''; ITEMS.forEach((it, i) => { const el = document.createElement('div'); el.className = 'slot' + (i === selectedIndex ? ' selected' : ''); el.dataset.idx = i; el.title = it.name; el.textContent = i + 1; el.addEventListener('click', () => { selectedIndex = i; updateHotbar(); }); // colored preview const swatch = document.createElement('div'); swatch.style.width = '28px'; swatch.style.height = '28px'; swatch.style.borderRadius = '4px'; swatch.style.position = 'absolute'; swatch.style.pointerEvents = 'none'; // color mapping const c = colorForTile(it.id); swatch.style.background = c; el.style.position = 'relative'; el.appendChild(swatch); hotbarEl.appendChild(el); }); } function updateHotbar() { [...hotbarEl.children].forEach((ch, idx) => { ch.classList.toggle('selected', idx === selectedIndex); }); } function colorForTile(t) { switch (t) { case TILE.GRASS: return '#4CAF50'; case TILE.DIRT: return '#8B5A2B'; case TILE.STONE: return '#7f8c8d'; case TILE.WOOD: return '#6b4226'; case TILE.LEAVES: return '#2e8b3a'; default: return '#ffffff'; } } buildHotbar(); // simple utilities to convert mouse -> world tile function screenToWorld(mx, my) { const rect = canvas.getBoundingClientRect(); const dpr = window.devicePixelRatio || 1; const cx = (mx / dpr) + camera.x; const cy = (my / dpr) + camera.y; return { x: cx, y: cy }; } function getTileUnderMouse() { const m = Input.mouse; const p = screenToWorld(m.x, m.y); const tx = Math.floor(p.x / world.tileSize); const ty = Math.floor(p.y / world.tileSize); return { tx, ty, tile: world.getTile(tx, ty) }; } // simple left-click mining delay let mineCooldown = 0; // number keys for hotbar window.addEventListener('keydown', (e) => { const k = e.key; if (k >= '1' && k <= String(ITEMS.length)) { selectedIndex = parseInt(k) - 1; updateHotbar(); } }); let last = performance.now(); function frame(now) { const dt = Math.min(0.05, (now - last) / 1000); last = now; update(dt); render(); requestAnimationFrame(frame); } function update(dt) { player.update(dt, Input); // camera follow const screenW = canvas.width / (window.devicePixelRatio || 1); const screenH = canvas.height / (window.devicePixelRatio || 1); camera.x = player.x + player.w / 2 - screenW / 2; camera.y = player.y + player.h / 2 - screenH / 2; camera.x = Math.max(0, Math.min(camera.x, world.cols * world.tileSize - screenW)); camera.y = Math.max(0, Math.min(camera.y, world.rows * world.tileSize - screenH)); // mining and placing mineCooldown -= dt; if (Input.mouse.left && mineCooldown <= 0) { const { tx, ty, tile } = getTileUnderMouse(); if (tile !== TILE.AIR && world.inBounds(tx, ty)) { // break tile world.setTile(tx, ty, TILE.AIR); mineCooldown = 0.12; // small cooldown } } if (Input.mouse.right) { const { tx, ty } = getTileUnderMouse(); if (world.inBounds(tx, ty)) { const col = world.getTile(tx, ty); if (col === TILE.AIR) { const place = ITEMS[selectedIndex].id; // prevent placing inside player const px1 = Math.floor(player.x / world.tileSize); const py1 = Math.floor(player.y / world.tileSize); const px2 = Math.floor((player.x + player.w) / world.tileSize); const py2 = Math.floor((player.y + player.h) / world.tileSize); if (!(tx >= px1 && tx <= px2 && ty >= py1 && ty <= py2)) { world.setTile(tx, ty, place); } } } } } function render() { // clear ctx.clearRect(0, 0, canvas.width, canvas.height); const screenW = canvas.width / (window.devicePixelRatio || 1); const screenH = canvas.height / (window.devicePixelRatio || 1); // sky gradient const g = ctx.createLinearGradient(0, 0, 0, screenH); g.addColorStop(0, '#87ceeb'); g.addColorStop(1, '#9be0ff'); ctx.fillStyle = g; ctx.fillRect(0, 0, screenW, screenH); // draw world world.draw(ctx, camera, screenW, screenH); // draw player player.draw(ctx, camera); // draw crosshair const m = Input.mouse; const dpr = window.devicePixelRatio || 1; const mx = m.x / dpr; const my = m.y / dpr; ctx.strokeStyle = 'rgba(0,0,0,0.6)'; ctx.beginPath(); ctx.moveTo(mx - 8, my); ctx.lineTo(mx + 8, my); ctx.moveTo(mx, my - 8); ctx.lineTo(mx, my + 8); ctx.stroke(); // debug optional: draw tile highlight const { tx, ty } = getTileUnderMouse(); const ts = world.tileSize; const sx = tx * ts - camera.x; const sy = ty * ts - camera.y; ctx.strokeStyle = 'rgba(255,255,255,0.9)'; ctx.lineWidth = 1; ctx.strokeRect(sx + 0.5, sy + 0.5, ts - 1, ts - 1); } // start loop requestAnimationFrame(frame);