Przykładowa aplikacja z wykorzystaniem PIXI JS. Od fragmentu ////////////// są funkcje charakterystyczne dla tej biblioteki.

Ważne linki:
Kurs PIXI
Przykłady PIXI
index.html

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html>
    <body>
<script src="https://pixijs.download/v4.4.2/pixi.min.js"></script>
<script>
        var pozx=2,
    pozy=2; //pozycja ludzika na mapie
        </script>
        <script src="keyboard.js"></script>
<script>
var type = "WebGL"
    if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }    
   
var rozmiar_x=25;
var rozmiar_y=25;
var pix = 25; //rozmiar obrazka w pikselach
var t=new Array(rozmiar_y);
var i;
var ludzik;
   
var ruch; //funkcja odbywającego się ruchu
for (i=0; i<t.length; i++)
    t[i]=new Array(rozmiar_x);

function zeruj()
{
    var i,j
    for (i=0; i<t.length; i++)
        for  (j=0; j<t[i].length; j++)
                     t[i][j]=6;
}


        function cegly()
{      
        t[0][0]=1;t[0][1]=1;t[0][2]=1;t[0][3]=1;t[0][4]=1;t[0][5]=1;t[0][6]=1;t[0][7]=1;t[0][8]=1;t[0][9]=1;t[0][10]=1;t[0][11]=1;t[0][12]=1;t[0][13]=1;t[0][14]=1;t[0][15]=1;t[0][16]=1;t[0][17]=1;t[0][18]=1;t[0][19]=1;t[1][0]=1;t[1][1]=1;t[1][2]=1;t[1][8]=2;t[1][19]=1;t[2][0]=1;t[2][8]=1;t[2][9]=1;t[2][10]=1;t[2][11]=1;t[2][13]=1;t[2][19]=1;t[3][0]=1;t[3][1]=1;t[3][2]=1;t[3][3]=1;t[3][4]=1;t[3][5]=1;t[3][11]=1;t[3][13]=1;t[3][14]=2;t[3][16]=1;t[3][19]=1;t[4][0]=1;t[4][5]=1;t[4][7]=1;t[4][8]=1;t[4][11]=1;t[4][13]=1;t[4][15]=3;t[4][16]=1;t[4][19]=1;t[5][0]=1;t[5][5]=1;t[5][6]=1;t[5][7]=1;t[5][8]=1;t[5][11]=1;t[5][13]=1;t[5][14]=1;t[5][15]=1;t[5][16]=1;t[5][19]=1;t[6][0]=1;t[6][8]=1;t[6][9]=2;t[6][11]=1;t[6][18]=2;t[6][19]=1;t[7][0]=1;t[7][1]=2;t[7][7]=2;t[7][8]=1;t[7][11]=1;t[7][13]=1;t[7][14]=1;t[7][15]=1;t[7][16]=1;t[7][17]=1;t[7][19]=1;t[8][0]=1;t[8][2]=1;t[8][4]=1;t[8][5]=1;t[8][7]=1;t[8][8]=1;t[8][11]=1;t[8][19]=1;t[9][0]=1;t[9][2]=1;t[9][5]=1;t[9][6]=1;t[9][7]=1;t[9][10]=1;t[9][11]=1;t[9][12]=1;t[9][13]=1;t[9][14]=1;t[9][15]=1;t[9][16]=1;t[9][17]=2;t[9][19]=1;t[10][0]=1;t[10][2]=1;t[10][7]=1;t[10][11]=1;t[10][12]=1;t[10][16]=1;t[10][19]=1;t[11][0]=1;t[11][2]=1;t[11][3]=1;t[11][4]=1;t[11][7]=1;t[11][8]=1;t[11][9]=2;t[11][11]=1;t[11][16]=1;t[11][19]=1;t[12][0]=1;t[12][4]=1;t[12][8]=1;t[12][10]=1;t[12][11]=1;t[12][13]=1;t[12][14]=1;t[12][16]=1;t[12][19]=1;t[13][0]=1;t[13][3]=1;t[13][4]=1;t[13][6]=1;t[13][8]=1;t[13][10]=1;t[13][14]=1;t[13][16]=1;t[13][19]=1;t[14][0]=1;t[14][2]=1;t[14][3]=1;t[14][6]=1;t[14][8]=1;t[14][9]=1;t[14][10]=1;t[14][14]=1;t[14][15]=1;t[14][16]=1;t[14][19]=1;t[15][0]=1;t[15][2]=1;t[15][3]=1;t[15][4]=1;t[15][5]=1;t[15][6]=1;t[15][10]=2;t[15][19]=1;t[16][0]=1;t[16][1]=2;t[16][2]=1;t[16][4]=1;t[16][6]=1;t[16][9]=1;t[16][11]=1;t[16][12]=1;t[16][13]=1;t[16][14]=1;t[16][16]=1;t[16][17]=1;t[16][19]=1;t[17][0]=1;t[17][2]=1;t[17][3]=2;t[17][4]=1;t[17][5]=2;t[17][6]=1;t[17][9]=1;t[17][19]=1;t[18][0]=1;t[18][9]=1;t[18][16]=2;t[18][19]=1;t[19][0]=1;t[19][1]=1;t[19][2]=1;t[19][3]=1;t[19][4]=1;t[19][5]=1;t[19][6]=1;t[19][7]=1;t[19][8]=1;t[19][9]=1;t[19][10]=1;t[19][11]=1;t[19][12]=1;t[19][13]=1;t[19][14]=1;t[19][15]=1;t[19][16]=1;t[19][17]=1;t[19][18]=1;t[19][19]=1;
    }

//////////////////////////////////////////////////////////////////////////////
var app = new PIXI.Application(800, 600, {backgroundColor : 0x008800}); //800x600 pix, tło zielone
document.body.appendChild(app.view);
var container = new PIXI.Container();

app.stage.addChild(container);

var texture_cegla = PIXI.Texture.fromImage('cegla.png');
var texture_ludzik = PIXI.Texture.fromImage('ludzik.png');    

   
 var krok=3;  
   
//zegar
app.ticker.add(function(delta)
{
//Lewo animacja:
    var celx = pozx*pix,
        cely = pozy*pix;
    if ( ludzik.position.x > celx)  //tu jest błąd >=?
    {
        ludzik.position.x -=  krok;
        if (ludzik.position.x < celx) // jeśli przeszedł na złą stronę
            ludzik.position.x = celx; //trzeba wyrównać
    }
    else
    {
        if (left.isDown && ludzik.position.x === celx) //klawisz długo wciśnięty
               left.press();
    }
//teraz PRAWO:
    if (ludzik.position.x < celx)
        {            
            ludzik.position.x += krok;
            if (ludzik.position.x > celx)
                ludzik.position.x = celx;
        }
        else
        {    
            if (right.isDown && ludzik.position.x === celx)  right.press();
        }
            //GOrA:
    if (ludzik.position.y > cely)
            {
                ludzik.y -= krok;
                if (ludzik.position.y < cely)
                    ludzik.position.y = cely;
            }
            else
            {
                if (up.isDown && ludzik.position.y === cely) up.press();
            }
                //DOŁ:                
    if ( ludzik.y < cely)
                {
                     ludzik.y+=krok;
                     if (ludzik.y > cely) ludzik.y = cely;
                }  
                else
                {
                    if (down.isDown && ludzik.y === cely) down.press();
                }
});
       
   
function rysuj()
{
     var cegla;
     for (var i = 0; i < t.length; i++)
         {    
            for (var j=0; j<t[i].length; j++)
             {
                 if (t[i][j]==1)
                  {
                    cegla = new PIXI.Sprite(texture_cegla);
                    cegla.anchor.set(0.5);
                    cegla.x = j*pix;
                    cegla.y = i*pix;
                    container.addChild(cegla);
                  }
             }
         }
        ludzik = new PIXI.Sprite(texture_ludzik);
        ludzik.anchor.set(0.5);
        ludzik.x = pozx*pix;
        ludzik.y = pozy*pix;
        container.addChild(ludzik);
   
   
}
///////
zeruj();
cegly();
rysuj();
// ŚRODEK EKRANU
container.x = (app.renderer.width - container.width) / 2;
container.y = (app.renderer.height - container.height) / 2;
        </script>
    </body>          
</html>

keyboard.js – sterowanie klawiaturą (płynne)

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
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),
      up = keyboard(38),
      right = keyboard(39),
      down = keyboard(40);

 var semafor = 0; //0- wolny przejazd

left.press = function()
                {
                        if(pozx>0 && t[pozy][pozx-1]!=1)           pozx--;
                }
left.release= function()
{
    console.log('rel');
}
   
right.press = function()
                {
            if(pozx<33 && t[pozy][pozx+1]!=1)   pozx++;
        }
               
up.press = function()
                {
                        if(pozy>0 && t[pozy-1][pozx]!=1)        pozy--;
                }

down.press = function()
                {      
            if(pozy<33 && t[pozy+1][pozx]!=1)   pozy++;
        }
JavaScript