Asteroids/src/index.js

import * as paper from "paper";

let objects = [];

class Object{
    constructor(size, position, velocity, path){
        this.size = size;
        this.position = position;
        this.velocity = velocity;
        this.path = path;
        objects.push(this);
    }

    update(){
        this.position = this.position.add(this.velocity);
        this.path.position = this.position;

        if(this.position.x > canvas.width + this.size){
            this.position = new paper.Point(-this.size,  this.position.y);
        }else if(this.position.x < -this.size){
            this.position = new paper.Point(canvas.width+this.size,  this.position.y);
        }

        if(this.position.y > canvas.height + this.size){
            this.position = new paper.Point(this.position.x,  -this.size);
        }else if(this.position.y < -this.size){
            this.position = new paper.Point(this.position.x,  canvas.height+this.size);
        }
    }
}

class Asteroid extends Object{
    constructor(size, position, velocity=new paper.Point(0, 0)){
        let path = new paper.Path.RegularPolygon(position, Math.max(5, Math.ceil(Math.random()*10)), size);
        path.segments.forEach(elem => {
            elem.point = elem.point.add(new paper.Point(Math.random()*15, Math.random()*15));
        });
        path.strokeColor = "#ffffff";
        super(size, position, velocity, path);
    }  
}

class Ship extends Object{
    constructor(size, position){
        let nodes = [
            new paper.Point(position.x, position.y-size),
            new paper.Point(position.x+size/2, position.y),
            new paper.Point(position.x-size/2, position.y),
            new paper.Point(position.x, position.y-size) 
        ];

        let path = new paper.Path(nodes);
        path.strokeColor = "#ffffff";
        path.fillColor = "#ffffffee";
        
        super(size, position, new paper.Point(0, 0), path);
        this.forward = nodes[0].subtract(position);
    }

    rotate(angle){
        this.forward.angle += angle;
        this.path.rotate(angle)
    }

    fire(){
        new Bullet(this.position, this.forward);
    }
};

class Bullet extends Object{
    constructor(position, velocity){
        let path = new paper.Path.Circle(position, 3);
        path.fillColor = "#ffffff";
        super(3, position, velocity, path);
    }
}

//initialization
const canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
paper.setup(canvas);

const ship = new Ship(30, new paper.Point(canvas.width/2, canvas.height/2));
for(let i=0; i<30; i++){
    new Asteroid(30, new paper.Point(Math.random()* canvas.width, Math.random()*canvas.height), new paper.Point(Math.random()*5, Math.random()*5));
}

paper.view.onFrame = (event) => {
    objects.forEach(elem => {
        elem.update();
    });
}

const tool = new paper.Tool();

tool.on("keydown", (event) => {
    if(event.character == "w"){
        ship.velocity = ship.velocity.add(ship.forward.normalize());
    }

    if(event.key == "right"){
        ship.rotate(3);
    }else if(event.key == "left"){
        ship.rotate(-3);
    }

    if(event.key == "space"){
        ship.fire();
    }
});