118 lines
3.5 KiB
JavaScript
118 lines
3.5 KiB
JavaScript
let app;
|
|
let Textures;
|
|
let Game = {
|
|
objects: {},
|
|
};
|
|
|
|
window.onload = function() {
|
|
'use strict';
|
|
|
|
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
|
|
|
|
app = new PIXI.Application({
|
|
width: 640,
|
|
height: 360,
|
|
backgroundColor: 0x2a2a3a,
|
|
});
|
|
document.body.appendChild(app.view);
|
|
|
|
Game.enemyHp = 100;
|
|
|
|
let assetsList = [
|
|
{ name: 'hpBar', path: '/assets/hp_bar/bar_bg.png', },
|
|
{ name: 'hpFill', path: '/assets/hp_bar/bar_red_line.png', },
|
|
{ name: 'button', path: '/assets/button.png', },
|
|
{ name: 'field', path: '/assets/field.png', },
|
|
];
|
|
|
|
assetsList.forEach(value => {
|
|
PIXI.Assets.add(value.name, value.path);
|
|
});
|
|
|
|
let promise = PIXI.Assets.load(assetsList.map(asset => asset.name));
|
|
|
|
promise.then((value) => {
|
|
Textures = value;
|
|
initLevel();
|
|
});
|
|
}
|
|
|
|
function initLevel() {
|
|
'use strict';
|
|
|
|
Game.objects.hpBar = new PIXI.Sprite(Textures['hpBar']);
|
|
Game.objects.hpBar.width = 400;
|
|
Game.objects.hpBar.height = 75;
|
|
Game.objects.hpBar.anchor.set(.5);
|
|
Game.objects.hpBar.x = app.screen.width / 2;
|
|
Game.objects.hpBar.y = 70;
|
|
|
|
Game.objects.fillContainer = new PIXI.Container();
|
|
Game.objects.hpFill = new PIXI.Sprite(Textures['hpFill']);
|
|
Game.objects.hpFill.width = Game.objects.hpBar.width;
|
|
Game.objects.hpFill.height = Game.objects.hpBar.height;
|
|
Game.objects.hpFill.anchor.set(.5);
|
|
Game.objects.hpFill.x = Game.objects.hpBar.x;
|
|
Game.objects.hpFill.y = Game.objects.hpBar.y;
|
|
|
|
Game.objects.label = new PIXI.Sprite(Textures['field']);
|
|
Game.objects.label.width = 300;
|
|
Game.objects.label.height = 50;
|
|
Game.objects.label.anchor.set(.5);
|
|
Game.objects.label.x = app.screen.width / 2;;
|
|
Game.objects.label.y = 180;
|
|
|
|
Game.objects.hpText = new PIXI.Text(`Enemy HP: ${Game.enemyHp}`);
|
|
Game.objects.hpText.style.fontSize = 30;
|
|
Game.objects.hpText.anchor.set(0.5);
|
|
Game.objects.hpText.x = app.screen.width / 2;
|
|
Game.objects.hpText.y = Game.objects.label.y;
|
|
|
|
Game.objects.attackButton = new PIXI.Sprite(Textures['button']);
|
|
Game.objects.attackButton.width = 256;
|
|
Game.objects.attackButton.height = 80;
|
|
Game.objects.attackButton.anchor.set(.5);
|
|
Game.objects.attackButton.x = app.screen.width / 2;;
|
|
Game.objects.attackButton.y = 300;
|
|
|
|
Game.objects.attackButton.interactive = true;
|
|
Game.objects.attackButton.cursor = 'pointer';
|
|
Game.objects.attackButton.on('click', (event) => {
|
|
if (Game.enemyHp >= 10)
|
|
Game.enemyHp -= 10;
|
|
else
|
|
Game.enemyHp = 100;
|
|
});
|
|
|
|
Game.objects.buttonText = new PIXI.Text('Attack!');
|
|
Game.objects.buttonText.style.fontSize = 30;
|
|
Game.objects.buttonText.style.fontStyle = 'bold';
|
|
Game.objects.buttonText.anchor.set(0.5);
|
|
Game.objects.buttonText.x = app.screen.width / 2;
|
|
Game.objects.buttonText.y = Game.objects.attackButton.y - 4;
|
|
|
|
Game.objects.fillContainer.addChild(Game.objects.hpFill);
|
|
app.stage.addChild(Game.objects.hpBar);
|
|
app.stage.addChild(Game.objects.fillContainer);
|
|
app.stage.addChild(Game.objects.label);
|
|
app.stage.addChild(Game.objects.hpText);
|
|
app.stage.addChild(Game.objects.attackButton);
|
|
app.stage.addChild(Game.objects.buttonText);
|
|
|
|
app.ticker.add(gameLoop);
|
|
}
|
|
|
|
function gameLoop(delta) {
|
|
'use strict';
|
|
|
|
Game.objects.hpText.text = `Enemy HP: ${Game.enemyHp}`;
|
|
|
|
Game.objects.fillContainer.mask = new PIXI.Graphics()
|
|
.beginFill(0xffffff)
|
|
.drawRect(Game.objects.hpFill.x - (Game.objects.hpFill.width / 2),
|
|
Game.objects.hpFill.y - (Game.objects.hpFill.height / 2),
|
|
Game.enemyHp * Game.objects.hpFill.width / 100,
|
|
Game.objects.hpFill.height)
|
|
.endFill();
|
|
}
|