kontra
Version:
Kontra HTML5 game development library
98 lines (83 loc) • 2.1 kB
HTML
<html>
<head>
<title>Particle Engine</title>
<script type="text/javascript" src="../../kontra.js"></script>
</head>
<body>
<canvas width="600" height="600" style="background: #333331"></canvas>
<script id="code">
let { canvas, context } = kontra.init();
let midX = canvas.width / 2;
let midY = canvas.height / 2;
let fields = [
kontra.Sprite({
x: midX - 75,
y: midY + 20,
width: 3,
height: 3,
color: 'green',
mass: 900,
size: 3
}),
kontra.Sprite({
x: midX + 25,
y: midY + 10,
width: 3,
height: 3,
color: 'red',
mass: -50,
size: 3
})
];
let pool = kontra.Pool({
create: kontra.Sprite,
maxSize: 5000,
fill: true
});
context.fillStyle = 'white';
// redefine sprite update to account for fields
kontra.Sprite.prototype.update = function() {
// apply field
let totalAccelerationX = 0
let totalAccelerationY = 0;
for (let i = 0, field; field = fields[i]; i++) {
let vectorX = field.x - this.x;
let vectorY = field.y - this.y;
let force = field.mass / Math.pow(vectorX * vectorX + vectorY * vectorY, 1.5);
totalAccelerationX += vectorX * force;
totalAccelerationY += vectorY * force;
}
this.acceleration.x = totalAccelerationX
this.acceleration.y = totalAccelerationY
this.advance();
};
// redefine sprite render to not change context fillStyle every time
kontra.Sprite.prototype.render = function() {
context.fillRect(this.x, this.y, 3, 3);
};
let loop = kontra.GameLoop({
update: function() {
for (let i = 0; i < 4; i++) {
pool.get({
x: midX + 75,
y: midY,
dx: 2 - Math.random() * 4,
dy: 2 - Math.random() * 4,
color: 'white',
width: 1,
height: 1,
ttl: Infinity
});
}
pool.update();
},
render: function() {
pool.render();
}
});
loop.start();
</script>
<script src="../prism/codeOutput.js"></script>
</body>
</html>