Coin collec game ( Create on Ai)

<!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">
    <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;
            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;
        }
        
        #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: 35px;
            color: #d9534f;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }
        .action-btn {
            padding: 15px 30px;
            font-size: 22px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        }
    </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 জয়স্টিক কয়েন রানার</div>
        <button class="action-btn" onclick="startGame()">গেম শুরু করুন</button>
    </div>

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

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);
        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 = 10;
        camera.position.y = 12;
        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 keys = { up: false, down: false, left: false, right: false };

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

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

spawnCoin();
        placeEnemies();

const joystickContainer = document.getElementById('joystick-container');
        const options = {
            zone: joystickContainer, 
            mode: 'static',           
            position: { left: '50%', bottom: '50%' }, 
            color: 'black',          
            size: 100,               
        };
        const manager = nipplejs.create(options);

manager.on('move', (evt, data) => {
            keys.up = keys.down = keys.left = keys.right = false;
            if (data.direction) {
                if (data.direction.angle === 'up') keys.up = true;
                if (data.direction.angle === 'down') keys.down = true;
                if (data.direction.angle === 'left') keys.left = true;
                if (data.direction.angle === 'right') keys.right = true;
            }
        });

manager.on('end', (evt, data) => {
            keys.up = keys.down = keys.left = keys.right = false;
        });

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

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

const speed = 0.15;
            if (keys.up && player.position.z > -6) player.position.z -= speed;
            if (keys.down && player.position.z < 6) player.position.z += speed;
            if (keys.left && player.position.x > -4.5) player.position.x -= speed;
            if (keys.right && player.position.x < 4.5) player.position.x += 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 = "গেম ওভার! স্কোর: " + 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';
            keys.up = keys.down = keys.left = keys.right = false;
            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>

Ai Game

Search This Blog

Coin collec game ( Create on Ai)

Comments

Post a Comment