Spaces:

AntDX316
/

HF-Map

Running

App Files Files Community

AntDX316 commited on Mar 30

Commit

3917e9e

1 Parent(s): 105b77b

updated

Browse files

Files changed (3) hide show

index.html +27 -0
script.js +412 -0
styles.css +95 -0

index.html ADDED Viewed

	@@ -0,0 +1,27 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Battle Simulator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Battle Simulator</h1>
+        <div class="battlefield">
+            <canvas id="map" width="800" height="600"></canvas>
+            <div id="info-panel" class="hidden">
+                <h3 id="unit-name">Unit Name</h3>
+                <p id="unit-type">Type: <span></span></p>
+                <p id="unit-health">Health: <span></span></p>
+                <p id="unit-attack">Attack: <span></span></p>
+                <p id="unit-defense">Defense: <span></span></p>
+                <p id="unit-status">Status: <span></span></p>
+                <button id="close-info">Close</button>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,412 @@

+// Initialize elements when the page loads
+let canvas, ctx;
+window.addEventListener('DOMContentLoaded', () => {
+    canvas = document.getElementById('map');
+    ctx = canvas.getContext('2d');
+    initializeGame();
+});
+// Constants for unit types and teams
+const UNIT_TYPES = {
+    INFANTRY: {
+        name: 'Infantry',
+        baseHealth: 100,
+        baseAttack: 10,
+        baseDefense: 5,
+        speed: 1,
+        attackRange: 50,
+        radius: 12,
+        color: '#3498db'
+    },
+    TANK: {
+        name: 'Tank',
+        baseHealth: 200,
+        baseAttack: 20,
+        baseDefense: 15,
+        speed: 0.5,
+        attackRange: 100,
+        radius: 18,
+        color: '#e74c3c'
+    },
+    ARTILLERY: {
+        name: 'Artillery',
+        baseHealth: 80,
+        baseAttack: 30,
+        baseDefense: 3,
+        speed: 0.3,
+        attackRange: 150,
+        radius: 15,
+        color: '#f39c12'
+    }
+};
+const TEAMS = {
+    RED: {
+        name: 'Red Forces',
+        primaryColor: '#e74c3c',
+        secondaryColor: '#c0392b'
+    },
+    BLUE: {
+        name: 'Blue Forces',
+        primaryColor: '#3498db',
+        secondaryColor: '#2980b9'
+    }
+};
+// Class to represent a military unit
+class Unit {
+    constructor(id, type, team, x, y) {
+        this.id = id;
+        this.type = type;
+        this.team = team;
+        this.x = x;
+        this.y = y;
+        this.targetX = x;
+        this.targetY = y;
+        this.health = type.baseHealth;
+        this.maxHealth = type.baseHealth;
+        this.attack = type.baseAttack;
+        this.defense = type.baseDefense;
+        this.radius = type.radius;
+        this.speed = type.speed;
+        this.attackRange = type.attackRange;
+        this.attackCooldown = 0;
+        this.target = null;
+        this.selected = false;
+        this.status = 'Idle';
+        this.deadTimer = 0;
+        this.isAlive = true;
+    }
+    // Update the unit's position and state
+    update(units, deltaTime) {
+        if (!this.isAlive) {
+            this.deadTimer += deltaTime;
+            if (this.deadTimer > 3000) {
+                this.respawn();
+            }
+            return;
+        }
+        if (!this.target || !this.target.isAlive) {
+            this.findNewTarget(units);
+        }
+        if (this.attackCooldown > 0) {
+            this.attackCooldown -= deltaTime;
+        }
+        if (this.target) {
+            // Calculate distance to target
+            const dx = this.target.x - this.x;
+            const dy = this.target.y - this.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance <= this.attackRange) {
+                // Attack if in range
+                this.status = 'Attacking';
+                if (this.attackCooldown <= 0) {
+                    this.attackTarget();
+                }
+            } else {
+                // Move towards target
+                this.status = 'Moving';
+                const angle = Math.atan2(dy, dx);
+                const moveDistance = this.speed * deltaTime / 16;
+                this.x += Math.cos(angle) * moveDistance;
+                this.y += Math.sin(angle) * moveDistance;
+            }
+        } else {
+            this.status = 'Idle';
+            // Random wandering
+            if (Math.random() < 0.01) {
+                this.targetX = Math.random() * canvas.width;
+                this.targetY = Math.random() * canvas.height;
+            }
+            // Move towards random target
+            const dx = this.targetX - this.x;
+            const dy = this.targetY - this.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance > 5) {
+                const angle = Math.atan2(dy, dx);
+                const moveDistance = this.speed * deltaTime / 32;
+                this.x += Math.cos(angle) * moveDistance;
+                this.y += Math.sin(angle) * moveDistance;
+            }
+        }
+    }
+    // Find a new target from the opposing team
+    findNewTarget(units) {
+        let closestDistance = Infinity;
+        let closestTarget = null;
+        for (const unit of units) {
+            if (unit.team !== this.team && unit.isAlive) {
+                const dx = unit.x - this.x;
+                const dy = unit.y - this.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestTarget = unit;
+                }
+            }
+        }
+        this.target = closestTarget;
+    }
+    // Attack the current target
+    attackTarget() {
+        if (!this.target || !this.target.isAlive) return;
+        const damage = Math.max(1, this.attack - this.target.defense / 2);
+        this.target.takeDamage(damage);
+        this.attackCooldown = 1000; // 1 second cooldown
+        // Visual feedback (particle effect could be added here)
+    }
+    // Take damage from an attack
+    takeDamage(amount) {
+        this.health -= amount;
+        if (this.health <= 0) {
+            this.die();
+        }
+    }
+    // Die and set a timer for respawn
+    die() {
+        this.health = 0;
+        this.isAlive = false;
+        this.deadTimer = 0;
+        this.status = 'Dead';
+    }
+    // Respawn the unit at a random position on its team's side
+    respawn() {
+        this.health = this.maxHealth;
+        this.isAlive = true;
+        this.status = 'Idle';
+        // Respawn on team's side
+        if (this.team === TEAMS.RED) {
+            this.x = Math.random() * (canvas.width / 3);
+        } else {
+            this.x = canvas.width - Math.random() * (canvas.width / 3);
+        }
+        this.y = Math.random() * canvas.height;
+        this.targetX = this.x;
+        this.targetY = this.y;
+    }
+    // Draw the unit on the canvas
+    draw(ctx) {
+        const alpha = this.isAlive ? 1 : 0.3;
+        // Draw health bar
+        if (this.isAlive) {
+            const healthPercent = this.health / this.maxHealth;
+            ctx.fillStyle = `rgba(0, 0, 0, ${alpha * 0.2})`;
+            ctx.fillRect(this.x - this.radius, this.y - this.radius - 10, this.radius * 2, 5);
+            ctx.fillStyle = healthPercent > 0.5 ? `rgba(46, 204, 113, ${alpha})` :
+                           healthPercent > 0.2 ? `rgba(241, 196, 15, ${alpha})` :
+                           `rgba(231, 76, 60, ${alpha})`;
+            ctx.fillRect(this.x - this.radius, this.y - this.radius - 10, this.radius * 2 * healthPercent, 5);
+        }
+        // Draw unit body
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(${this.team === TEAMS.RED ? '231, 76, 60' : '52, 152, 219'}, ${alpha})`;
+        ctx.fill();
+        // Draw outline if selected
+        if (this.selected) {
+            ctx.strokeStyle = '#2ecc71';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+        }
+        // Draw unit type indicator
+        ctx.beginPath();
+        if (this.type === UNIT_TYPES.INFANTRY) {
+            ctx.moveTo(this.x - 5, this.y - 5);
+            ctx.lineTo(this.x + 5, this.y - 5);
+            ctx.lineTo(this.x, this.y + 5);
+            ctx.closePath();
+        } else if (this.type === UNIT_TYPES.TANK) {
+            ctx.rect(this.x - 6, this.y - 6, 12, 12);
+        } else if (this.type === UNIT_TYPES.ARTILLERY) {
+            ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);
+        }
+        ctx.fillStyle = `rgba(255, 255, 255, ${alpha * 0.8})`;
+        ctx.fill();
+        // Draw attack line if attacking
+        if (this.target && this.isAlive && this.target.isAlive && this.status === 'Attacking') {
+            ctx.beginPath();
+            ctx.moveTo(this.x, this.y);
+            ctx.lineTo(this.target.x, this.target.y);
+            ctx.strokeStyle = `rgba(255, 0, 0, ${alpha * 0.5})`;
+            ctx.lineWidth = 1;
+            ctx.stroke();
+        }
+    }
+    // Check if a point is inside the unit (for click detection)
+    containsPoint(x, y) {
+        const dx = this.x - x;
+        const dy = this.y - y;
+        return dx * dx + dy * dy <= this.radius * this.radius;
+    }
+}
+// Create units for both teams
+let units = [];
+let selectedUnit = null;
+let lastTime = 0;
+function initializeUnits() {
+    units = [];
+    // Create Red team units
+    createUnits(10, UNIT_TYPES.INFANTRY, TEAMS.RED, 0, canvas.width / 3, 0, canvas.height);
+    createUnits(5, UNIT_TYPES.TANK, TEAMS.RED, 0, canvas.width / 3, 0, canvas.height);
+    createUnits(3, UNIT_TYPES.ARTILLERY, TEAMS.RED, 0, canvas.width / 3, 0, canvas.height);
+    // Create Blue team units
+    createUnits(10, UNIT_TYPES.INFANTRY, TEAMS.BLUE, canvas.width * 2/3, canvas.width, 0, canvas.height);
+    createUnits(5, UNIT_TYPES.TANK, TEAMS.BLUE, canvas.width * 2/3, canvas.width, 0, canvas.height);
+    createUnits(3, UNIT_TYPES.ARTILLERY, TEAMS.BLUE, canvas.width * 2/3, canvas.width, 0, canvas.height);
+}
+function createUnits(count, type, team, minX, maxX, minY, maxY) {
+    for (let i = 0; i < count; i++) {
+        const x = minX + Math.random() * (maxX - minX);
+        const y = minY + Math.random() * (maxY - minY);
+        const unit = new Unit(units.length, type, team, x, y);
+        units.push(unit);
+    }
+}
+// Main game loop
+function gameLoop(currentTime) {
+    if (!lastTime) lastTime = currentTime;
+    const deltaTime = currentTime - lastTime;
+    lastTime = currentTime;
+    // Clear the canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    // Update and draw all units
+    for (const unit of units) {
+        unit.update(units, deltaTime);
+    }
+    // Draw in two passes to ensure selected units appear on top
+    // First draw non-selected units
+    for (const unit of units) {
+        if (!unit.selected) {
+            unit.draw(ctx);
+        }
+    }
+    // Then draw selected units
+    for (const unit of units) {
+        if (unit.selected) {
+            unit.draw(ctx);
+        }
+    }
+    // Continue the game loop
+    requestAnimationFrame(gameLoop);
+}
+// Handle clicks on units
+function handleCanvasClick(event) {
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    console.log(`Click at coordinates: (${x}, ${y})`);
+    // Deselect any previously selected unit
+    if (selectedUnit) {
+        selectedUnit.selected = false;
+        selectedUnit = null;
+        // Make sure the info panel is hidden when deselecting
+        document.getElementById('info-panel').classList.add('hidden');
+    }
+    // Check if a unit was clicked
+    let unitClicked = false;
+    for (let i = units.length - 1; i >= 0; i--) {
+        const unit = units[i];
+        if (unit.containsPoint(x, y)) {
+            console.log(`Unit clicked: ${unit.team.name} ${unit.type.name} (${unit.id})`);
+            selectedUnit = unit;
+            unit.selected = true;
+            unitClicked = true;
+            // Update info panel with unit details
+            const nameElement = document.getElementById('unit-name');
+            const typeElement = document.getElementById('unit-type').querySelector('span');
+            const healthElement = document.getElementById('unit-health').querySelector('span');
+            const attackElement = document.getElementById('unit-attack').querySelector('span');
+            const defenseElement = document.getElementById('unit-defense').querySelector('span');
+            const statusElement = document.getElementById('unit-status').querySelector('span');
+            nameElement.textContent = `${unit.team.name} ${unit.type.name}`;
+            typeElement.textContent = unit.type.name;
+            healthElement.textContent = `${Math.max(0, Math.floor(unit.health))} / ${unit.maxHealth}`;
+            attackElement.textContent = unit.attack;
+            defenseElement.textContent = unit.defense;
+            statusElement.textContent = unit.status;
+            // Set team color for the unit name
+            nameElement.style.color = unit.team.primaryColor;
+            // Show the info panel
+            const infoPanel = document.getElementById('info-panel');
+            infoPanel.classList.remove('hidden');
+            break;
+        }
+    }
+    if (!unitClicked) {
+        console.log("No unit clicked");
+    }
+}
+// Initialize the game
+function initializeGame() {
+    // Initialize game components
+    initializeUnits();
+    // Add event listeners
+    canvas.addEventListener('click', handleCanvasClick);
+    document.getElementById('close-info').addEventListener('click', () => {
+        document.getElementById('info-panel').classList.add('hidden');
+        if (selectedUnit) {
+            selectedUnit.selected = false;
+            selectedUnit = null;
+        }
+    });
+    // Start the game loop
+    requestAnimationFrame(gameLoop);
+    console.log("Battle simulator initialized successfully");
+}

styles.css ADDED Viewed

	@@ -0,0 +1,95 @@

+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    padding: 20px;
+}
+.container {
+    max-width: 1000px;
+    margin: 0 auto;
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+h1 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #333;
+}
+.battlefield {
+    position: relative;
+}
+canvas {
+    display: block;
+    margin: 0 auto;
+    border: 1px solid #ccc;
+    background-color: #e8f4e5;
+}
+#info-panel {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background-color: rgba(255, 255, 255, 0.95);
+    padding: 20px;
+    border-radius: 8px;
+    border: 2px solid #4a6ea9;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    width: 300px;
+    z-index: 10;
+    transition: all 0.3s ease;
+    animation: fadeIn 0.3s ease-out;
+}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+#info-panel h3 {
+    margin-bottom: 15px;
+    color: #333;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 10px;
+}
+#info-panel p {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+}
+#close-info {
+    display: block;
+    margin: 20px auto 0;
+    padding: 8px 16px;
+    background-color: #4a6ea9;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+#close-info:hover {
+    background-color: #3a5a89;
+}
+.hidden {
+    display: none;
+}