Coin collec game ( Create on Ai)

Ranajit Game Master March 24, 2026

গেমের সোর্স কোড:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#ffffff">
    <title>অ্যান্ড্রয়েড 3D জয়স্টিক গেম</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden; /* স্ক্রল বন্ধ করা হয়েছে */
            font-family: Arial, sans-serif;
            touch-action: none; /* মোবাইল ব্রাউজারের ডিফল্ট টাচ অ্যাকশন বন্ধ */
            -webkit-user-select: none;
            user-select: none;
            background-color: #ffffff;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
        #score-board {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            z-index: 10;
            text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
        }
        
        #joystick-container {
            position: absolute;
            bottom: 40px;
            left: 40px;
            width: 150px;
            height: 150px;
            z-index: 10;
        }

        #game-over-screen, #start-screen {
            display: flex;
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(255, 255, 255, 0.9);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 20;
        }
        #game-over-screen { display: none; }
        .screen-text {
            font-size: 30px;
            color: #d9534f;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            padding: 0 10px;
        }
        .action-btn {
            padding: 15px 40px;
            font-size: 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 12px;
            box-shadow: 0 5px 10px rgba(0,0,0,0.2);
            text-transform: uppercase;
            font-weight: bold;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .action-btn:active {
            transform: scale(0.95);
            background: #45a049;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nipplejs/0.9.0/nipplejs.min.js"></script>
</head>
<body>

    <div id="start-screen">
        <div class="screen-text" style="color: #333;">3D জয়স্টিক কয়েন রানার<br><span style="font-size: 16px; color: #666;">(শুধুমাত্র মোবাইলের জন্য)</span></div>
        <button class="action-btn" onclick="startGame()">গেম শুরু করুন</button>
    </div>

    <div id="score-board">স্কোর: ০</div>

    <div id="game-over-screen">
        <div class="screen-text" id="game-over-text">গেম ওভার!</div>
        <button class="action-btn" onclick="resetGame()">আবার খেলুন</button>
    </div>

    <div id="joystick-container"></div>

    <script>
        // Three.js সেটআপ
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio); // মোবাইলের জন্য ভালো রেজোলিউশন
        document.body.appendChild(renderer.domElement);

        const ambientLight = new THREE.AmbientLight(0x404040, 2);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(5, 10, 5);
        scene.add(directionalLight);

        // প্লেয়ার তৈরি (সবুজ বাক্স)
        const playerGeo = new THREE.BoxGeometry(1, 1, 1);
        const playerMat = new THREE.MeshPhongMaterial({ color: 0x4CAF50 });
        const player = new THREE.Mesh(playerGeo, playerMat);
        player.position.y = 0.5;
        scene.add(player);

        // কয়েন তৈরি (হলুদ বাক্স)
        const coinGeo = new THREE.BoxGeometry(0.5, 0.5, 0.5);
        const coinMat = new THREE.MeshPhongMaterial({ color: 0xFFD700 });
        const coin = new THREE.Mesh(coinGeo, coinMat);
        coin.position.y = 0.5;
        scene.add(coin);

        // শত্রু তৈরি (লাল বাক্স)
        const enemyGeo = new THREE.BoxGeometry(0.8, 0.8, 0.8);
        const enemyMat = new THREE.MeshPhongMaterial({ color: 0xFF0000 });
        
        const enemy1 = new THREE.Mesh(enemyGeo, enemyMat);
        const enemy2 = new THREE.Mesh(enemyGeo, enemyMat);
        const enemy3 = new THREE.Mesh(enemyGeo, enemyMat);
        const enemies = [enemy1, enemy2, enemy3];
        
        enemies.forEach(enemy => scene.add(enemy));

        // মাঠ বা গ্রাউন্ড তৈরি
        const groundGeo = new THREE.PlaneGeometry(20, 20);
        const groundMat = new THREE.MeshBasicMaterial({ color: 0xcccccc, side: THREE.DoubleSide, wireframe: true });
        const ground = new THREE.Mesh(groundGeo, groundMat);
        ground.rotation.x = Math.PI / 2;
        scene.add(ground);

        // ক্যামেরার পজিশন (একটু দূর থেকে দেখার জন্য)
        camera.position.z = 15;
        camera.position.y = 15;
        camera.lookAt(0, 0, 0);

        let score = 0;
        let isGameOver = false;
        let gameStarted = false;
        const scoreBoard = document.getElementById('score-board');
        const gameOverScreen = document.getElementById('game-over-screen');
        const startScreen = document.getElementById('start-screen');
        const gameOverText = document.getElementById('game-over-text');
        
        // শুধু জয়স্টিকের জন্য ইনপুট
        const input = { x: 0, y: 0 };

        function spawnCoin() {
            coin.position.x = (Math.random() - 0.5) * 12; 
            coin.position.z = (Math.random() - 0.5) * 12;
        }

        function placeEnemies() {
            enemy1.position.set(4, 0.4, -4);
            enemy2.position.set(-4, 0.4, 4);
            enemy3.position.set(4, 0.4, 4);
        }

        spawnCoin();
        placeEnemies();

        // NippleJS দিয়ে জয়স্টিক তৈরি
        const joystickContainer = document.getElementById('joystick-container');
        const options = {
            zone: joystickContainer, 
            mode: 'static',           
            position: { left: '60px', bottom: '60px' }, 
            color: '#333',          
            size: 100,               
        };
        const manager = nipplejs.create(options);

        // জয়স্টিক মুভমেন্ট ক্যাপচার
        manager.on('move', (evt, data) => {
            if (data.vector) {
                // NippleJS এর ভেক্টর দিয়ে সরাসরি মুভমেন্ট হিসাব করা হচ্ছে
                input.x = data.vector.x;
                input.y = data.vector.y;
            }
        });

        // জয়স্টিক ছেড়ে দিলে থামা
        manager.on('end', (evt, data) => {
            input.x = 0;
            input.y = 0;
        });

        window.startGame = function() {
            startScreen.style.display = 'none';
            gameStarted = true;
            animate();
        }

        function animate() {
            if (isGameOver || !gameStarted) return;
            requestAnimationFrame(animate);

            // প্লেয়ার মুভমেন্ট (জয়স্টিকের ইনপুট অনুযায়ী)
            const speed = 0.2;
            
            // X এবং Z অক্ষে প্লেয়ারকে সরানো হচ্ছে (বাধা চেক করে)
            if (player.position.x < 8 && input.x > 0) player.position.x += input.x * speed;
            if (player.position.x > -8 && input.x < 0) player.position.x += input.x * speed;
            
            // NippleJS এর Y ভেক্টর উপরের দিকে পজিটিভ হয়, কিন্তু 3D স্পেসে Z অক্ষের সামনে পজিটিভ/নেগেটিভ উল্টো কাজ করে
            if (player.position.z > -8 && input.y > 0) player.position.z -= input.y * speed;
            if (player.position.z < 8 && input.y < 0) player.position.z -= input.y * speed;

            // কয়েনের রোটেশন
            coin.rotation.x += 0.05;
            coin.rotation.y += 0.05;

            // শত্রুদের মুভমেন্ট
            enemy1.position.z += Math.sin(Date.now() / 800) * 0.15;
            enemy2.position.x += Math.cos(Date.now() / 800) * 0.15;
            enemy3.position.z += Math.cos(Date.now() / 600) * 0.1;

            // কয়েন সংগ্রহের লজিক
            const dx = player.position.x - coin.position.x;
            const dz = player.position.z - coin.position.z;
            const distance = Math.sqrt(dx * dx + dz * dz);
            
            if (distance < 1) {
                score += 10;
                scoreBoard.innerText = "স্কোর: " + score;
                spawnCoin();
            }

            // শত্রুর সাথে ধাক্কা লাগার লজিক
            for (let i = 0; i < enemies.length; i++) {
                const edx = player.position.x - enemies[i].position.x;
                const edz = player.position.z - enemies[i].position.z;
                const edistance = Math.sqrt(edx * edx + edz * edz);
                
                if (edistance < 0.9) {
                    isGameOver = true;
                    gameOverText.innerText = "গেম ওভার!\nস্কোর: " + score;
                    gameOverScreen.style.display = 'flex';
                    break;
                }
            }

            renderer.render(scene, camera);
        }

        window.resetGame = function() {
            score = 0;
            scoreBoard.innerText = "স্কোর: " + score;
            player.position.set(0, 0.5, 0);
            spawnCoin();
            placeEnemies();
            gameOverScreen.style.display = 'none';
            input.x = 0;
            input.y = 0;
            isGameOver = false;
            animate();
        }

        // ফুল স্ক্রিন ও রিসাইজ হ্যান্ডেলিং
        function onWindowResize() {
            setTimeout(() => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }, 100); 
        }
        
        window.addEventListener('resize', onWindowResize);
        document.addEventListener('fullscreenchange', onWindowResize);
    </script>
</body>
</html>

Post a Comment

0 Comments