Skip to content

Instantly share code, notes, and snippets.

@ova2
Created March 3, 2018 22:57
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ova2/b505224442a542477df382a17fb68f4d to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>PIXI.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.0/pixi.js"></script>
<h1>PIXI.js</h1>
<script type="text/javascript">
let width = 1024;
let height = 768;
let app = new PIXI.Application({width: width, height: height});
document.body.appendChild(app.view);
let objs = [];
let size = 20;
for (var i = 0; i < 1000; ++i) {
let g = new PIXI.Graphics();
g.on('click', function (e) {
console.log("Clicked that rect!");
});
app.stage.addChild(g);
g.beginFill(0xFFFFFF * Math.random());
g.lineStyle(1, 0x000000, 1);
g.drawRect(0, 0, size, size);
g.position.x = Math.random() * width;
g.position.y = Math.random() * height;
g.endFill();
objs.push({dirX: 1, dirY: 1, rect: g, speed: Math.random() * 8});
}
function drawLoop() {
requestAnimationFrame(drawLoop);
for (var i = 0; i < objs.length; ++i) {
let o = objs[i];
if (o.rect.position.x <= 0) {
o.dirX = 1;
} else if (o.rect.position.x + size >= width) {
o.dirX = -1;
}
if (o.rect.position.y <= 0) {
o.dirY = 1;
} else if (o.rect.position.y + size >= height) {
o.dirY = -1;
}
o.rect.position.x += o.speed * o.dirX;
o.rect.position.y += o.speed * o.dirY;
}
app.renderer.render(app.stage);
}
requestAnimationFrame(drawLoop);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment