Skip to content

Instantly share code, notes, and snippets.

@mozz100

mozz100/fa-cup.js

Last active January 31, 2023 21:06
Show Gist options
  • Save mozz100/664321377ffb6717e9ac42f5047f4e60 to your computer and use it in GitHub Desktop.
Save mozz100/664321377ffb6717e9ac42f5047f4e60 to your computer and use it in GitHub Desktop.
Download ZIP
Visualise some FA cup fixtures... which one is the best one to go to?
Raw
fa-cup.js
'use strict';
var config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
width: 500,
height: 500,
scene: {
preload: preload,
create: create
},
backgroundColor: new Phaser.Display.Color(255, 255, 255)
};
var game = new Phaser.Game(config);
var mainGraphics;
var highlightGraphics;
var house;
const pointSize = 10;
const origin = new Phaser.Geom.Point(0, 0);
var fixtures = [];
const numFixtures = 32;
function preload() {
}
function draggable(game, color, x, y, size) {
size = (size === undefined) ? pointSize : size;
var graphics = game.add.graphics({ fillStyle: { color: color } });
graphics.fillPointShape(origin, size);
var container = game.add.container(x, y, [graphics]);
container.setSize(pointSize, pointSize);
container.setAlpha(1);
container.setInteractive();
game.input.setDraggable(container)
return container;
}
function create() {
mainGraphics = this.add.graphics({
lineStyle: { width: 2, color: 0x999999 }
});
highlightGraphics = this.add.graphics({
lineStyle: { width: 5, color: 0x134611 },
});
house = draggable(this, 0xe8871e, config.width / 2, config.height/2, 30);
house.setAlpha(1);
for (var i = 0; i < numFixtures; i++) {
var homeTeam = draggable(this, 0x73a347, Math.floor(Math.random() * config.width), Math.floor(Math.random() * config.height));
var awayTeam = draggable(this, 0x2274a5, Math.floor(Math.random() * config.width), Math.floor(Math.random() * config.height), 0);
fixtures.push({
home: homeTeam,
away: awayTeam
});
}
function updateGraphics(i) {
var fixture = fixtures[i];
mainGraphics.lineBetween(fixture.home.x, fixture.home.y, fixture.away.x, fixture.away.y);
var midPoint = Phaser.Geom.Point.Interpolate(fixture.home, fixture.away, 0.5);
var homeDistance = Phaser.Math.Distance.Between(house.x, house.y, fixture.home.x, fixture.home.y);
var awayDistance = Phaser.Math.Distance.Between(house.x, house.y, fixture.away.x, fixture.away.y);
var otherDistance = 0
for (var k = 0; k < fixtures.length; k++) {
if (k !== i) {
otherDistance += Phaser.Math.Distance.Between(house.x, house.y, fixtures[k].home.x, fixtures[k].home.y);
otherDistance += Phaser.Math.Distance.Between(house.x, house.y, fixtures[k].away.x, fixtures[k].away.y);
}
}
var totScore = parseInt(1520 * homeDistance + 496 * awayDistance + 4128 * otherDistance / (2 * (fixtures.length - 1)));
fixture.score = totScore;
}
for (var j = 0; j < numFixtures; j++) {
updateGraphics(j);
}
var showBestGame = function(pointer, gameObject, dragX, dragY) {
if (gameObject !==undefined) {
gameObject.x = dragX;
gameObject.y = dragY;
}
mainGraphics.clear();
for (var j = 0; j < numFixtures; j++) {
updateGraphics(j);
}
var scores = fixtures.map(({ score }) => score);
var minScore = Math.min(...scores);
highlightGraphics.clear();
for (var k = 0; k < numFixtures; k++) {
var fixture = fixtures[k];
if (fixture.score == minScore) {
fixture.home.setAlpha(1);
fixture.away.setAlpha(1);
highlightGraphics.lineBetween(fixture.home.x, fixture.home.y, fixture.away.x, fixture.away.y);
} else {
fixture.home.setAlpha(0.7);
fixture.away.setAlpha(0.7);
}
}
}
this.input.on('drag', showBestGame);
showBestGame();
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>
<style>
html, body {
background-color: white;
}
</style>
</head>
<body>
<script src="fa-cup.js">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment