Do Not Touch Game ( Create on AI)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Survival Shooter</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* Hide scrollbars */
            background-color: #557A46; /* Grass green background */
            font-family: Arial, sans-serif;
            user-select: none;
        }
        canvas {
            display: block;
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        #gameOverMenu {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.85);
            padding: 40px;
            border-radius: 10px;
            text-align: center;
            color: white;
            display: none; /* Hidden by default */
        }
        h1 { margin-top: 0; color: #ff4d4d; }
        button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #ff9f43;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }
        button:hover { background-color: #ff7f00; }
    </style>
</head>
<body>

<div id="ui">Score: <span id="scoreEl">0</span></div>
    
    <div id="gameOverMenu">
        <h1>Game Over!</h1>
        <p>Your Score: <span id="finalScore">0</span></p>
        <button onclick="restartGame()">Play Again</button>
    </div>

// Set canvas to full screen
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

let score = 0;
        let animationId;
        let spawnInterval;

// Player Setup
        class Player {
            constructor(x, y, radius, color) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
                this.speed = 5;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }

// Projectile (Bullet) Setup
        class Projectile {
            constructor(x, y, radius, color, velocity) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
                this.velocity = velocity;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
            update() {
                this.draw();
                this.x += this.velocity.x;
                this.y += this.velocity.y;
            }
        }

// Enemy Setup
        class Enemy {
            constructor(x, y, radius, color, velocity) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
                this.velocity = velocity;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
            update() {
                this.draw();
                this.x += this.velocity.x;
                this.y += this.velocity.y;
            }
        }

const playerX = canvas.width / 2;
        const playerY = canvas.height / 2;
        let player = new Player(playerX, playerY, 15, 'white');
        let projectiles = [];
        let enemies = [];
        
        // Track keyboard presses
        const keys = { w: false, a: false, s: false, d: false };

window.addEventListener('keydown', (e) => {
            if (keys.hasOwnProperty(e.key.toLowerCase())) keys[e.key.toLowerCase()] = true;
        });
        window.addEventListener('keyup', (e) => {
            if (keys.hasOwnProperty(e.key.toLowerCase())) keys[e.key.toLowerCase()] = false;
        });

// Shooting mechanics
        window.addEventListener('click', (e) => {
            const angle = Math.atan2(e.clientY - player.y, e.clientX - player.x);
            const velocity = { x: Math.cos(angle) * 10, y: Math.sin(angle) * 10 };
            projectiles.push(new Projectile(player.x, player.y, 5, 'yellow', velocity));
        });

function spawnEnemies() {
            spawnInterval = setInterval(() => {
                const radius = Math.random() * (30 - 10) + 10;
                let x, y;

// Spawn randomly outside the canvas
                if (Math.random() < 0.5) {
                    x = Math.random() < 0.5 ? 0 - radius : canvas.width + radius;
                    y = Math.random() * canvas.height;
                } else {
                    x = Math.random() * canvas.width;
                    y = Math.random() < 0.5 ? 0 - radius : canvas.height + radius;
                }

const color = `hsl(${Math.random() * 360}, 50%, 50%)`;
                
                // Calculate direction towards player
                const angle = Math.atan2(player.y - y, player.x - x);
                const velocity = { x: Math.cos(angle) * 2, y: Math.sin(angle) * 2 };

enemies.push(new Enemy(x, y, radius, color, velocity));
            }, 1000); // Spawn an enemy every second
        }

function animate() {
            animationId = requestAnimationFrame(animate);
            ctx.fillStyle = 'rgba(85, 122, 70, 0.3)'; // Trailing effect on the grass
            ctx.fillRect(0, 0, canvas.width, canvas.height);

// Player Movement
            if (keys.w && player.y - player.radius > 0) player.y -= player.speed;
            if (keys.s && player.y + player.radius < canvas.height) player.y += player.speed;
            if (keys.a && player.x - player.radius > 0) player.x -= player.speed;
            if (keys.d && player.x + player.radius < canvas.width) player.x += player.speed;

player.draw();

// Update projectiles
            projectiles.forEach((projectile, index) => {
                projectile.update();
                
                // Remove bullets off screen
                if (projectile.x + projectile.radius < 0 || projectile.x - projectile.radius > canvas.width ||
                    projectile.y + projectile.radius < 0 || projectile.y - projectile.radius > canvas.height) {
                    setTimeout(() => { projectiles.splice(index, 1); }, 0);
                }
            });

// Update enemies & collision detection
            enemies.forEach((enemy, index) => {
                enemy.update();

// Collision: Enemy hits Player (Game Over)
                const dist = Math.hypot(player.x - enemy.x, player.y - enemy.y);
                if (dist - enemy.radius - player.radius < 1) {
                    cancelAnimationFrame(animationId);
                    clearInterval(spawnInterval);
                    gameOverMenu.style.display = 'block';
                    finalScore.innerText = score;
                }

// Collision: Bullet hits Enemy
                projectiles.forEach((projectile, projectileIndex) => {
                    const dist = Math.hypot(projectile.x - enemy.x, projectile.y - enemy.y);
                    if (dist - enemy.radius - projectile.radius < 1) {
                        // Increase score
                        score += 10;
                        scoreEl.innerHTML = score;

// Remove both
                        setTimeout(() => {
                            enemies.splice(index, 1);
                            projectiles.splice(projectileIndex, 1);
                        }, 0);
                    }
                });
            });
        }

function restartGame() {
            gameOverMenu.style.display = 'none';
            score = 0;
            scoreEl.innerHTML = score;
            player = new Player(canvas.width / 2, canvas.height / 2, 15, 'white');
            projectiles = [];
            enemies = [];
            animate();
            spawnEnemies();
        }

// Start the game loop
        animate();
        spawnEnemies();

// Handle window resizing
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
</body>
</html>

Ai Game

Search This Blog

Coin collec game ( Create on Ai)

Do Not Touch Game ( Create on AI)

Comments

Post a Comment