update code

src/assets/js/website.js

@@ -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() {

src/health_bar/app.js

@@ -0,0 +1,117 @@
+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();
+}

src/health_bar/index.html

@@ -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>

src/index.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>