111 lines
3.1 KiB
JavaScript
111 lines
3.1 KiB
JavaScript
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();
|
|
}
|
|
}); |