var player;
var asteroids = [];
var particles = [];
var stars = [];

var score = 0;
var highScore = 0;

var gameState = "playing";

var spawnTimer = 0;
var spawnRate = 48;

var screenShake = 0;

var fontSize;

function setup() {

var canvas = createCanvas(
        min(windowWidth, 1100),
        min(windowHeight, 700)
    );

canvas.parent("game");

angleMode(RADIANS);

pixelDensity(1);

player = new Player();

for (var i = 0; i < 180; i++) {
        stars.push(
            new Star()
        );
    }

textFont("Arial");

noStroke();
}

function draw() {

background(
        4,
        7,
        15
    );

drawBackground();

push();

/*
     * Screen shake
     */

if (screenShake > 0) {

translate(
            random(-screenShake, screenShake),
            random(-screenShake, screenShake)
        );

screenShake *= 0.88;

if (screenShake < .2) {
            screenShake = 0;
        }
    }

if (gameState === "playing") {

updateStars();

updateGame();

} else {

updateStars();

drawGame();
    }

pop();

drawHUD();

if (gameState === "gameover") {
        drawGameOver();
    }
}

/* =========================================
   BACKGROUND
========================================= */

function drawBackground() {

/*
     * Vertical gradient
     */

for (var y = 0; y < height; y += 4) {

var t = y / height;

var r = lerp(7, 12, t);
        var g = lerp(12, 18, t);
        var b = lerp(27, 35, t);

stroke(r, g, b);

line(
            0,
            y,
            width,
            y
        );
    }

noStroke();

/*
     * Large atmospheric glow
     */

var gx = width * .72;
    var gy = height * .28;

for (var r = 180; r > 0; r -= 12) {

var alpha =
            map(
                r,
                180,
                0,
                0,
                12
            );

fill(
            60,
            110,
            255,
            alpha
        );

ellipse(
            gx,
            gy,
            r * 2,
            r * 2
        );
    }
}

/* =========================================
   GAME UPDATE
========================================= */

function updateGame() {

player.update();
    player.draw();

/*
     * Spawn asteroids
     */

spawnTimer++;

if (spawnTimer > spawnRate) {

asteroids.push(
            new Asteroid()
        );

spawnTimer = 0;

spawnRate =
            max(
                18,
                48 - score * .12
            );
    }

/*
     * Asteroids
     */

for (
        var i = asteroids.length - 1;
        i >= 0;
        i--
    ) {

var asteroid =
            asteroids[i];

asteroid.update();
        asteroid.draw();

/*
         * Collision
         */

var d =
            dist(
                player.x,
                player.y,
                asteroid.x,
                asteroid.y
            );

if (
            d <
            asteroid.radius +
            player.radius * .65
        ) {

explodePlayer();

gameState =
                "gameover";

highScore =
                max(
                    highScore,
                    score
                );

break;
        }

/*
         * Remove offscreen
         */

if (
            asteroid.y >
            height + 100
        ) {

asteroids.splice(
                i,
                1
            );

score++;
        }
    }

/*
     * Particles
     */

updateParticles();

/*
     * Score slowly increases
     */

if (
        frameCount % 30 === 0
    ) {

score++;
    }
}

/* =========================================
   DRAW GAME
========================================= */

function drawGame() {

player.draw();

for (
        var i = 0;
        i < asteroids.length;
        i++
    ) {

asteroids[i].draw();
    }

drawParticles();
}

/* =========================================
   PLAYER
========================================= */

function Player() {

this.x = width / 2;
    this.y = height - 110;

this.radius = 22;

this.speed = 7;

this.angle = 0;

this.trail = [];

this.update = function() {

var dx = 0;
        var dy = 0;

if (
            keyIsDown(LEFT_ARROW) ||
            keyIsDown(65)
        ) {
            dx--;
        }

if (
            keyIsDown(RIGHT_ARROW) ||
            keyIsDown(68)
        ) {
            dx++;
        }

if (
            keyIsDown(UP_ARROW) ||
            keyIsDown(87)
        ) {
            dy--;
        }

if (
            keyIsDown(DOWN_ARROW) ||
            keyIsDown(83)
        ) {
            dy++;
        }

/*
         * Keyboard movement
         */

this.x += dx * this.speed;
        this.y += dy * this.speed;

/*
         * Mouse movement
         */

if (
            mouseIsPressed
        ) {

this.x +=
                (mouseX - this.x) *
                .08;

this.y +=
                (mouseY - this.y) *
                .08;
        }

/*
         * Bounds
         */

this.x =
            constrain(
                this.x,
                35,
                width - 35
            );

this.y =
            constrain(
                this.y,
                60,
                height - 45
            );

/*
         * Rotation
         */

this.angle =
            dx * .18;

/*
         * Engine trail
         */

this.trail.push({
            x: this.x,
            y: this.y + 22
        });

if (
            this.trail.length > 12
        ) {

this.trail.shift();
        }

/*
         * Create engine particle
         */

if (
            frameCount % 2 === 0
        ) {

particles.push(
                new Particle(
                    this.x +
                    random(-5, 5),

this.y + 20,

random(-.5, .5),

random(2, 5),

255,
                    190,
                    70
                )
            );
        }
    };

this.draw = function() {

push();

translate(
            this.x,
            this.y
        );

rotate(
            this.angle
        );

/*
         * Glow
         */

for (
            var glow = 45;
            glow > 10;
            glow -= 7
        ) {

fill(
                30,
                190,
                255,
                4
            );

ellipse(
                0,
                0,
                glow,
                glow
            );
        }

/*
         * Engine
         */

fill(
            255,
            190,
            50,
            170
        );

triangle(
            -7,
            12,
            7,
            12,
            0,
            31
        );

/*
         * Ship body
         */

fill(
            225,
            238,
            250
        );

beginShape();

vertex(
            0,
            -27
        );

vertex(
            17,
            18
        );

vertex(
            6,
            13
        );

vertex(
            0,
            20
        );

vertex(
            -6,
            13
        );

vertex(
            -17,
            18
        );

endShape(
            CLOSE
        );

/*
         * Cockpit
         */

fill(
            42,
            170,
            220
        );

ellipse(
            0,
            -5,
            10,
            14
        );

/*
         * Wing highlights
         */

fill(
            90,
            220,
            255
        );

triangle(
            -15,
            16,
            -7,
            7,
            -4,
            13
        );

triangle(
            15,
            16,
            7,
            7,
            4,
            13
        );

pop();
    };
}

/* =========================================
   ASTEROID
========================================= */

function Asteroid() {

this.radius =
        random(
            13,
            32
        );

this.x =
        random(
            this.radius,
            width - this.radius
        );

this.y =
        -this.radius - 20;

this.speed =
        random(2.5, 5.5) +
        score * .006;

this.rotation =
        random(
            -0.04,
            0.04
        );

this.angle =
        random(
            TWO_PI
        );

this.points = [];

var count =
        floor(
            random(7, 11)
        );

for (
        var i = 0;
        i < count;
        i++
    ) {

this.points.push({
            angle:
                TWO_PI *
                i /
                count,

radius:
                this.radius *
                random(
                    .75,
                    1.25
                )
        });
    }

this.update =
        function() {

this.y +=
                this.speed;

this.angle +=
                this.rotation;
        };

this.draw =
        function() {

push();

translate(
                this.x,
                this.y
            );

rotate(
                this.angle
            );

/*
             * Glow
             */

fill(
                255,
                95,
                75,
                8
            );

ellipse(
                0,
                0,
                this.radius * 2.8,
                this.radius * 2.8
            );

/*
             * Asteroid
             */

fill(
                78,
                87,
                103
            );

beginShape();

for (
                var i = 0;
                i < this.points.length;
                i++
            ) {

var p =
                    this.points[i];

vertex(
                    cos(p.angle) *
                    p.radius,

sin(p.angle) *
                    p.radius
                );
            }

endShape(
                CLOSE
            );

/*
             * Craters
             */

fill(
                48,
                54,
                65,
                170
            );

ellipse(
                -this.radius * .25,
                -this.radius * .12,
                this.radius * .28,
                this.radius * .18
            );

ellipse(
                this.radius * .24,
                this.radius * .25,
                this.radius * .2,
                this.radius * .16
            );

ellipse(
                this.radius * .15,
                -this.radius * .3,
                this.radius * .16,
                this.radius * .13
            );

pop();
        };
}

/* =========================================
   STAR
========================================= */

function Star() {

this.x =
        random(width);

this.y =
        random(height);

this.size =
        random(
            .5,
            2.4
        );

this.speed =
        random(
            .2,
            1.1
        );

this.alpha =
        random(
            50,
            200
        );

this.update =
        function() {

this.y +=
                this.speed;

if (
                this.y >
                height
            ) {

this.y = 0;

this.x =
                    random(width);
            }
        };

this.draw =
        function() {

fill(
                220,
                235,
                255,
                this.alpha
            );

circle(
                this.x,
                this.y,
                this.size
            );
        };
}

function updateStars() {

for (
        var i = 0;
        i < stars.length;
        i++
    ) {

stars[i].update();
        stars[i].draw();
    }
}

/* =========================================
   PARTICLE
========================================= */

function Particle(
    x,
    y,
    vx,
    vy,
    r,
    g,
    b
) {

this.x = x;
    this.y = y;

this.vx = vx;
    this.vy = vy;

this.life = 1;

this.size =
        random(2, 6);

this.r = r;
    this.g = g;
    this.b = b;

this.update =
        function() {

this.x +=
                this.vx;

this.y +=
                this.vy;

this.life -=
                .035;
        };

this.draw =
        function() {

fill(
                this.r,
                this.g,
                this.b,
                this.life * 180
            );

circle(
                this.x,
                this.y,
                this.size *
                this.life
            );
        };
}

function updateParticles() {

for (
        var i = particles.length - 1;
        i >= 0;
        i--
    ) {

particles[i].update();

if (
            particles[i].life <= 0
        ) {

particles.splice(
                i,
                1
            );
        }
    }
}

function drawParticles() {

for (
        var i = 0;
        i < particles.length;
        i++
    ) {

particles[i].draw();
    }
}

/* =========================================
   EXPLOSION
========================================= */

function explodePlayer() {

for (
        var i = 0;
        i < 70;
        i++
    ) {

var a =
            random(TWO_PI);

var speed =
            random(1, 7);

particles.push(
            new Particle(
                player.x,
                player.y,
                cos(a) * speed,
                sin(a) * speed,
                50,
                200,
                255
            )
        );
    }

screenShake = 10;
}

/* =========================================
   HUD
========================================= */

function drawHUD() {

fill(
        255,
        255,
        255,
        230
    );

textAlign(
        LEFT,
        TOP
    );

textSize(20);

text(
        "NEON DODGE",
        24,
        22
    );

fill(
        120,
        145,
        175
    );

textSize(9);

text(
        "SURVIVE THE ASTEROID FIELD",
        25,
        48
    );

/*
     * Score
     */

textAlign(
        RIGHT,
        TOP
    );

fill(
        100,
        220,
        255
    );

textSize(14);

text(
        "SCORE  " +
        String(score).padStart(5, "0"),
        width - 25,
        24
    );

/*
     * Controls
     */

textAlign(
        CENTER,
        BOTTOM
    );

fill(
        115,
        135,
        160,
        180
    );

textSize(9);

text(
        "ARROW KEYS / WASD  •  MOUSE TO STEER",
        width / 2,
        height - 18
    );
}

/* =========================================
   GAME OVER
========================================= */

function drawGameOver() {

/*
     * Dark overlay
     */

fill(
        3,
        6,
        14,
        185
    );

rect(
        0,
        0,
        width,
        height
    );

textAlign(
        CENTER,
        CENTER
    );

fill(
        255
    );

textSize(
        min(
            44,
            width * .09
        )
    );

text(
        "GAME OVER",
        width / 2,
        height / 2 - 55
    );

fill(
        100,
        220,
        255
    );

textSize(18);

text(
        "SCORE " +
        String(score).padStart(5, "0"),
        width / 2,
        height / 2
    );

fill(
        150,
        165,
        185
    );

textSize(11);

text(
        "CLICK OR PRESS SPACE TO RESTART",
        width / 2,
        height / 2 + 45
    );
}

/* =========================================
   RESTART
========================================= */

function restartGame() {

score = 0;

spawnTimer = 0;

spawnRate = 48;

asteroids = [];

particles = [];

player =
        new Player();

gameState =
        "playing";
}

function mousePressed() {

if (
        gameState === "gameover"
    ) {

restartGame();
    }
}

function keyPressed() {

if (
        key === " "
    ) {

if (
            gameState === "gameover"
        ) {

restartGame();
        }
    }
}

/* =========================================
   RESIZE
========================================= */

function windowResized() {

resizeCanvas(
        min(windowWidth, 1100),
        min(windowHeight, 700)
    );

if (player) {

player.x =
            constrain(
                player.x,
                35,
                width - 35
            );

player.y =
            constrain(
                player.y,
                60,
                height - 45
            );
  }
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground