add event handling

src/index.js

@@ -7,7 +7,10 @@ class Asteroid{
         this.size = size;
         this.position = position;
         this.velocity = velocity;
-        this.path = new paper.Path.RegularPolygon(this.position, Math.max(4, Math.ceil(Math.random()*10)), this.size);
+        this.path = new paper.Path.RegularPolygon(this.position, Math.max(5, Math.ceil(Math.random()*10)), this.size);
+        this.path.segments.forEach(elem => {
+            elem.point = elem.point.add(new paper.Point(Math.random()*15, Math.random()*15));
+        });
         this.path.strokeColor = "#ffffff";
         objects.push(this);
     }
@@ -34,7 +37,7 @@ class Ship{
     constructor(size, position){
         this.size = size;
         this.position = position;
-        this.rotation = 0;
+        this.velocity = new paper.Point(0, 0);
         this.nodes = [
             new paper.Point(this.position.x, this.position.y-this.size),
             new paper.Point(this.position.x+this.size/2, this.position.y),
@@ -48,7 +51,8 @@ class Ship{
     }
 
     update(){
-        this.path.rotate(this.rotation);
+        this.position = this.position.add(this.velocity);
+        this.path.position = this.position;
 
         if(this.position.x > canvas.width + 30){
             this.position = new paper.Point(-this.size,  this.position.y);
@@ -72,7 +76,7 @@ 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(30, 40), new paper.Point(Math.random()*5, Math.random()*5));
+    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) => {
@@ -80,3 +84,17 @@ paper.view.onFrame = (event) => {
         elem.update();
     });
 }
+
+const tool = new paper.Tool();
+
+tool.on("keydown", (event) => {
+    if(event.character == "w"){
+        ship.velocity = ship.velocity.add(ship.nodes[0].subtract(new paper.Point(canvas.width/2, 0)).normalize());
+    }
+
+    if(event.key == "right"){
+        ship.path.rotate(10);
+    }else if(event.key == "left"){
+        ship.path.rotate(-10);
+    }
+});