Untitled

<!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 t = new Array(20);
        for (var i = 0; i < 20; i++) {
		t[i] = new Array(20);
        }

	var cegly=[];

var type = "WebGL"
    if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }
	 function init()
    {
	for(var i=0;i<10;i++)
	t[Math.floor(Math.random()*18+1)][Math.floor(Math.random()*18+1)]=3;

        t[8][2]=3;
		t[9][0]=3;
		t[10][9]=3;
		t[12][3]=3;
		t[15][6]=3;

    }

//////////////////////////////////////////////////////////////////////////////
var app = new PIXI.Application(750, 550, {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 texture_tlo = PIXI.Texture.fromImage('tlo.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>-450)
                        hero.x-=krok;
        if (right.isDown && hero.x <450 )
                        hero.x+=krok;
		if (up.isDown && hero.y>-450)
                        hero.y-=krok;
        if (down.isDown && hero.y <450 )
                        hero.y+=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()
{
		tlo = new PIXI.Sprite(texture_tlo); //wczytaj obrazek
        tlo.anchor.set(0.5); // ustawienie środka obrazka
        tlo.x = 245; //początkowy x
        tlo.y = 150; // początkowy y
        container.addChild(tlo); //dodanie do kontenera naszego hero

		init();
		var licznik=0;
		var cegla;
		for (var i=0;i<20;i++)
			for (var j=0; j<20; j++)
			{
				if(t[i][j]==3)
				{
					cegla = new PIXI.Sprite(texture_ufo); //wczytaj obrazek
					cegla.anchor.set(0.5); // ustawienie środka obrazka
					cegla.x = i*26; //początkowy x
					cegla.y = j*26; // początkowy y
					container.addChild(cegla); //dodanie do kontenera naszego hero
					cegly.push(cegla);
				}
			}


		hero = new PIXI.Sprite(texture_hero); //wczytaj obrazek
        hero.anchor.set(0.5); // ustawienie środka obrazka
        hero.x = -10; //początkowy x
        hero.y = 10; // 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 hero
}
///////
rysuj();
// ŚRODEK EKRANU
container.x = (app.renderer.width - container.width) / 2;
container.y = (app.renderer.height - container.height) / 2;
        </script>
    </body>
</html>