Przkład prostej gry komputerowej z użyciem PixiJS

Wstęp do Pixi: http://fx-team.fulara.com/pixie-2d-wstep/ 

Gra ma polegać na niszczeniu w nieskończoność nadlatujących przeciwników i zbieraniu punktów sterując statkiem.

Link do gry: http://fx-team.fulara.com/team/adam/pixi/

gra pixijs

Do zrobienia:

    1. Poruszanie postacią
    2. Strzelanie bohatera
    3. Dwa tryby strzału przeciwnika
    4. Sprawdzanie, czy pocisk trafił obcy statek, wrogi pocisk trafił nasz statek, nasz statek nie zderzył się z przeciwnikiem
    5. Tworzenie nowych przeciwników
    6. Sprawdzenie, czy gra się nie skończyła

Plik index.html wygląda następująco

Dodajemy źródła js + Pixi. Tworzymy nową aplikacje, zaczytujemy tekstury i tworzymy sprite.

Funkcja app.ticker.add(function (delta) { //kod }); Jest zegarem aplikacji, czyli kod w środku wykonuje się co klatke aplikacji.

 

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <!--<title>Tytuł strony</title>-->
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>
 
   <div id="data"></div>

    <script src="https://pixijs.download/v4.4.2/pixi.min.js"></script>
    <script src="js/keyboard.js"></script>
    <script src="js/hero.js"></script>
    <script src="js/enemy.js"></script>
    <script src="js/game.js"></script>
    <script src="js/background.js"></script>

    <script>
        var type = "WebGL"
        if (!PIXI.utils.isWebGLSupported()) {
            type = "canvas"
        }

        //////////////////////////////////////////////////////////////////////////////
        var app = new PIXI.Application(800, 710, {
            //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

        // Wczytanie czcionki z googlefonts
        window.WebFontConfig = {
            google: {
                families: ['Snippet', 'Arvo:700italic', 'Podkova:700']
            }
        };

        (function () {
            var wf = document.createElement('script');
            wf.src = ('https:' === document.location.protocol ? 'https' : 'http') +
                '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();

        //Wczytaj wszystkie obrazki
        var texture_gameover = PIXI.Texture.fromImage('img/gameover.png');
        var texture_enemyPocisk = PIXI.Texture.fromImage('img/enemypocisk.png');
        var texture_burstShot = PIXI.Texture.fromImage('img/burst.png');
        var texture_engineon = PIXI.Texture.fromImage('img/engineon.png');
        var texture_pocisk = PIXI.Texture.fromImage('img/pocisk.png');
        var texture_enemy = PIXI.Texture.fromImage('img/enemy.png');
        var texture_hero = PIXI.Texture.fromImage('img/hero.png');
        var texture_ufo = PIXI.Texture.fromImage('img/ufo.png');
        var texture_up = PIXI.Texture.fromImage('img/up.png');
        var texture_left = PIXI.Texture.fromImage('img/left.png');
        var texture_right = PIXI.Texture.fromImage('img/right.png');
        var texture_down = PIXI.Texture.fromImage('img/down.png');
        var texture_shot = PIXI.Texture.fromImage('img/shot.png');

        var zegar = 0;

        //zegar
        app.ticker.add(function (delta) {

            //game.data(); //Wyświetlanie informacji developerskich

            if (game.play) {

                zegar++;

                for (var i = 0; i < przeciwnicy.length; i++) { //Pętla obsługująca wszystkich przeciwników w grze

                    przeciwnicy[i].strzal(); //Strzelanie
                    przeciwnicy[i].move(); //Poruszanie przeciwnikami
                    if (przeciwnicy[i].fJoin) { //Pojawianie się przeciwników w oknie gry
                        przeciwnicy[i].joinFight();
                    }

                    if (100 <= zegar && zegar <= 105) {
                        if (Math.floor(zegar) % 2 > 0) {
                            przeciwnicy[i].fBurst = true;
                        } else {
                            przeciwnicy[i].fBurst = false;
                        }
                    } else if (zegar >= 105) {
                        zegar = 0;
                    }
                    przeciwnicy[i].burstShot(); //Strzał trzech pocisków

                    game.isHit(i); //Obsługa trafień
                }
                bohater.move(); //Sprawdzanie czy bohater się poruszył
                bohater.strzal(); //Sprawdzanie czy bohater strzelił

                game.stage(); // Dodania przeciwników do gry jeżeli jest ich za mało
            } else {

                game.wynik();
            }
        });

        function rysuj() {
            hero = new PIXI.Sprite(texture_hero); //wczytaj obrazek
            hero.anchor.set(0.5); // ustawienie środka obrazka
            hero.x = 0; //początkowy x
            hero.y = 0; // początkowy y
            container.addChild(hero); //dodanie do kontenera naszego hero  

            pocisk = new PIXI.Sprite(texture_pocisk); //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 pocisku

            keyUp = new PIXI.Sprite(texture_up); //wczytaj obrazek
            keyUp.anchor.set(0.5); // ustawienie środka obrazka
            keyUp.x = 0; //początkowy x
            keyUp.y = 0; // początkowy y
            container.addChild(keyUp); //dodanie do kontenera

            keyDown = new PIXI.Sprite(texture_down); //wczytaj obrazek
            keyDown.anchor.set(0.5); // ustawienie środka obrazka
            keyDown.x = 0; //początkowy x
            keyDown.y = 0; // początkowy y
            container.addChild(keyDown); //dodanie do kontenera

            keyLeft = new PIXI.Sprite(texture_left); //wczytaj obrazek
            keyLeft.anchor.set(0.5); // ustawienie środka obrazka
            keyLeft.x = 0; //początkowy x
            keyLeft.y = 0; // początkowy y
            container.addChild(keyLeft); //dodanie do kontenera

            keyRight = new PIXI.Sprite(texture_right); //wczytaj obrazek
            keyRight.anchor.set(0.5); // ustawienie środka obrazka
            keyRight.x = 0; //początkowy x
            keyRight.y = 0; // początkowy y
            container.addChild(keyRight); //dodanie do kontenera

            keyShot = new PIXI.Sprite(texture_shot); //wczytaj obrazek
            keyShot.anchor.set(0.5); // ustawienie środka obrazka
            keyShot.x = 0; //początkowy x
            keyShot.y = 0; // początkowy y
            container.addChild(keyShot); //dodanie do kontenera

            gameover = new PIXI.Sprite(texture_gameover); //wczytaj obrazek
            gameover.anchor.set(0.5); // ustawienie środka obrazka
            gameover.x = 0; //początkowy x
            gameover.y = 0; // początkowy y
            gameover.visible = false;
            container.addChild(gameover); //dodanie do kontenera
        }
        ///////
        bg(); //Gwieździste tło
        rysuj(); //dodanie do gry bohatera i pocisku

        // ŚRODEK EKRANU
        container.x = (app.renderer.width - container.width) / 2;
        container.y = (app.renderer.height - container.height) / 2 - 60;

        pocisk.x = -1000;

        game.init(); //Inicjujemy zmienne

        var przeciwnicy = []; //tablica z obiektami

        for (var i = 0; i < 5; i++) { //utworzenie początkowy przeciwników
            var add = new przeciwnik;
            add.init(i * 100, i * -1000 - 400);
            przeciwnicy.push(add);
        }

    </script>

</body>

</html>

Obsługa zdarzeń gry (np czy ktoś został trafiony)

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
var game = {

    play: true,
    punkty: 0,
    background: null,
    werdykt: null, //true = wygrana, false = przegrana
    stage: 1,
    levelEnemies: 3,
    czasTeraz: new Date(),
    czasTeraz2: new Date(),
    screenX: null,
    screenY: null,


    init: function () {

        //Początkowa pozycja gracza
        hero.x = 0;
        hero.y = 200;

        keyUp.x = 320;
        keyUp.y = 340;
        keyLeft.x = 270;
        keyLeft.y = 390;
        keyRight.x = 370;
        keyRight.y = 390;
        keyDown.x = 320;
        keyDown.y = 390;
        keyShot.x = -340;
        keyShot.y = 390;

        keyUp.interactive = true;
        keyUp.buttonMode = true;

        keyUp.on('pointertap', function () {
            hero.y -= 8;
        });

        keyLeft.interactive = true;
        keyLeft.buttonMode = true;

        keyLeft.on('pointertap', function () {
            hero.x -= 8;
        });

        keyRight.interactive = true;
        keyRight.buttonMode = true;

        keyRight.on('pointertap', function () {
            hero.x += 8;
        });

        keyDown.interactive = true;
        keyDown.buttonMode = true;

        keyDown.on('pointertap', function () {
            hero.y += 8;
        });

        keyShot.interactive = true;
        keyShot.buttonMode = true;

        keyShot.on('pointertap', function () {
            if (!bohater.strzela) {
                bohater.strzela = true;
                pocisk.x = hero.x;
                pocisk.y = hero.y;
                pocisk.visible = true;
            }
        });

        gameover.on('pointertap', function () {
            this.play = true;
            this.werdykt = null;
            this.punkty = 0;
            console.log("reset");
        });

        let Application = PIXI.Application,
            Container = PIXI.Container,
            loader = PIXI.loader,
            resources = PIXI.loader.resources,
            TextureCache = PIXI.utils.TextureCache,
            Sprite = PIXI.Sprite,
            Rectangle = PIXI.Rectangle;

        let app = new Application({
            width: 512,
            height: 512,
            antialias: true,
            transparent: false,
            resolution: 1
        });

        console.log("start");

        /*hero.interactive = true;
        hero.buttonMode = true;

        hero.on('pointertap', function () {
            console.log("tapp");
        });*/
    },

    data: function () {
        //Wyświetlanie infromacji o grze
        var data = document.getElementById("data");
        data.innerHTML = "X = " + hero.x + "<br>Y = " + hero.y + "<br>kierunek = " + bohater.kierunek + "<br>Punkty: " + this.punkty + "<br>strzal " + przeciwnik.estrzela + "<br>wygrana = " + !this.play;
    },

    isHit: function (i) {
        //Czy wrogi pocisk trafił gracza?
        if (Math.abs(przeciwnicy[i].enemyPocisk.x - hero.x) < 25 && Math.abs(przeciwnicy[i].enemyPocisk.y - hero.y) < 25) {
            this.play = false;
            this.werdykt = false;
            hero.visible = false;
            console.log("Twój statek został zniszczony! Przegrana!");
        }
        //Czy gracz wleciał we wroga?
        if (Math.abs(hero.x - przeciwnicy[i].enemy.x) < 30 && Math.abs(hero.y - przeciwnicy[i].enemy.y) < 30) {
            this.play = false;
            this.werdykt = false;
            hero.visible = false;
            console.log("Przegrana!");
        }
        //Czy pocisk trafił jakiegoś przeciwnika? Jeżeli tak to dodaj punkty, stwórz 2 nowych przeciwników i usuń zniszczonych
        if (Math.abs(pocisk.x - przeciwnicy[i].enemy.x) < 30 && Math.abs(pocisk.y - przeciwnicy[i].enemy.y) < 30) {

            pocisk.x = hero.x;
            pocisk.y = hero.y;
            pocisk.visible = false;
            this.strzela = false;

            container.removeChild(przeciwnicy[i].enemy);
            container.removeChild(przeciwnicy[i].enemyPocisk);
            for (var x = 0; x < przeciwnicy.length; x++) {
                container.removeChild(przeciwnicy[i].burstShots[x]);
            }

            przeciwnicy[i].enemy.visible = false;
            przeciwnicy[i].enemyPocisk.visible = false;
            delete przeciwnicy[i];
            przeciwnicy.splice(i, 1);

            this.levelEnemies += 0.4;

            this.punkty += 7;
        }

        if (!przeciwnicy.length) { //Jeżeli gracz wybije wszystkich wrogów
            this.play = false;
            this.werdykt = true;
            console.log("Wygrana!");
        }
    },

    stage: function () {

        //Obsługa poziomów
        if (przeciwnicy.length < this.levelEnemies) {
            console.log('aa');
            console.log(przeciwnicy.length);
            var add = new przeciwnik;
            add.init(100, -1300);
            przeciwnicy.push(add);
        }

        //Dodaj nowego przeciwnika co 30s
        var czasTeraz2 = new Date();
        if (czasTeraz2 - this.czasTeraz > 30000) {
            this.czasTeraz = new Date();
            var add = new przeciwnik;
            add.init(100, -1300);
            przeciwnicy.push(add);
        }
    },

    wynik: function () {

        gameover.visible = true;

        gameover.buttonMode = true;
        gameover.interactive = true;
    }
}

 

Plik obsługi przeciwnika

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
var przeciwnik = function () {
    this.hp = 100;
    this.reload = true;
    this.estrzela = false;
    this.enemy = null;
    this.enemyPocisk = null;
    this.szybkosc_strzalu = 5;
    this.kierunekEnemy = Math.floor(Math.random() * 2 + 1);
    this.kierunekStrzalu = 1;
    this.burstShots = [];
    this.fBurst = false;

    this.joinCordY = 0;
    this.fJoin = true;

    this.init = function (x, y) {
        //Zainicjuj przeciwnika
        this.enemy = new PIXI.Sprite(texture_enemy); //wczytaj
        this.enemy.anchor.set(0.5); // ustawienie środka obrazka
        this.enemy.x = x; //początkowy x
        this.enemy.y = y; // początkowy y
        this.enemy.visible = true;
        container.addChild(this.enemy);

        this.enemyPocisk = new PIXI.Sprite(texture_enemyPocisk); //wczytaj obrazek
        this.enemyPocisk.anchor.set(0.5); // ustawienie środka obrazka
        this.enemyPocisk.x = 0; //początkowy x
        this.enemyPocisk.y = 0; // początkowy y
        this.enemyPocisk.visible = true;
        container.addChild(this.enemyPocisk); //dodanie do kontenera naszego hero

        this.joinCordY = (Math.floor(Math.random() * 200) - 200);
    };

    this.strzal = function () {
        if (!this.estrzela) {
            //STRZAL
            this.estrzela = true;
            this.reload = false;
            this.enemyPocisk.x = this.enemy.x;
            this.enemyPocisk.y = this.enemy.y;
            this.enemyPocisk.visible = true;

            if (Math.abs(hero.x - this.enemy.x) > Math.abs(hero.y - this.enemy.y)) {
                //POZIOMO CZY PIONOWO? w góre
                if (Math.abs(hero.x < this.enemy.x)) {
                    this.kierunekStrzalu = 1;
                    this.enemyPocisk.rotation = 1;
                } else {
                    this.kierunekStrzalu = 2;
                    this.enemyPocisk.rotation = 4;
                }
            } //strzela w dół
            else {
                if (Math.abs(hero.y < this.enemy.y)) {
                    this.kierunekStrzalu = 3;
                    this.enemyPocisk.rotation = 3;
                } else {
                    this.kierunekStrzalu = 4;
                    this.enemyPocisk.rotation = 0;
                }
            }
        }
        if (this.estrzela) {
            if (this.kierunekStrzalu == 1) {
                this.enemyPocisk.x -= this.szybkosc_strzalu; //Strzał w lewo
            } else if (this.kierunekStrzalu == 2) {
                this.enemyPocisk.x += this.szybkosc_strzalu; //Strzał w prawo
            } else if (this.kierunekStrzalu == 3) {
                this.enemyPocisk.y -= this.szybkosc_strzalu; //Strzał w góre
            } else if (this.kierunekStrzalu == 4) {
                this.enemyPocisk.y += this.szybkosc_strzalu; //Strzał w dół
            }

            //Usuwanie pocisku jeżeli wyleciał poza mape
            if (
                this.enemyPocisk.y < -300 ||
                this.enemyPocisk.y > 300 ||
                this.enemyPocisk.x > 400 ||
                this.enemyPocisk.x < -400
            ) {
                this.enemyPocisk.visible = false;
                this.estrzela = false;
                this.reload = false;
            }
        }
    };

    this.burstShot = function () {
        if (this.fBurst) {
            //for (var i = 0; i < 5; i++) {
            this.fBurst = false;
            var burst = new PIXI.Sprite(texture_burstShot); //wczytaj obrazek
            burst.anchor.set(0.5); // ustawienie środka obrazka
            burst.x = this.enemy.x; //początkowy x
            burst.y = this.enemy.y; // początkowy y
            burst.visible = true;
            this.burstDirection = container.addChild(burst); //dodanie do kontenera naszego hero
            this.burstShots.push(burst);
            // }
        } else {
            for (var i = 0; i < this.burstShots.length; i++) {
                var burstShot = this.burstShots[i];
                burstShot.x += Math.abs(Math.sin(i / 15) * 4);
                burstShot.y += Math.abs(Math.cos(i / 15) * 4);
                if (
                    Math.abs(hero.x - burstShot.x) < 20 &&
                    Math.abs(hero.y - burstShot.y) < 20
                ) {
                    game.play = false;
                    game.werdykt = false;
                    hero.visible = false;
                    console.log("Przegrana!");
                }

                if (
                    burstShot.y < -300 ||
                    burstShot.y > 300 ||
                    burstShot.x > 400 ||
                    burstShot.x < -400
                ) {
                    container.removeChild(this.burstShots[i]);
                    this.burstShots[i].visible = false;
                    delete this.burstShots[i];
                    this.burstShots.splice(i, 1);
                }
            }
        }
    };

    //Poruszanie się przeciwnika od lewej do prawej
    this.move = function () {
        if (this.kierunekEnemy == 1 && this.enemy.x < 370) {
            this.enemy.x += 3;
            this.enemy.rotation += 0.2;
        } else {
            this.kierunekEnemy = 2;
            if (this.enemy.x >= 370) {
                this.enemy.x -= 5;
            }
        }
        if (this.kierunekEnemy == 2 && this.enemy.x > -370) {
            this.enemy.x -= 3;
            this.enemy.rotation -= 0.2;
        } else {
            this.kierunekEnemy = 1;
            if (this.enemy.x <= -370) {
                this.enemy.x += 5;
            }
        }
    };

    //Wlatywanie przeciwnika do okna gry
    this.joinFight = function () {
        if (this.enemy.y != this.joinCordY) {
            if (this.enemy.y > this.joinCordY)
                this.enemy.y -= 5;
            else
                this.enemy.y += 5;
        }
        if (Math.abs(this.enemy.y - this.joinCordY) < 30) {
            this.fJoin = false;
        }
    };
};

 

Plik dla bohatera

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
var bohater = {

    name: "B1",
    kierunek: 3,
    krok: 7,
    strzela: false,
    szybkosc_strzalu: 8,

    //Poruszanie się bohatera
    move: function () {

        if (hero.rotation > 0) {
            hero.rotation -= 0.1;
            if (hero.rotation < 0)
                hero.rotation = 0;
        } else if (hero.rotation < 0) {
            hero.rotation += 0.1;
            if (hero.rotation > 0)
                hero.rotation = 0;
        }

        if (left.isDown && hero.x > -380) {
            hero.x -= this.krok;
            hero.setTexture(texture_engineon);

            //console.log(hero.rotation)
            if (hero.rotation > -0.6) {
                hero.rotation -= 0.2;
            }

            if (!this.strzela)
                this.kierunek = 1;
        }
        if (right.isDown && hero.x < 380) {
            hero.x += this.krok;
            hero.setTexture(texture_engineon);

            if (hero.rotation < 0.6) {
                hero.rotation += 0.2;
            }

            if (!this.strzela)
                this.kierunek = 2;
        }
        if (up.isDown && hero.y > -273) {
            hero.y -= this.krok;
            hero.setTexture(texture_engineon);

            if (!this.strzela)
                this.kierunek = 3;
        }
        if (down.isDown && hero.y < 275) {
            hero.y += this.krok;
            hero.setTexture(texture_engineon);

            if (!this.strzela)
                this.kierunek = 4;
        }
        if ((!down.isDown || hero.y >= 275) && (!up.isDown || hero.y <= -273) && (!right.isDown || hero.x >= 380) && (!left.isDown || hero.x <= -380)) {
            hero.setTexture(texture_hero);
        }
    },

    //Strzał bohatera
    strzal: function () {

        if (spacja.isDown && !this.strzela) //STRZAL
        {
            this.strzela = true;
            pocisk.x = hero.x;
            pocisk.y = hero.y;
            pocisk.visible = true;
        }

        if (this.strzela) {

            if (this.kierunek == 1) {
                pocisk.rotation = 2;
                pocisk.x -= this.szybkosc_strzalu;
            } else if (this.kierunek == 2) {
                pocisk.rotation = 6;
                pocisk.x += this.szybkosc_strzalu;
            } else if (this.kierunek == 3) {
                pocisk.rotation = 0;
                pocisk.y -= this.szybkosc_strzalu;
            } else if (this.kierunek == 4) {
                pocisk.rotation = 4;
                pocisk.y += this.szybkosc_strzalu;
            }

            if (pocisk.y < -300 || pocisk.y > 300 || pocisk.x > 400 || pocisk.x < -400) {
                pocisk.visible = false;
                this.strzela = false;
            }
        }
    }
}

 

Obsługa klawiatury

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
//Obsługa klawiatury
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),
    spacja = keyboard(32); //dodajemy klawiaturę

 

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
//CODE BY PIXIJS https://pixijs.io/examples/?v=next#/demos/star-warp-sprites.js
function bg() {
    //Get the texture for rope.
    var starTexture = PIXI.Texture.fromImage('img/star.png')

    var starAmount = 1000;
    var cameraZ = 0;
    var fov = 20;
    var baseSpeed = 0.025;
    var speed = 0;
    var starStretch = 5;
    var starBaseSize = 0.05;


    //Create the stars
    var stars = [];
    for (var i = 0; i < starAmount; i++) {
        var star = {
            sprite: new PIXI.Sprite(starTexture),
            z: 0,
            x: 0,
            y: 0
        };
        star.sprite.anchor.x = 0.5;
        star.sprite.anchor.y = 0.7;
        randomizeStar(star, true);
        app.stage.addChild(star.sprite);
        stars.push(star);
    }

    function randomizeStar(star, initial) {
        star.z = initial ? Math.random() * 2000 : cameraZ + Math.random() * 1000 + 2000;

        //Calculate star positions with radial random coordinate so no star hits the camera.
        var deg = Math.random() * Math.PI * 2;
        var distance = Math.random() * 50 + 1;
        star.x = Math.cos(deg) * distance;
        star.y = Math.sin(deg) * distance;
    }

    // Listen for animate update
    app.ticker.add(function (delta) {
        //Simple easing. This should be changed to proper easing function when used for real.
        //speed += (warpSpeed - speed) / 20;
        cameraZ += delta * 10 * (speed + baseSpeed);
        for (var i = 0; i < starAmount; i++) {
            var star = stars[i];
            if (star.z < cameraZ)
                randomizeStar(star);


            //console.log(star.sprite.zIndex);

            //Map star 3d position to 2d with really simple projection
            var z = star.z - cameraZ;
            star.sprite.x = star.x * (fov / z) * app.renderer.screen.width + app.renderer.screen.width / 2;
            star.sprite.y = star.y * (fov / z) * app.renderer.screen.width + app.renderer.screen.height / 2;

            //Calculate star scale & rotation.
            var dxCenter = star.sprite.x - app.renderer.screen.width / 2;
            var dyCenter = star.sprite.y - app.renderer.screen.height / 2;
            var distanceCenter = Math.sqrt(dxCenter * dxCenter + dyCenter + dyCenter);
            var distanceScale = Math.max(0, (2000 - z) / 2000);
            star.sprite.scale.x = distanceScale * starBaseSize;
            //Star is looking towards center so that y axis is towards center.
            //Scale the star depending on how fast we are moving, what the stretchfactor is and depending on how far away it is from the center.
            star.sprite.scale.y = distanceScale * starBaseSize + distanceScale * speed * starStretch * distanceCenter / app.renderer.screen.width;
            star.sprite.rotation = Math.atan2(dyCenter, dxCenter) + Math.PI / 2;

        }
    });
}

 

JavaScript

Tagged in:

, ,