UZFOR
A_N_T_I_C_L_O_N
Mantiqiy savolar yozamiz javob beramaiz
10 soat 46 daqiqa 6 soniyadan keyin yozdi:
Diqqat savol u yashash uchun uyidan vohli chiqib ketadi yasash uchun kopgina konsertlar beradi va ohirgi konserti fojiyali yakun topadi topganlar shaxsiy xabarga yozsin #1 deb
1 kun 10 soat 25 daqiqa 21 soniyadan keyin yozdi:
U savol emas lekin hamma unga javob beradi #2 deb yozila javobi
1 kun 10 soat 25 daqiqa 54 soniyadan keyin yozdi:
  1. <!DOCTYPE html>
  6.   html, body {
  7.     height: 100%;
  8.     margin: 0;
  9.   }
  10.   body {
  11.     background: black;
  12.     display: flex;
  13.     align-items: center;
  14.     justify-content: center;
  15.   }
  16.   canvas {
  17.     border: 1px solid white;
  18.   }
  19.   </style>
  20. </head>
  22. <canvas width="400" height="400" id="game"></canvas>
  24. var canvas = document.getElementById('game');
  25. var context = canvas.getContext('2d');
  26. var grid = 16;
  27. var count = 0;
  28.  
  29. var snake = {
  30.   x: 160,
  31.   y: 160,
  32.  
  33.   // snake velocity. moves one grid length every frame in either the x or y direction
  34.   dx: grid,
  35.   dy: 0,
  36.  
  37.   // keep track of all grids the snake body occupies
  38.   cells: [],
  39.  
  40.   // length of the snake. grows when eating an apple
  41.   maxCells: 4
  42. };
  43. var apple = {
  44.   x: 320,
  45.   y: 320
  46. };
  47. // get random whole numbers in a specific range
  49. function getRandomInt(min, max) {
  50.   return Math.floor(Math.random() * (max - min)) + min;
  51. }
  52. // game loop
  53. function loop() {
  54.   requestAnimationFrame(loop);
  55.   // slow game loop to 15 fps instead of 60 (60/15 = 4)
  56.   if (++count < 4) {
  57.     return;
  58.   }
  59.   count = 0;
  60.   context.clearRect(0,0,canvas.width,canvas.height);
  61.   // move snake by it's velocity
  62.   snake.x += snake.dx;
  63.   snake.y += snake.dy;
  64.   // wrap snake position horizontally on edge of screen
  65.   if (snake.x < 0) {
  66.     snake.x = canvas.width - grid;
  67.   }
  68.   else if (snake.x >= canvas.width) {
  69.     snake.x = 0;
  70.   }
  71.  
  72.   // wrap snake position vertically on edge of screen
  73.   if (snake.y < 0) {
  74.     snake.y = canvas.height - grid;
  75.   }
  76.   else if (snake.y >= canvas.height) {
  77.     snake.y = 0;
  78.   }
  79.   // keep track of where snake has been. front of the array is always the head
  80.   snake.cells.unshift({x: snake.x, y: snake.y});
  81.   // remove cells as we move away from them
  82.   if (snake.cells.length > snake.maxCells) {
  83.     snake.cells.pop();
  84.   }
  85.   // draw apple
  86.   context.fillStyle = 'red';
  87.   context.fillRect(apple.x, apple.y, grid-1, grid-1);
  88.   // draw snake one cell at a time
  89.   context.fillStyle = 'green';
  90.   snake.cells.forEach(function(cell, index) {
  91.  
  92.     // drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is
  93.     context.fillRect(cell.x, cell.y, grid-1, grid-1);  
  94.     // snake ate apple
  95.     if (cell.x === apple.x && cell.y === apple.y) {
  96.       snake.maxCells++;
  97.       // canvas is 400x400 which is 25x25 grids 
  98.       apple.x = getRandomInt(0, 25) * grid;
  99.       apple.y = getRandomInt(0, 25) * grid;
  100.     }
  101.     // check collision with all cells after this one (modified bubble sort)
  102.     for (var i = index + 1; i < snake.cells.length; i++) {
  103.  
  104.       // snake occupies same space as a body part. reset game
  105.       if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
  106.         snake.x = 160;
  107.         snake.y = 160;
  108.         snake.cells = [];
  109.         snake.maxCells = 4;
  110.         snake.dx = grid;
  111.         snake.dy = 0;
  112.         apple.x = getRandomInt(0, 25) * grid;
  113.         apple.y = getRandomInt(0, 25) * grid;
  114.       }
  115.     }
  116.   });
  117. }
  118. // listen to keyboard events to move the snake
  119. document.addEventListener('keydown', function(e) {
  120.   // prevent snake from backtracking on itself by checking that it's 
  121.   // not already moving on the same axis (pressing left while moving
  122.   // left won't do anything, and pressing right while moving left
  123.   // shouldn't let you collide with your own body)
  124.   
  125.   // left arrow key
  126.   if (e.which === 37 && snake.dx === 0) {
  127.     snake.dx = -grid;
  128.     snake.dy = 0;
  129.   }
  130.   // up arrow key
  131.   else if (e.which === 38 && snake.dy === 0) {
  132.     snake.dy = -grid;
  133.     snake.dx = 0;
  134.   }
  135.   // right arrow key
  136.   else if (e.which === 39 && snake.dx === 0) {
  137.     snake.dx = grid;
  138.     snake.dy = 0;
  139.   }
  140.   // down arrow key
  141.   else if (e.which === 40 && snake.dy === 0) {
  142.     snake.dy = grid;
  143.     snake.dx = 0;
  144.   }
  145. });
  146. // start the game
  147. requestAnimationFrame(loop);
  148. </script>
  149. </body>
  150. </html>
0 Mavzuga qaytish