City Smash Game: Destroy Buildings with Weapons

6 bruh

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web City Smash</title>
    <script src="https://jsdelivr.net"></script>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #111;
        }
    </style>
</head>
<body>

const game = new Phaser.Game(config);

function preload() {
        // Load basic shapes/colors for placeholder assets
        this.load.image('sky', 'assets/skies/space1.png');
    }

function create() {
        // The Ground
        this.ground = this.add.rectangle(400, 580, 800, 40, 0x5e3f28);
        this.physics.add.existing(this.ground, true); // Static physics body

// Group to hold all buildings
        this.buildings = this.physics.add.group();

// Spawn a row of city buildings
        for (let i = 0; i < 6; i++) {
            let width = Phaser.Math.Between(60, 100);
            let height = Phaser.Math.Between(100, 300);
            let x = 100 + (i * 120);
            let y = 560 - (height / 2);

let building = this.add.rectangle(x, y, width, height, 0x666666);
            this.physics.add.existing(building);
            
            // Building settings so it reacts to physics
            building.body.setImmovable(false);
            building.body.setAllowGravity(true);
            
            // Custom data so it breaks when hit
            building.setData('health', 3);
            
            this.buildings.add(building);

// Click interaction
            building.setInteractive();
            building.on('pointerdown', () => {
                smashBuilding(this, building);
            });
        }

// Add overlap so falling buildings hit the ground and stay
        this.physics.add.collider(this.buildings, this.ground);
        this.physics.add.collider(this.buildings, this.buildings);
    }

function smashBuilding(scene, building) {
        let currentHealth = building.getData('health');
        currentHealth -= 1;
        building.setData('health', currentHealth);

// Visual flash and damage
        scene.tweens.add({
            targets: building,
            alpha: 0.5,
            duration: 100,
            yoyo: true
        });

if (currentHealth <= 0) {
            // Smash into rubble
            building.setVelocityY(-200); // Kick up a bit
            building.setAngle(Phaser.Math.Between(-20, 20));
            building.setFillStyle(0x333333); // Turn to rubble color
            building.disableInteractive();
        }
    }

function update() {
        // Cleanup off-screen debris
        this.buildings.getChildren().forEach((building) => {
            if (building.y > 650) {
                building.destroy();
            }
        });
    }
</script>

</body>
</html> (Leave empty if not needed) -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>City Smash Lite</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #050505;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            user-select: none;
        }
        canvas {
            display: block;
        }
        #ui {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 50px;
            border: 1px solid #444;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 25px;
            background: #333;
            color: white;
            cursor: pointer;
            transition: 0.3s;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 12px;
        }
        button:hover {
            background: #555;
        }
        button.active {
            background: #ff4757;
            box-shadow: 0 0 15px #ff4757;
        }
        #instructions {
            position: absolute;
            top: 20px;
            width: 100%;
            text-align: center;
            color: #666;
            pointer-events: none;
        }
    </style>
</head>
<body>

<div id="instructions">CLICK TO DESTROY THE CITY</div>
    <div id="ui">
        <button onclick="setWeapon('meteor', this)" class="active">Meteor</button>
        <button onclick="setWeapon('nuke', this)">Nuke</button>
        <button onclick="setWeapon('laser', this)">Laser</button>
        <button onclick="resetCity()" style="background: #2f3542;">Reset</button>
    </div>
    <canvas id="gameCanvas"></canvas>

let width, height;
    let buildings = [];
    let particles = [];
    let currentWeapon = 'meteor';

class Building {
        constructor(x, w, h) {
            this.x = x;
            this.w = w;
            this.h = h;
            this.maxH = h;
            this.color = `hsl(${200 + Math.random() * 20}, 30%, ${20 + Math.random() * 20}%)`;
            this.windows = [];
            this.generateWindows();
        }

generateWindows() {
            for (let i = 10; i < this.w - 10; i += 15) {
                for (let j = 10; j < this.h - 10; j += 20) {
                    if (Math.random() > 0.3) {
                        this.windows.push({ x: i, y: j, lit: Math.random() > 0.5 });
                    }
                }
            }
        }

draw() {
            if (this.h <= 0) return;
            
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, height - this.h, this.w, this.h);

// Draw windows
            ctx.fillStyle = '#f1c40f';
            this.windows.forEach(win => {
                if (win.y < this.h - 5 && win.lit) {
                    ctx.fillRect(this.x + win.x, height - this.h + win.y, 8, 12);
                }
            });

// Cracks/Damage shading
            if (this.h < this.maxH) {
                ctx.fillStyle = 'rgba(0,0,0,0.3)';
                ctx.fillRect(this.x, height - this.maxH, this.w, this.maxH - this.h);
            }
        }

hit(damageX, radius, force) {
            let dist = Math.abs((this.x + this.w / 2) - damageX);
            if (dist < radius + this.w / 2) {
                let damage = (1 - dist / (radius + this.w / 2)) * force;
                this.h -= damage;
                if (this.h < 0) this.h = 0;
                createParticles(damageX, height - this.h, damage / 2);
            }
        }
    }

class Particle {
        constructor(x, y, color) {
            this.x = x;
            this.y = y;
            this.vx = (Math.random() - 0.5) * 10;
            this.vy = (Math.random() - 0.5) * 10 - 5;
            this.life = 1.0;
            this.color = color;
            this.size = Math.random() * 4 + 1;
        }

update() {
            this.x += this.vx;
            this.y += this.vy;
            this.vy += 0.2; // gravity
            this.life -= 0.02;
        }

draw() {
            ctx.globalAlpha = this.life;
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y, this.size, this.size);
            ctx.globalAlpha = 1;
        }
    }

function init() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
        resetCity();
    }

function resetCity() {
        buildings = [];
        let x = 0;
        while (x < width) {
            let w = 60 + Math.random() * 100;
            let h = 150 + Math.random() * 400;
            buildings.push(new Building(x, w, h));
            x += w + 5;
        }
    }

function createParticles(x, y, count) {
        for (let i = 0; i < count; i++) {
            particles.push(new Particle(x, y, Math.random() > 0.5 ? '#ff4757' : '#ffa502'));
        }
    }

function setWeapon(type, btn) {
        currentWeapon = type;
        document.querySelectorAll('button').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
    }

function handleAction(e) {
        const rect = canvas.getBoundingClientRect();
        const mouseX = e.clientX || e.touches[0].clientX;
        const mouseY = e.clientY || e.touches[0].clientY;

if (currentWeapon === 'meteor') {
            createMeteor(mouseX, mouseY);
        } else if (currentWeapon === 'nuke') {
            createExplosion(mouseX, height - 50, 300, 400);
        } else if (currentWeapon === 'laser') {
            createLaser(mouseX);
        }
    }

function createMeteor(targetX, targetY) {
        let startX = targetX - 200;
        let startY = -50;
        let progress = 0;
        
        function animateMeteor() {
            progress += 0.05;
            let currX = startX + (targetX - startX) * progress;
            let currY = startY + (height - startY) * progress;

ctx.fillStyle = '#ff4757';
            ctx.beginPath();
            ctx.arc(currX, currY, 15, 0, Math.PI * 2);
            ctx.fill();

if (progress < 1) {
                requestAnimationFrame(animateMeteor);
            } else {
                createExplosion(targetX, height, 150, 200);
            }
        }
        animateMeteor();
    }

function createExplosion(x, y, radius, force) {
        buildings.forEach(b => b.hit(x, radius, force));
        createParticles(x, y, 50);
        
        // Flash effect
        ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
        ctx.fillRect(0, 0, width, height);
    }

function createLaser(x) {
        ctx.strokeStyle = '#00d2ff';
        ctx.lineWidth = 30;
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, height);
        ctx.stroke();
        
        buildings.forEach(b => b.hit(x, 40, 300));
    }

function loop() {
        ctx.fillStyle = '#050505';
        ctx.fillRect(0, 0, width, height);

// Draw Sky Gradient
        let grad = ctx.createLinearGradient(0, 0, 0, height);
        grad.addColorStop(0, '#0a0a12');
        grad.addColorStop(1, '#1a1a2e');
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, width, height);

buildings.forEach(b => b.draw());
        
        particles = particles.filter(p => p.life > 0);
        particles.forEach(p => {
            p.update();
            p.draw();
        });

requestAnimationFrame(loop);
    }

window.addEventListener('mousedown', handleAction);
    window.addEventListener('touchstart', (e) => {
        e.preventDefault();
        handleAction(e);
    });
    window.addEventListener('resize', init);

init();
    loop();
</script>
</body>
</html>

CSS

City Smash Game: Destroy Buildings with Weapons

Recommended