Advertisement
Guest User

Untitled

a guest
Apr 23rd, 2017
57
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <Html>
  2.  
  3. <head>
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  5. <meta charset="utf-8"/>
  6. <title>Zmija</title>
  7. <style>
  8. canvas
  9. {
  10.    
  11.   margin: 0 auto;
  12.   display: block;
  13.   border:1px solid black;    
  14.   }
  15. </style>
  16. </head>
  17.  
  18. <body >
  19. <canvas id="canvas" width="800" height="400"></canvas>
  20.  
  21. <script type="text/javascript">
  22. $(document).ready(function()
  23. {
  24.    
  25.     var canvas = $("#canvas")[0];
  26.     var ctx = canvas.getContext("2d");
  27.     var w = $("#canvas").width();
  28.     var h = $("#canvas").height();
  29.    
  30.    
  31.     var cw = 20; //dolzina na edna celija vo pikseli.
  32.     var d; // nasoka na dvizenje, cuva string.
  33.     var food;  //hrana sho ja jade neli za da porasne.
  34.     var score; // poeni
  35.    
  36.    
  37.     var snake_array; //Inicijalizacija na kjelii za zmijata.
  38.    
  39.     function init()
  40.     {
  41.         //wall_canvas();
  42.         d = "right"; //Na start odi na desno.
  43.         create_snake(); // Ja crta zmijata.
  44.         create_food(); //Ja crta hranata.
  45.         score = 0; //Poeni
  46.        
  47.         //Go updejtira canvasot na sekoi 60ms
  48.         if(typeof game_loop != "undefined") clearInterval(game_loop);
  49.         game_loop = setInterval(paint, 120);
  50.        
  51.        
  52.     }
  53.     init();
  54.    
  55.     function create_snake() //Kreiranje zmija.
  56.     {
  57.         var length = 5; //Pocetna dolzina
  58.         snake_array = []; //Prazna niza na start.
  59.         for(var i = length-1; i>=0; i--)
  60.         {
  61.             //Ja crta nizata na kanvasot,kreira 4 kocki na start.
  62.             snake_array.push({x: i, y:0});//push dodava element na kraj od nizata i ja updejtira goleminata na nizata vo lenght.
  63.         }
  64.     }
  65.    
  66.     //Kreira hrana
  67.     function create_food()
  68.     {
  69.         food =
  70.         {
  71.             x: Math.round(Math.random()*(w-cw)/cw),
  72.             y: Math.round(Math.random()*(h-cw)/cw),
  73.         };
  74.         //cw=10 znaci sekoja kelija e 10px,canvasov e 450, znaci ima 44 mozni pozii kaj sho moze da kreira hrana.
  75.        
  76.     }
  77.     function wall_canvas()
  78.     {
  79.         ctx.beginPath();
  80.         ctx.strokeRect(0, 0, w, h);
  81.         ctx.stroke();
  82.         ctx.closePath();
  83.    
  84.     }
  85.     //Ja crta zmijata po inicijalizacija
  86.     function paint()
  87.     {
  88.         //Crta beja linija na mestata koj gi pominala zmijata,ako nee ova ostava trag na canvasot.
  89.         ctx.fillStyle = "white";
  90.         ctx.fillRect(0, 0, w, h);
  91.         ctx.strokeStyle = "black";
  92.         ctx.strokeRect(0, 0, w, h);
  93.        
  94.        
  95.         //Dvizenje na zmijata, ja zema poslednata kelija od nizata i ja stava posle prvata.
  96.         var nx = snake_array[0].x;
  97.         var ny = snake_array[0].y;
  98.         //nx i ny e momentalna pozicija na prvata kelija.
  99.         //Se zgolemuva za 1, za da se dobio prazno mesto koe kje go potpolni poslednata kelija.
  100.         //Odreduva na koja strana da se drzi zmijata, cuva string.
  101.         if(d == "right") nx++;
  102.         else if(d == "left") nx--;
  103.         else if(d == "up") ny--;
  104.         else if(d == "down") ny++;
  105.        
  106.        
  107.         //Restatira ako e game over,proveruva dali prvata kelija dopira nekoja druga, i povikuva funkcija za detekcija na kolizija so zidot
  108.         //Ako edno od ovie e true, go restatira canvasot.
  109.         if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
  110.         {
  111.            
  112.             init();
  113.            
  114.             return;
  115.         }
  116.        
  117.         //Detekcija na sudir so hrana,nx i ny e pozicija na prvata kelija, ako e vo sudir so x i y od hranata, dodaj nova kelija na start od nizata.
  118.        
  119.         if(nx == food.x && ny == food.y)
  120.         {
  121.             var tail = {x: nx, y: ny};
  122.             score++;
  123.             //Ja povikuva funkcija odozgora, za nova hrana da kreira.
  124.             create_food();
  125.         }
  126.         else
  127.         {
  128.             var tail = snake_array.pop(); // Ja brise poslednata kelija.
  129.             tail.x = nx; tail.y = ny;// ja stava poslednaja kjelija kako prva.
  130.         }
  131.    
  132.        
  133.         snake_array.unshift(tail); //Ja stava poslednata kelija kako prva vo nizata.
  134.        
  135.         for(var i = 0; i < snake_array.length; i++)
  136.         {
  137.             var c = snake_array[i];
  138.             //Povikuva funkcija za boenje na keliite na zmijata.
  139.             paint_cell(c.x, c.y);
  140.         }
  141.        
  142.         //Povikuva funkcija za boenje na hranata.
  143.         paint_cella(food.x, food.y);
  144.         //ja bio score promenlivata.
  145.         ctx.font = "20px Arial";
  146.         var score_text = "Score: " + score;
  147.         ctx.fillText(score_text, 15, h-5);
  148.     }
  149.    
  150.     //Funkcija za boenje.
  151.     function paint_cell(x, y)
  152.     {
  153.         ctx.fillStyle = "green";
  154.         ctx.fillRect(x*cw, y*cw, cw, cw);
  155.         ctx.strokeStyle = "#03170B";// stava mala beja linija pomedju site kelii da izgledat pouavo.
  156.         ctx.strokeRect(x*cw, y*cw, cw, cw);
  157.     }
  158.     function paint_cella(x, y)
  159.     {
  160.         ctx.fillStyle = "blue";
  161.         ctx.fillRect(x*cw, y*cw, cw, cw);
  162.         ctx.strokeStyle = "white";// stava mala beja linija pomedju site kelii da izgledat pouavo.
  163.         ctx.strokeRect(x*cw, y*cw, cw, cw);
  164.     }
  165.    
  166.     function check_collision(x, y, array)
  167.     {
  168.         //Funkcija za detekcija na kolizicija,proveruva dali xy kordinati od zidot gi ima
  169.         //Vo momentalna pozicija na zmijata
  170.         //Ja vrti cela niza i proveruva xy kordinati na sekoja kelija
  171.         //Vrajca true ako ima kolizija,vo red 95 se povikuva funkcijava za proverka.
  172.         //in an array of cells or not
  173.         for(var i = 0; i < array.length; i++)
  174.         {
  175.             if(array[i].x == x && array[i].y == y)
  176.              return true;
  177.         }
  178.         return false;
  179.     }
  180.    
  181.     //Kontroli, koristi keydown od jquary.
  182.     $(document).keydown(function(e)
  183.     {
  184.         var key = e.which;
  185.         if(key == "37" && d != "right") d = "left"; //Ova mora vaka, za da ne mozes da svrtish nanazad.
  186.         else if(key == "38" && d != "down") d = "up";
  187.         else if(key == "39" && d != "left") d = "right";
  188.         else if(key == "40" && d != "up") d = "down";
  189.     })
  190.    
  191.    
  192.    
  193.    
  194.    
  195.    
  196.    
  197. })
  198.  
  199.  
  200. </script>
  201.  
  202.  
  203. </body>
  204.  
  205.  
  206.  
  207. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement