JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.1/phaser.min.js"></script>
<div id="game_area"> </div>
JavaScript
// Initialize Phaser
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game_area', {
create: create,
render: render
});
var circles = [];
var lines = [];
var MAX_CIRCLE_DISTANCE = 100; // this defines how far away the points are allowed to be for a line
// function to get the distance between two circles:
function distance(circle1, circle2) {
x = circle1.x - circle2.x;
y = circle1.y - circle2.y;
return Math.sqrt((x * x) + (y * y));
}
// create function:
function create() {
// set the background to white
game.stage.backgroundColor = "#FFFFFF";
// create circles at random places and add tem to the circles array:
for (var i = 0; i < 25; i++) {
// create a circle
circle = new Phaser.Circle(Math.random() * game.world.width, Math.random() * game.world.height, 5);
// add it to the circles array
circles.push(circle);
}
// create the lines:
// 1. iterate over every point
for (var i = 0; i < circles.length; i++) {
// 2. iterate over every other point
// k=(i+1) so that only points that do not already have a line are checked
for (var k = (i + 1); k < circles.length; k++) {
// create the line
line = new Phaser.Line();
// add references to the start and end points of the line
line.data = {};
line.data.startPoint = circles[i];
line.data.endPoint = circles[k];
// add the line to the lines array
lines.push(line);
}
}
}
// render function:
function render() {
// iterate over all circles:
for (var i = 0; i < circles.length; i++) {
// show the circle
game.debug.geom(circles[i], '#0000FF');
}
// iterate over all lines
for (var i = 0; i < lines.length; i++) {
// get the line
line = lines[i];
// check the distance between start and end point
if (distance(line.data.startPoint, line.data.endPoint) <...