Clash of Vikings

Seele01-Flash
By
Clash of Vikings is an engaging strategic battle game that combines deck-building mechanics with tactical warfare. Command Viking armies, customize your battle deck, and engage in epic tower destruction battles.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Clash of Vikings - 3D Tower Defense Strategy". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Recreate the cartoonish, vibrant aesthetic of the reference image using **Low-Poly 3D models** with **Toon Shading (Cel Shading)**. The color palette should be high-saturation (bright greens for grass, bold blues for player units, reds for enemy units). * **Battlefield Layout**: A rectangular arena divided by a river in the middle. Two bridges connecting the player side (bottom) and enemy side (top). * **Ground**: A green checkerboard texture (like the screenshot) representing grass. * **Structures**: Each side has 1 Main Castle (King Tower) and 2 Guard Towers (Princess Towers). Use simple geometric compositions (cylinders/cones) to represent these if assets are unavailable. * **Characters (Units)**: Create placeholder geometries for three distinct unit classes based on the screenshot: * **Tank Viking**: Large, slow, high HP (Blue Cube/Cylinder). * **Archer**: Small, ranged attacks (Blue Cone). * **Berserker**: Medium speed, melee high damage (Blue Sphere). * **Mobile Optimization**: Use `THREE.InstancedMesh` for rendering multiple units to maintain 60FPS on mobile devices. Limit shadow casting to the main towers only. ### 2. Audio Requirements * **BGM**: A looping, rhythmic "Nordic War Drums" track with a flute melody—energetic but strategic. * **Sound Effects (SFX)**: * **UI**: crisp "wooden click" sounds when selecting cards. * **Spawn**: A magical "poof" or "thud" sound when a unit is placed on the field. * **Combat**: Metal clashing, arrow "whoosh" sounds, and a crumbling stone sound when a tower is destroyed. * **Alert**: A horn sound when the "Final 60 Seconds" begins. ### 3. Gameplay Loop * **Resource System (Elixir)**: Implement an Elixir bar (0-10 cap) that regenerates at 1 point per 2 seconds. * **Mechanic**: During the final 60 seconds of the match, double the regeneration rate (1 point per 1 second). * **Card System**: * A "Hand" of 4 visible cards at the bottom of the screen. * Each card represents a unit type and has a specific Elixir cost (e.g., Tank: 5, Archer: 3). * **Combat Logic**: * **Deployment**: Player drags a card to their side of the arena to spawn a unit. * **AI Behavior**: Units automatically move toward the nearest enemy building via the bridges. If an enemy unit enters their aggro radius, they stop moving and attack. * **Win Condition**: Destroy the enemy's Main Castle to win instantly, or destroy more towers than the enemy when the 3-minute timer runs out. ### 4. Mobile Controls & Interaction * **Screen Orientation**: **Portrait Mode** optimized. The camera should be fixed at a high angle (isometric-like), looking from the player's side toward the enemy. * **Touch Interactions**: * **Drag & Drop**: Implement Raycasting. When the user touches a card, a "Ghost" model of the unit follows their finger on the 3D ground plane. * **Valid Placement Area**: The "Ghost" model should turn red if dragged onto the enemy side or the river (invalid placement) and green on the player's side (valid placement). * **Release**: On `touchend`, if the placement is valid and Elixir is sufficient, deduct cost and spawn the entity. * **UI Overlay**: Use a responsive HTML/CSS overlay on top of the Three.js canvas. * **Cards**: Large touch targets (min 60x80px) at the bottom. * **Feedback**: Visual vibration (screen shake) slightly when a tower takes damage. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Clash of Vikings is a captivating strategic battle game that puts you in command of fierce Viking warriors. This free-to-play browser game combines the excitement of real-time strategy with deck-building mechanics, creating an immersive tactical warfare experience. Players must strategically summon Viking units, manage resources, and destroy enemy towers while defending their own stronghold.

Core Features

Strategic Deck Building System

The game features a comprehensive deck customization system with eight unique cards. Each card represents different Viking units, spells, or abilities that you can strategically deploy during battle. The deck-building element allows you to:

  • Customize Your Strategy : Build decks that match your preferred playstyle, whether defensive or aggressive
  • Diverse Unit Types : Choose from ranged archers, powerful tank-like warlords, and magical spells
  • Strategic Depth : Each card has different elixir costs and tactical applications

Dynamic Battle Mechanics

Every battle is a test of tactical skill and resource management. The elixir system adds strategic depth by requiring careful timing and resource allocation. Key battle features include:

  • Real-time Combat : Deploy units instantly by dragging them onto the battlefield
  • Resource Management : Balance elixir spending with tactical positioning
  • Escalating Intensity : Final 60 seconds feature double elixir regeneration for explosive endings
  • Tower Destruction Victory : Win by destroying more enemy towers than your opponent

Authentic Viking Theme

Immerse yourself in Norse mythology with beautifully crafted Viking-themed graphics and units. The game successfully blends historical Viking warfare with fantasy elements, creating an engaging and visually appealing experience.

Gameplay Mechanics

Unit Deployment and Strategy

Success in Clash of Vikings requires mastering the art of tactical deployment. Each Viking unit serves a specific purpose on the battlefield:

  • Melee Warriors : Strong frontline fighters perfect for absorbing damage
  • Ranged Archers : Excellent for supporting attacks and defending positions
  • Viking Warlords : Tank units with high health and devastating attack power
  • Magical Spells : Surprise elements that can turn the tide of battle

Elixir Management System

The elixir system is central to the game's strategic depth. Players must carefully balance their elixir expenditure to maintain consistent pressure while preparing for crucial moments. The accelerated elixir regeneration in the final minute creates intense, action-packed conclusions to matches.

Operation Guide

Basic Controls

  • Mouse Controls : Use left mouse button to drag and deploy units
  • Card Selection : Click on cards in your hand to select them
  • Unit Deployment : Drag selected cards onto the battlefield to summon units
  • Strategy Planning : Monitor elixir levels and plan your next moves accordingly

Winning Strategies

  1. Balanced Approach : Mix offensive and defensive units for versatile gameplay
  2. Resource Timing : Save elixir for crucial counter-attacks
  3. Unit Synergy : Combine different unit types for maximum effectiveness
  4. End-game Preparation : Plan for the double elixir final phase

Platform Support

Clash of Vikings is designed as a web browser game, offering: - Universal Access : Play directly in any modern web browser - Cross-platform Compatibility : Supports both desktop and mobile devices - No Download Required : Instant access without installation - Optimized Performance : Smooth gameplay across different device types

Why Play Clash of Vikings

This game stands out in the strategic battle genre by combining accessible gameplay with deep tactical elements. Whether you're a casual gamer looking for quick battles or a strategy enthusiast seeking complex tactical challenges, Clash of Vikings delivers an engaging experience. The Viking theme, combined with modern game mechanics, creates a unique and memorable gaming experience that keeps players coming back for more epic battles.

Frequently Asked Questions (FAQ)