State-driven game loop, player control, score updates, pause/restart behavior and procedural meteor spawning.
PROGRAMMING PORTFOLIO
Cosmic Evolution: an interactive HTML5 game built for portfolio proof.
A playable Canvas project showing JavaScript game logic, collision detection, procedural spawning, XP progression, particle effects and simplified gravity in a visual style connected to the TeoGame&3D portfolio.
INTERACTIVE HTML5 GAME
Cosmic Evolution
Move with mouse, keyboard or finger drag. Quick tap/click creates a supernova pulse. Smaller bodies are pulled into orbit before collision, while heavier impacts should be avoided until you evolve.
WHAT THIS PROJECT DEMONSTRATES
A practical coding sample, not just a visual effect.
The game runs directly in the browser as a static site, but the systems are structured like reusable game logic: state, input, rendering, collisions, progression and feedback.
Animated starfield, player forms, particles, collision bursts, supernova rings and responsive drawing.
Distance-based collisions, mass comparison, absorption rules, impact feedback and XP rewards.
Mass and distance based capture, orbital drift, velocity damping and controlled attraction for playable Solar-2-inspired movement.
Growth, level stages, larger radius, stronger glow and final forms that can trigger supernova-scale effects.
Separate HTML, CSS and JavaScript files, readable functions and a focused static-site implementation.
AI-ASSISTED WORKFLOW
Responsible acceleration, not blind copying.
AI can support brainstorming, debugging, structuring and rapid iteration. The value of this page is in adapting the logic to a real static website, testing the interaction, refining performance and keeping the final result understandable.
MANUAL PROGRAMMING LOGIC
Systems that can be inspected and extended.
Collision checks, scoring, evolution thresholds, input handling and visual feedback are written as explicit game systems. They can be changed manually: new stages, new hazards, better gravity, health, missions or save-state logic.
BACKEND / LOGIC CONCEPTS
How similar logic could be expressed outside a static website.
These snippets are conceptual examples for scoring, levels and collisions. They are not presented as a live backend for this static page.
Python concept
def evolve(player):
stages = ["meteorite", "satellite", "planet", "star",
"neutron_star", "black_hole", "supernova_core"]
index = min(player.xp // 280, len(stages) - 1)
player.stage = stages[index]
player.radius = 18 + index * 7
def collides(a, b):
dx = a.x - b.x
dy = a.y - b.y
return (dx * dx + dy * dy) ** 0.5 < a.radius + b.radius
def gravity_force(source, target):
distance = max(source.distance_to(target), 40)
return (source.mass * target.mass) / (distance * distance)
C# concept
bool Collides(Body a, Body b)
{
float dx = a.X - b.X;
float dy = a.Y - b.Y;
float distance = MathF.Sqrt(dx * dx + dy * dy);
return distance < a.Radius + b.Radius;
}
void AddScore(Player player, Body meteor)
{
player.Score += meteor.Value;
player.Xp += meteor.Value * 2;
player.UpdateEvolutionStage();
}
TECHNOLOGIES USED
Static-site friendly implementation.
- HTML5 semantic page structure
- CSS responsive layout and cosmic visual system
- JavaScript game loop with Canvas API
- Mouse, keyboard and touch input
- Procedural generation, particles and UI state management