Pierwszy program z użyciem PIXI JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html>
 <head>
        <meta charset="utf-8">
 </head>
 <body>
  <script src="https://pixijs.download/v4.4.2/pixi.min.js"></script>
  <script src="keyboard.js"></script>
  <script>
var hero; //nazwa naszego bohatera
var krok=3; //szybkość poruszania się, w pikselach na klatkę animacji
var type = "WebGL"
if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }    
 
//////////////////////////////////////////////////////////////////////////////
var app = new PIXI.Application(800, 600, {backgroundColor : 0x004080}); //800x600 pix, tło niebieskie
document.body.appendChild(app.view); //dodanie widoku do gry
var container = new PIXI.Container(); //kontener, pojemnik z duszkami
app.stage.addChild(container); //dodanie kontenera do gry

//Wczytaj wszystkie obrazki
var texture_hero = PIXI.Texture.fromImage('hero.png');    

//zegar
app.ticker.add(function(delta)
{
        if (left.isDown && hero.x>-200) //sprawdź koniec ekranu i klawisz lewo
                        hero.x -= krok;
        if (right.isDown && hero.x < 200) //sprawdź drugi koniec ekranu i drugi klawisz w prawo
                        hero.x += krok;
});
       
//dodawanie duszków
function rysuj()
{
        hero = new PIXI.Sprite(texture_hero); //wczytaj obrazek
        hero.anchor.set(0.5); // ustawienie środka obrazka
        hero.x = -100; //początkowy x
        hero.y = -100; // początkowy y
        container.addChild(hero); //dodanie do kontenera naszego hero  
}
///////
rysuj();
// ŚRODEK EKRANU
container.x = (app.renderer.width - container.width) / 2;
container.y = (app.renderer.height - container.height) / 2;
        </script>
    </body>          
</html>

keyboard.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function keyboard(keyCode) {
  var key = {};
  key.code = keyCode;
  key.isDown = false;
  key.isUp = true;
  key.press = undefined;
  key.release = undefined;
  //The `downHandler`
  key.downHandler = function(event) {
    if (event.keyCode === key.code) {
      if (key.isUp && key.press) key.press();
      key.isDown = true;
      key.isUp = false;
    }
    event.preventDefault();
  };

  //The `upHandler`
  key.upHandler = function(event) {
    if (event.keyCode === key.code) {
      if (key.isDown && key.release) key.release();
      key.isDown = false;
      key.isUp = true;
    }
    event.preventDefault();
  };

  //Attach event listeners
  window.addEventListener(
    "keydown", key.downHandler.bind(key), false
  );
  window.addEventListener(
    "keyup", key.upHandler.bind(key), false
  );
  return key;
}

////////////////////////////////////////
// Nasze klawisze, kody:

var left = keyboard(37),
    right = keyboard(39);
JavaScript