|
|
|
|
|
|
|
const app = new PIXI.Application({ transparent: true, width: innerWidth, height: innerHeight});
|
|
|
|
document.body.appendChild(app.view);
|
|
|
|
|
|
|
|
|
|
|
|
// holder to store the aliens
|
|
|
|
const aliens = [];
|
|
|
|
|
|
|
|
const totalDudes = 25;
|
|
|
|
|
|
|
|
for (let i = 0; i < totalDudes; i++) {
|
|
|
|
// create a new Sprite that uses the image name that we just generated as its source
|
|
|
|
const dude = PIXI.Sprite.from('../assets/simpleShapes.png');
|
|
|
|
|
|
|
|
// set the anchor point so the texture is centerd on the sprite
|
|
|
|
// dude.anchor.set();
|
|
|
|
|
|
|
|
// set a random scale for the dude - no point them all being the same size!
|
|
|
|
dude.scale.set( 0.03 + Math.random() * 0.8);
|
|
|
|
|
|
|
|
// finally lets set the dude to be at a random position..
|
|
|
|
dude.x = Math.random() * app.screen.width;
|
|
|
|
dude.y = Math.random() * app.screen.height;
|
|
|
|
|
|
|
|
// dude.tint = 0xFF00FF;
|
|
|
|
|
|
|
|
// create some extra properties that will control movement :
|
|
|
|
// create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees
|
|
|
|
dude.direction = Math.random() * Math.PI * 2;
|
|
|
|
|
|
|
|
// this number will be used to modify the direction of the dude over time
|
|
|
|
dude.turningSpeed = Math.random() ;
|
|
|
|
|
|
|
|
// create a random speed for the dude between 2 - 4
|
|
|
|
dude.speed = 2 + Math.random();
|
|
|
|
|
|
|
|
// finally we push the dude into the aliens array so it it can be easily accessed later
|
|
|
|
aliens.push(dude);
|
|
|
|
|
|
|
|
app.stage.addChild(dude);
|
|
|
|
}
|
|
|
|
|
|
|
|
// create a bounding box for the little dudes
|
|
|
|
const dudeBoundsPadding = 1;
|
|
|
|
const dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding,
|
|
|
|
-dudeBoundsPadding,
|
|
|
|
app.screen.width + dudeBoundsPadding * 2,
|
|
|
|
app.screen.height + dudeBoundsPadding * 5);
|
|
|
|
|
|
|
|
app.ticker.add(() => {
|
|
|
|
// iterate through the dudes and update their position
|
|
|
|
for (let i = 0; i < aliens.length; i++) {
|
|
|
|
const dude = aliens[i];
|
|
|
|
dude.direction += dude.turningSpeed * 0.03;
|
|
|
|
dude.x += Math.sin(dude.direction) * dude.direction;
|
|
|
|
dude.y += Math.cos(dude.direction) * dude.speed *0.2;
|
|
|
|
dude.rotation = dude.direction - Math.PI * 0.3;
|
|
|
|
|
|
|
|
// wrap the dudes by testing their bounds...
|
|
|
|
if (dude.x < dudeBounds.x) {
|
|
|
|
dude.x += dudeBounds.width;
|
|
|
|
} else if (dude.x > dudeBounds.x + dudeBounds.width) {
|
|
|
|
dude.x -= dudeBounds.width;
|
|
|
|
}
|
|
|
|
|
|
|
|
// if (dude.y < dudeBounds.y) {
|
|
|
|
// dude.y += dudeBounds.height;
|
|
|
|
// } else if (dude.y > dudeBounds.y + dudeBounds.height) {
|
|
|
|
// dude.y -= dudeBounds.height;
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
});
|
|
|
|
const style = new PIXI.TextStyle({
|
|
|
|
fill: [
|
|
|
|
"#00f900",
|
|
|
|
"#00f900"
|
|
|
|
],
|
|
|
|
fontFamily: "Arial Black"
|
|
|
|
});
|
|
|
|
const text = new PIXI.Text('QUESTO E\' LA PROVA', style);
|