Prosty przykład PIXI 2D:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!doctype html>
<html>
<head>
        <meta charset="utf-8">
</head>
<body>
<script>
//Zmienna globalna:
var hero; //nazwa naszego bohatera
var krok=3;
</script>
<script src="https://pixijs.download/v4.4.2/pixi.min.js"></script>
<script src="keyboard.js"></script>
<script>
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_ufo = PIXI.Texture.fromImage('ufo.png');
var texture_hero = PIXI.Texture.fromImage('hero.png');    
var texture_pocisk = PIXI.Texture.fromImage('pocisk.png');


//var kosmici = new Array(4);      //ilość kosmitów, tablica z kosmitami
var hero;
var pocisk;

//zegar
var strzela = false;
var szybkosc_strzalu=3;
app.ticker.add(function(delta)
{
        if (left.isDown && hero.x>-200)
                        hero.x-=krok;
        if (right.isDown && hero.x <200 )
                        hero.x+=krok;
        if (spacja.isDown && !strzela) //STRZAL
        {
                strzela = true;
                pocisk.x = hero.x;
                pocisk.y = hero.y;
                pocisk.visible = true;
        }
        if (strzela)
        {
                pocisk.y-= szybkosc_strzalu;
                if (pocisk.y < -1000)
                {
                        pocisk.visible = false;
                        strzela = false;
                }
        }
       
});
       

 
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  
               
                 pocisk = new PIXI.Sprite(texture_hero); //wczytaj obrazek
        pocisk.anchor.set(0.5); // ustawienie środka obrazka
        pocisk.x = 0; //początkowy x
        pocisk.y = 0; // początkowy y
                pocisk.visible= false;
        container.addChild(pocisk); //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>

drugi plik z obsługą klawiatury
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
43
44
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:


var left = keyboard(37),
      right = keyboard(39),
          spacja = keyboard(32); //dodajemy klawiaturę
JavaScript