JSFiddle - React, Tailwind, and code Playground
HTML
<div id="game_area"> </div>
JavaScript
// Initialize Phaser
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game_area', {
create: create,
render: render
});
var points = [];
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 points:
function distance(point1, point2) {
x = point1.x - point2.x;
y = point1.y - point2.y;
return Math.sqrt((x * x) + (y * y));
}
function createPoints(game){
point = game.add.sprite(game.world.randomX,game.world.randomY,game.cache.getBitmapData('blueShade'));
game.physics.arcade.enable(point);
point.body.collideWorldBounds = true;
point.body.bounce.set(1);
point.body.velocity.x = game.rnd.realInRange(-25, 25);
point.body.velocity.y = game.rnd.realInRange(-25, 25);
points.push(point)
}
function create(){
this.stage.backgroundColor = '#3A5963';
// Create our bitmapData which we'll use as a Sprite texture
var bmd = this.add.bitmapData(2, 2);
// Fill it
var grd = bmd.context.createLinearGradient(0, 0, 0, 32);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
bmd.context.fillStyle = grd;
bmd.context.fillRect(0, 0, 2, 2);
this.cache.addBitmapData('blueShade', bmd);
this.physics.startSystem(Phaser.Physics.ARCADE);
// Create the points
for (var i = 0; i < 25; i++) {
createPoints(this);
}
// create the lines:
// 1. iterate over every point
for (var i = 0; i < points.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 < points.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 = points[i];
line.data.endPoint = points[k];
// add the line to the lines array
lines.push(line);
}
}
}
//...