HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
806x406
3.43 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="km">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minecraft 2D - បង្កើតដោយ មុត សាមេត</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #1a1a1a;
            color: white;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            overflow: hidden;
            user-select: none;
        }
        h1 { margin: 5px; color: #2ecc71; font-size: 20px; }
        #canvasContainer {
            position: relative;
            box-shadow: 0 0 15px rgba(0,0,0,0.8);
        }
        canvas {
            border: 3px solid #333;
            background: #70c5ce; /* មេឃ */
            display: block;
        }
        
        /* របារ Inventory ជ្រើសរើស Block */
        .inventory {
            margin-top: 8px;
            display: flex;
            gap: 8px;
            background: #333;
            padding: 6px;
            border-radius: 8px;
        }
        .slot {
            width: 40px;
            height: 40px;
            border: 2px solid #555;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 11px;
            font-weight: bold;
            border-radius: 4px;
        }
        .slot.selected { border-color: #f1c40f; box-shadow: 0 0 8px #f1c40f; }
        
        /* ប៊ូតុង Mobile Controls */
        .mobile-controls {
            margin-top: 8px;
            display: flex;
            gap: 15px;
        }
        .btn {
            padding: 10px 18px;
            background: #34495e;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
        }
        .btn:active { background: #2c3e50; }
    </style>
</head>
<body>

<h1>⛏️ Minecraft 2D (THE Cambodia Game)</h1>

<div id="canvasContainer">
    <canvas id="gameCanvas" width="800" height="400"></canvas>
</div>

<!-- របារជ្រើសរើស Block សម្រាប់សង់ -->
<div class="inventory">
    <div class="slot selected" onclick="selectBlock(1)" id="slot1" style="background: #2ecc71;">ស្មៅ</div>
    <div class="slot" onclick="selectBlock(2)" id="slot2" style="background: #795548;">ដី</div>
    <div class="slot" onclick="selectBlock(3)" id="slot3" style="background: #7f8c8d;">ថ្ម</div>
    <div class="slot" onclick="selectBlock(4)" id="slot4" style="background: #a1887f;">ឈើ</div>
</div>

<!-- ប៊ូតុងបញ្ជាលើទូរស័ព្ទ -->
<div class="mobile-controls">
    <button class="btn" id="btnLeft">⬅ ឆ្វេង</button>
    <button class="btn" id="btnJump">⬆ លោត</button>
    <button class="btn" id="btnRight">ស្តាំ ➡</button>
</div>

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

const BLOCK_SIZE = 20;
const COLS = canvas.width / BLOCK_SIZE; // 40 blocks
const ROWS = canvas.height / BLOCK_SIZE; // 20 blocks

// 1: ស្មៅ, 2: ដី, 3: ថ្ម, 4: ឈើ, 5: ស្លឹកឈើ, 0: ទទេ (អាកាស)
let selectedBlockType = 1;
const world = [];

// --- ១. បង្កើត ពិភពលោក (World Generation) ---
function generateWorld() {
    for (let r = 0; r < ROWS; r++) {
        world[r] = [];
        for (let c = 0; c < COLS; c++) {
            if (r < 11) {
                world[r][c] = 0; // មេឃ
            } else if (r === 11) {
                world[r][c] = 1; // ស្មៅលើផ្ទៃដី
            } else if (r < 15) {
                world[r][c] = 2; // ដី
            } else {
                world[r][c] = 3; // ថ្មជម្រៅជ្រៅ
            }
        }
    }
    
    // បង្កើត ដើមឈើ
    createTree(8, 11);
    createTree(25, 11);
    
    // បង្កើត ប្រាសាទបុរាណតូច (ថ្ម)
    createStructure(32, 11);
}

function createTree(c, surfaceR) {
    for (let i = 1; i <= 3; i++) world[surfaceR - i][c] = 4; // ដើម
    world[surfaceR - 4][c] = 5;
    world[surfaceR - 4][c - 1] = 5;
    world[surfaceR - 4][c + 1] = 5;
    world[surfaceR - 5][c] = 5; // ស្លឹក
}

function createStructure(c, surfaceR) {
    for (let i = 1; i <= 3; i++) {
        world[surfaceR - i][c] = 3;
        world[surfaceR - i][c + 3] = 3;
    }
    world[surfaceR - 4][c] = 3;
    world[surfaceR - 4][c+1] = 3;
    world[surfaceR - 4][c+2] = 3;
    world[surfaceR - 4][c+3] = 3;
}

// --- ២. តួអង្គ Player ---
const player = {
    x: 100,
    y: 100,
    width: 14,
    height: 32,
    vx: 0,
    vy: 0,
    speed: 3,
    jumpPower: -7.5,
    gravity: 0.35,
    isGrounded: false
};

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

// ប៊ូតុងលើ Mobile
document.getElementById('btnLeft').ontouchstart = () => keys['KeyA'] = true;
document.getElementById('btnLeft').ontouchend = () => keys['KeyA'] = false;
document.getElementById('btnRight').ontouchstart = () => keys['KeyD'] = true;
document.getElementById('btnRight').ontouchend = () => keys['KeyD'] = false;
document.getElementById('btnJump').onclick = () => { if(player.isGrounded) player.vy = player.jumpPower; };

// --- ៣. ការកាប់ និង សង់ Block (Mouse Click) ---
canvas.addEventListener('mousedown', e => {
    const rect = canvas.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const clickY = e.clientY - rect.top;
    
    const c = Math.floor(clickX / BLOCK_SIZE);
    const r = Math.floor(clickY / BLOCK_SIZE);
    
    if (r >= 0 && r < ROWS && c >= 0 && c < COLS) {
        if (e.button === 0) { 
            // ចុចឆ្វេង៖ បំផ្លាញ/ជីក Block (Mine)
            world[r][c] = 0;
        } else if (e.button === 2) { 
            // ចុចស្តាំ៖ សង់ Block (Place)
            world[r][c] = selectedBlockType;
        }
    }
});

// ការពាររំខានពេលចុច Right Click
canvas.addEventListener('contextmenu', e => e.preventDefault());

function selectBlock(type) {
    selectedBlockType = type;
    document.querySelectorAll('.slot').forEach(s => s.classList.remove('selected'));
    document.getElementById(`slot${type}`).classList.add('selected');
}

// --- ៤. UPDATE & COLLISION ---
function update() {
    // ចលនាឆ្វេង-ស្តាំ
    if (keys['KeyD'] || keys['ArrowRight']) player.vx = player.speed;
    else if (keys['KeyA'] || keys['ArrowLeft']) player.vx = -player.speed;
    else player.vx = 0;

    // លោត
    if ((keys['KeyW'] || keys['Space'] || keys['ArrowUp']) && player.isGrounded) {
        player.vy = player.jumpPower;
        player.isGrounded = false;
    }

    // ទំនាញផែនដី
    player.vy += player.gravity;

    // ការផ្លាស់ទី X និងឆែករាំងស្ទះ Block
    player.x += player.vx;
    checkCollisionX();

    // ការផ្លាស់ទី Y និងឆែកប៉ះដី
    player.y += player.vy;
    checkCollisionY();
}

function checkCollisionX() {
    for (let r = 0; r < ROWS; r++) {
        for (let c = 0; c < COLS; c++) {
            if (world[r][c] !== 0) {
                let bx = c * BLOCK_SIZE;
                let by = r * BLOCK_SIZE;
                
                if (player.x < bx + BLOCK_SIZE && player.x + player.width > bx &&
                    player.y < by + BLOCK_SIZE && player.y + player.height > by) {
                    if (player.vx > 0) player.x = bx - player.width;
                    else if (player.vx < 0) player.x = bx + BLOCK_SIZE;
                }
            }
        }
    }
}

function checkCollisionY() {
    player.isGrounded = false;
    for (let r = 0; r < ROWS; r++) {
        for (let c = 0; c < COLS; c++) {
            if (world[r][c] !== 0) {
                let bx = c * BLOCK_SIZE;
                let by = r * BLOCK_SIZE;
                
                if (player.x < bx + BLOCK_SIZE && player.x + player.width > bx &&
                    player.y < by + BLOCK_SIZE && player.y + player.height > by) {
                    if (player.vy > 0) {
                        player.y = by - player.height;
                        player.vy = 0;
                        player.isGrounded = true;
                    } else if (player.vy < 0) {
                        player.y = by + BLOCK_SIZE;
                        player.vy = 0;
                    }
                }
            }
        }
    }
}

// --- ៥. គូរ GRAPHICS ---
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // គូរ BLOCKS ក្នុង ពិភពលោក
    for (let r = 0; r < ROWS; r++) {
        for (let c = 0; c < COLS; c++) {
            let block = world[r][c];
            if (block !== 0) {
                if (block === 1) ctx.fillStyle = '#2ecc71'; // ស្មៅ
                else if (block === 2) ctx.fillStyle = '#795548'; // ដី
                else if (block === 3) ctx.fillStyle = '#7f8c8d'; // ថ្ម
                else if (block === 4) ctx.fillStyle = '#a1887f'; // ដើមឈើ
                else if (block === 5) ctx.fillStyle = '#27ae60'; // ស្លឹកឈើ

                ctx.fillRect(c * BLOCK_SIZE, r * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                ctx.strokeStyle = 'rgba(0,0,0,0.1)';
                ctx.strokeRect(c * BLOCK_SIZE, r * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
            }
        }
    }

    // គូរ PLAYER (Steve / Eren)
    ctx.fillStyle = '#e74c3c'; // អាវ
    ctx.fillRect(player.x, player.y + 10, player.width, 12);
    ctx.fillStyle = '#2c3e50'; // ខោ
    ctx.fillRect(player.x, player.y + 22, player.width, 10);
    ctx.fillStyle = '#ffdbac'; // ក្បាល
    ctx.fillRect(player.x + 2, player.y, 10, 10);
}

function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
}

generateWorld();
loop();
</script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
11KB
Transfer Size
11KB
Content Size
97.0ms
Dom Content Loaded
204.0ms
First Paint
97.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests