health bar

2022-11-03 05:39:22 +03:00
parent b3d66688a6
commit 355fedc540
8 changed files with 125 additions and 6 deletions
@@ -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() {
@@ -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();
 }
@@ -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">
+				<ul id="lessonsList" class="list"></ul>
 					<!-- <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>
 			</div>
 			<div class="col frame">
 				<iframe id="examplesFrame" src="01/index.html"></iframe>