127 lines
3.9 KiB
JavaScript
127 lines
3.9 KiB
JavaScript
import {Meteor} from 'meteor/meteor';
|
|
import App from '../imports/ui/App.svelte';
|
|
import '../imports/startup/accounts-config.js';
|
|
import Phaser from 'phaser';
|
|
|
|
Meteor.startup(() => {
|
|
new App({
|
|
target: document.getElementById('app')
|
|
});
|
|
|
|
|
|
|
|
|
|
class playGame extends Phaser.Scene {
|
|
constructor() {
|
|
super("PlayGame");
|
|
}
|
|
create() {
|
|
// graphic object used to draw walls
|
|
this.wallGraphics = this.add.graphics();
|
|
this.wallGraphics.lineStyle(1, 0x00ff00);
|
|
|
|
// graphic object used to draw rays of light
|
|
this.lightGraphics = this.add.graphics();
|
|
|
|
// array with all polygons in game
|
|
this.polygons = [];
|
|
|
|
// add random boxes
|
|
for(let i = 0; i < gameOptions.boxes; i ++){
|
|
this.addRandomBox();
|
|
}
|
|
|
|
// walls around game perimeter
|
|
this.polygons.push([[-1, -1], [game.config.width + 1, -1], [game.config.width + 1, game.config.height+1], [-1, game.config.height + 1]]);
|
|
|
|
// listener for input movement
|
|
this.input.on("pointermove", this.renderLight, this);
|
|
}
|
|
addRandomBox() {
|
|
// use a do...while statement because there can't be intersecting polygons
|
|
do {
|
|
// random x and y coordinates, width and height
|
|
var startX = Phaser.Math.Between(10, game.config.width - 10 - gameOptions.sizeRange.max);
|
|
var startY = Phaser.Math.Between(10, game.config.height - 10 - gameOptions.sizeRange.max);
|
|
var width = Phaser.Math.Between(gameOptions.sizeRange.min, gameOptions.sizeRange.max);
|
|
var height = Phaser.Math.Between(gameOptions.sizeRange.min, gameOptions.sizeRange.max);
|
|
|
|
// check if current box intersects other boxes
|
|
} while(this.boxesIntersect(startX, startY, width, height));
|
|
|
|
// draw the box
|
|
this.wallGraphics.strokeRect(startX, startY, width, height);
|
|
|
|
// insert box vertices into polygons array
|
|
this.polygons.push([[startX, startY], [startX + width, startY], [startX + width, startY + height], [startX, startY + height]]);
|
|
}
|
|
// method to check if the box intersects other boxes
|
|
boxesIntersect(x, y, w, h) {
|
|
// loop through existing boxes
|
|
for(let i = 0; i < this.polygons.length; i ++) {
|
|
// if the box intersects the existing i-th box...
|
|
if(x < this.polygons[i][1][0] && x + w > this.polygons[i][0][0] && y < this.polygons[i][3][1] && y + h > this.polygons[i][0][1]){
|
|
// return true
|
|
return true;
|
|
}
|
|
}
|
|
// if we reach the end of the loop, return false
|
|
return false;
|
|
}
|
|
// method to render the light
|
|
renderLight(pointer) {
|
|
// determine light polygon starting from pointer coordinates
|
|
let visibility = this.createLightPolygon(pointer.x, pointer.y);
|
|
|
|
// clear and prepare lightGraphics graphic object
|
|
this.lightGraphics.clear();
|
|
this.lightGraphics.lineStyle(2, 0xff8800);
|
|
this.lightGraphics.fillStyle(0xffff00);
|
|
|
|
// begin a drawing path
|
|
this.lightGraphics.beginPath();
|
|
|
|
// move the graphic pen to first vertex of light polygon
|
|
this.lightGraphics.moveTo(visibility[0][0], visibility[0][1]);
|
|
|
|
// loop through all light polygon vertices
|
|
for(let i = 1; i <= visibility.length; i ++) {
|
|
// draw a line to i-th light polygon vertex
|
|
this.lightGraphics.lineTo(visibility[i % visibility.length][0], visibility[ i %visibility.length][1]);
|
|
}
|
|
|
|
// close, stroke and fill light polygon
|
|
this.lightGraphics.closePath();
|
|
this.lightGraphics.fillPath();
|
|
this.lightGraphics.strokePath();
|
|
}
|
|
// method to create light polygon using visibility_polygon.js
|
|
createLightPolygon(x, y) {
|
|
let segments = VisibilityPolygon.convertToSegments(this.polygons);
|
|
segments = VisibilityPolygon.breakIntersections(segments);
|
|
let position = [x, y];
|
|
if (VisibilityPolygon.inPolygon(position, this.polygons[this.polygons.length - 1])) {
|
|
return VisibilityPolygon.compute(position, segments);
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
|
|
let config = {
|
|
type: Phaser.AUTO,
|
|
parent: "game",
|
|
width: "100%",
|
|
height: "100%",
|
|
physics: {
|
|
default: 'arcade',
|
|
arcade: {
|
|
gravity: {y: 200}
|
|
}
|
|
},
|
|
scene: {
|
|
scene: playGame
|
|
}
|
|
};
|
|
|
|
let game = new Phaser.Game(config);
|
|
}); |