Untitled

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">
<script type="text/javascript" charset="UTF-8" src="main_pliki/transformacje.js"></script>  <!-- korzystamy z biblioteki "transformacje.js" -->
<script type="text/javascript" charset="UTF-8">
//========================================================================================


var d=700;
var E = [400, 300, -d];
var Speed = 12;
var posX = 430;
var posY = 700;
var Movement = 'Noone';
var fps;

function clear_canvas(){
  canvas=document.getElementById("canvas");
  if(!canvas.getContext){return;}
  c=canvas.getContext("2d");
  c.clearRect(0,0,canvas.width,canvas.height);}

//=====================================================================================
//Rysowanie wielokat0w

function polygon(w,color){

   var v = [];
	for(var i=0; i<w.length; i++)
	    v[i]=projectXY(w[i], d);

    canvas=document.getElementById("canvas");
    if(!canvas.getContext){return;}
    c=canvas.getContext("2d");

      c.beginPath();
      c.moveTo(v[0][0],v[0][1]);
	  for(var i=1; i<v.length; i++)
	    c.lineTo(v[i][0],v[i][1]);

      c.closePath();

      c.lineWidth = 1;
      c.fillStyle = color;
      c.fill();
      c.strokeStyle = color;
      c.stroke();
	}


function triangle(a,b,c,color){
	polygon([a,b,c],color);
   }

//=====================================================================================
function visibility(a3D,b3D,c3D){

   a=projectXY(a3D,d);
   b=projectXY(b3D,d);
   c=projectXY(c3D,d);

var visible = 1;
if(((b[0]-a[0])*(c[1]-b[1])-(b[1]-a[1])*(c[0]-b[0]))>=0)
    {visible=0;}
  return visible;
}


function face(w,color){
if(1==visibility(w[0],w[1],w[2]))
	{polygon(w,color);}
}

function rotation(angle){
var	a=[];
var b=[];
	a[0]=(b1[0][0]+b1[2][0])/2;
	a[1]=(b1[0][1]+b1[2][1])/2;
	a[2]=(b1[0][2]+b1[2][2])/2;

	b[0]=(b1[4][0]+b1[6][0])/2;
	b[1]=(b1[4][1]+b1[6][1])/2;
	b[2]=(b1[4][2]+b1[6][2])/2;

	rotateVertex(p,a,b,angle);
	rotateVertex(b1,a,b,angle);
	clear_canvas();
	drawPlayer();
}


//==========================================================================================
//==========================================================================================
//==========================================================================================
//==========================================================================================
//==========================================================================================
//==========================================================================================
//==========================================================================================
//==========================================================================================
//==========================================================================================
//==========================================================================================


var p = scaleVertex([
      //Upper
	    [0, 0, 3],
		[3, 0, 3],
        [3, 0, 3.5],
		[0, 0, 3.5],

		[0, 0.3, 3],
		[3, 0.3, 3],
        [3, 0.3, 3.5],
		[0, 0.3, 3.5],

		//Lower
		[0.4,0.6,3],
		[2.6,0.6,3],
		[0.4,0.6,3.5],
		[2.6,0.6,3.5],
    ], 40);

 var b1 = scaleVertex([
        [0, 3, 3],
		[5, 3, 3],
        [5, 3, 3.5],
		[0, 3, 3.5],

		[0, 4, 3],
		[5, 4, 3],
        [5, 4, 3.5],
		[0, 4, 3.5],
    ], 20);

function drawPlayer(){


		face([p[4],p[8],p[10],p[7]],'yellow');
		face([p[5],p[6],p[11],p[9]],'yellow');
		face([p[7],p[10],p[11],p[6]],'green');
		face([p[4],p[8],p[9],p[5]],'green');


	face([p[0],p[1],p[2],p[3]],'red');
	face([p[0],p[4],p[5],p[1]],'grey');
	face([p[1],p[5],p[6],p[2]],'blue');
	face([p[2],p[6],p[7],p[3]],'cyan');
	face([p[3],p[7],p[4],p[0]],'magenta');
	face([p[4],p[7],p[6],p[5]],'yellow');


}


function drawBrick(b1){
	/*
	var n=Math.floor((Math.random() * 10) + 1);
	var c;

	if (n==1) c='red'
	if (n==2) c='grey'
	if (n==3) c='blue'
	if (n==4) c='cyan'
	if (n==5) c='red'
	*/

	face([b1[0],b1[1],b1[2],b1[3]],'red');
	face([b1[0],b1[4],b1[5],b1[1]],'grey');
	face([b1[1],b1[5],b1[6],b1[2]],'blue');
	face([b1[2],b1[6],b1[7],b1[3]],'cyan');
	face([b1[3],b1[7],b1[4],b1[0]],'magenta');
	face([b1[4],b1[7],b1[6],b1[5]],'yellow');


}
var brick=[];
var count=0;

function draw(){
clear_canvas();
	if (Movement=='Left' && posX > 25)
	{
		translateVertex(p,[-Speed,0,0]);
        posX=posX-Speed;
	}
		if (Movement=='Right' && posX < 830)
	{
	   translateVertex(p,[Speed,0,0]);
         posX=posX+Speed;
	}
drawPlayer();


for (var c=1; c<=count; c++){
drawBrick(brick[c]);
}

}

function CreateBrick(a,b,c){
count++;
brick[count] = scaleVertex([
        [0, 3, 3],
		[5, 3, 3],
        [5, 3, 3.5],
		[0, 3, 3.5],

		[0, 4, 3],
		[5, 4, 3],
        [5, 4, 3.5],
		[0, 4, 3.5],
    ], 20);
translateVertex(brick[count],[a,b,c]);
drawBrick(brick[count]);

}

function Level1(){
var x=0;
var y=-60;

for (var j=0; j<3; j++){
for(var i=0; i<6; i++)
{
	    CreateBrick(x,y,0);
		x=x+140;
		console.log(x,y);

}
y=y+70;
x=0;
}
}

function Frames(){
    translateVertex(p,[340,620,0]);
    fps = setInterval('draw()', 12);
}

var play;

function startAnimation(){
play=setInterval('animate()',65);
}
function stopAnimation(){
clearInterval(play);
}

function keyDownHandler(e)
{
    e = e || event;
    var keyCode = e.keyCode, letter = (String.fromCharCode(e.keyCode) || '').toLowerCase();


	//Lewo
	if (37 == keyCode)
    {
     Movement='Left'

    }
    //Prawo
 	 if (39 == keyCode )
    {

     Movement='Right'

    }

	if (38 == keyCode)
    {
     Movement='Noone'

    }

    if (40 == keyCode)
    {
       Movement='Noone'
    }


    return false;
}


</script>
 </head>

 <body onkeydown="keyDownHandler(event)">
   <table cellspacing="1" cellpadding="1"> <tbody><tr> <td> <canvas id="canvas" width="800" height="600" style="background:rgb(160,180,222)">
  <br>

 </td> <td>
  <button onclick="Frames(); Level1();">Start</button>
  <button onclick="Level1(); ">Test</button>


</body></html>