health bar
This commit is contained in:
parent
b3d66688a6
commit
355fedc540
BIN
src/assets/button.png
Normal file
BIN
src/assets/button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 B |
BIN
src/assets/field.png
Normal file
BIN
src/assets/field.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 243 B |
BIN
src/assets/hp_bar/bar_bg.png
Normal file
BIN
src/assets/hp_bar/bar_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 780 B |
BIN
src/assets/hp_bar/bar_red_line.png
Normal file
BIN
src/assets/hp_bar/bar_red_line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 450 B |
|
|
@ -3,6 +3,7 @@ let pages = {
|
|||
text: {name: 'Текст в PixiJS', url: '02/index.html'},
|
||||
graphics: {name: 'Фигуры в PixiJS', url: '03/index.html'},
|
||||
visibleObjects: {name: 'Видимые и невидимые объекты в PixiJS', url: '04/index.html'},
|
||||
hpBar: {name: 'Полоска здоровья', url: 'health_bar/index.html'},
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
|
|
|
|||
109
src/health_bar/app.js
Normal file
109
src/health_bar/app.js
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
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.buttonMode = true;
|
||||
Game.objects.attackButton.on('click', (event) => {
|
||||
if (Game.enemyHp >= 10)
|
||||
Game.enemyHp -= 10;
|
||||
else
|
||||
Game.enemyHp = 100;
|
||||
});
|
||||
|
||||
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.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();
|
||||
}
|
||||
14
src/health_bar/index.html
Normal file
14
src/health_bar/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Полоска здоровья</title>
|
||||
<script type="text/javascript" src="/assets/js/pixi-7.0.2.js"></script>
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,12 +21,7 @@
|
|||
<main class="container">
|
||||
<div class="row">
|
||||
<div class="col-4 lessons-list">
|
||||
<ul id="lessonsList" class="list">
|
||||
<!-- <li onclick="openPage('gettingStart');">Начало работы с PixiJS</li>
|
||||
<li onclick="openPage('text');">Начало работы с PixiJS</li>
|
||||
<li onclick="openPage('graphics');">Начало работы с PixiJS</li>
|
||||
<li onclick="openPage('visibleObjects');">Начало работы с PixiJS</li> -->
|
||||
</ul>
|
||||
<ul id="lessonsList" class="list"></ul>
|
||||
</div>
|
||||
<div class="col frame">
|
||||
<iframe id="examplesFrame" src="01/index.html"></iframe>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user