HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

1920x1080

20.1 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="tr">
<head>
    <meta charset="UTF-8">
    <title>Basit HTML5 Minecraft</title>
    <style>
        body { margin: 0; overflow: hidden; }
        #instructions {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            background: rgba(0,0,0,0.5);
            padding: 20px;
            font-family: Arial, sans-serif;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div id="instructions">
        <h1>Minecraft Clone</h1>
        <p>Başlamak için tıkla</p>
        <p>(W,A,S,D: Hareket | Mouse: Bakış)</p>
    </div>

    <script type="importmap">
        {
            "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>

    <script type="module">
        import * as THREE from 'three';
        import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';

        // 1. SAHNE VE KAMERA AYARLARI
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x87ceeb); // Gökyüzü mavisi
        
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 2. IŞIKLANDIRMA
        const light = new THREE.AmbientLight(0x404040); // Her yere eşit ışık
        scene.add(light);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(1, 1, 0.5).normalize();
        scene.add(directionalLight);

        // 3. KONTROLLER
        const controls = new PointerLockControls(camera, document.body);
        const instructions = document.getElementById('instructions');

        instructions.addEventListener('click', () => {
            controls.lock();
        });

        controls.addEventListener('lock', () => instructions.style.display = 'none');
        controls.addEventListener('unlock', () => instructions.style.display = 'block');

        // 4. DÜNYA OLUŞTURMA (Zemin)
        const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
        const grassMaterial = new THREE.MeshLambertMaterial({ color: 0x4d912b }); // Çimen yeşili

        for (let x = -10; x < 10; x++) {
            for (let z = -10; z < 10; z++) {
                const mesh = new THREE.Mesh(boxGeometry, grassMaterial);
                mesh.position.set(x, 0, z);
                scene.add(mesh);
            }
        }

        camera.position.y = 2; // Oyuncunun boyu

        // 5. HAREKET MANTIĞI
        let moveForward = false;
        let moveBackward = false;
        let moveLeft = false;
        let moveRight = false;
        const velocity = new THREE.Vector3();
        const direction = new THREE.Vector3();

        const onKeyDown = (event) => {
            switch (event.code) {
                case 'KeyW': moveForward = true; break;
                case 'KeyA': moveLeft = true; break;
                case 'KeyS': moveBackward = true; break;
                case 'KeyD': moveRight = true; break;
            }
        };

        const onKeyUp = (event) => {
            switch (event.code) {
                case 'KeyW': moveForward = false; break;
                case 'KeyA': moveLeft = false; break;
                case 'KeyS': moveBackward = false; break;
                case 'KeyD': moveRight = false; break;
            }
        };

        document.addEventListener('keydown', onKeyDown);
        document.addEventListener('keyup', onKeyUp);

        // 6. OYUN DÖNGÜSÜ (Animation Loop)
        function animate() {
            requestAnimationFrame(animate);

            if (controls.isLocked) {
                const delta = 0.15; // Hareket hızı
                
                velocity.x -= velocity.x * 10.0 * delta;
                velocity.z -= velocity.z * 10.0 * delta;

                direction.z = Number(moveForward) - Number(moveBackward);
                direction.x = Number(moveRight) - Number(moveLeft);
                direction.normalize();

                if (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta;
                if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta;

                controls.moveRight(-velocity.x * delta);
                controls.moveForward(-velocity.z * delta);
            }

            renderer.render(scene, camera);
        }

        animate();

        // Pencere boyutu değiştiğinde güncelle
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

258KB

Transfer Size

1252KB

Content Size

314.0ms

Dom Content Loaded

124.0ms

First Paint

314.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