PIXI circles
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.0/pixi.js"></script>
<script src="https://rawgit.com/matt-way/gifuct-js/master/dist/gifuct-js.min.js"></script>
JavaScript
var app = new PIXI.Application(500, 500, {backgroundColor:0x000000});
document.body.appendChild(app.view);
var character, state, mousePosition;
character = {};
var mousePosition = app.renderer.plugins.interaction.mouse.global;
setup();
function setup() {
character.core = new PIXI.Graphics()
.beginFill(0xdc143c)
.drawCircle(0, 0, 5);
character.core.position.x = app.screen.width / 2 + 10;
character.core.position.y = app.screen.height / 2;
character.shield = new PIXI.Graphics()
.lineStyle(5, 0x67c8ff, 1)
.drawCircle(0, 0, 50);
character.shield.position.x = app.screen.width / 2;
character.shield.position.y = app.screen.height / 2;
character.x = app.screen.width / 2;
character.y = app.screen.height / 2;
app.stage.addChild(character.core);
app.stage.addChild(character.shield);
character.vx = 0;
character.vy = 0;
character.radius = character.shield.graphicsData[0].shape.radius;
character.width = character.core.graphicsData[0].shape.width;
character.height = character.core.graphicsData[0].shape.height;
character.score = 0;
character.energy = 4;
character.energyGen = 0.005;
character.health = 100;
character.getX = function() {
return this.x;
};
character.setX = function(x) {
this.x = x;
};
character.getY = function() {
return this.y;
};
character.setY = function(y) {
this.y = y;
};
character.getShieldRadius = function() {
return this.shield.graphicsData[0].shape.radius;
};
character.setShieldRadius = function(radius) {
this.shield.graphicsData[0].shape.radius = radius;
};
character.canMoveX = function(newX) {
return true;
};
character.canMoveY = function(newY) {
return true;
};
character.lookAtMouse = function() {
let lookX = mousePosition.x - this.getX();
let lookY = mousePosition.y - this.getY();
let lookAngle = Math.atan2(lookY, lookX);
this.core.rotation = lookAngle;
};
character.updateEnergy = function() {
...