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(); } });