Guest User

Untitled

a guest
Jan 12th, 2011
14,174
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <head>
  3.   <META charset='UTF8'>
  4.   <title>canvasExample</title>
  5. </head>
  6. <body>
  7.   <canvas id='example'>Обновите браузер</canvas>
  8.   <script>
  9.     example = document.getElementById("example");
  10.     ctx = example.getContext('2d');
  11.     // Размер одной ячейки на карте
  12.     cellSize = 32;
  13.     // Массив карты поля боя
  14.     var map = [
  15.       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  16.       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  17.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  18.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  19.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  20.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  21.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 2, 2, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  22.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 2, 2, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  23.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  24.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  25.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  26.       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  27.       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  28.       [1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1],
  29.       [2, 2, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 2, 2],
  30.       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  31.       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  32.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  33.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  34.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  35.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  36.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  37.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  38.       [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
  39.       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  40.       [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  41.     ];
  42.     example.width = 16*cellSize;
  43.     example.height = 15*cellSize;
  44.     ctx.fillStyle = '#ccc';
  45.         ctx.fillRect(0, 0, example.width, example.height);
  46.     ctx.fillStyle = '#000';
  47.         ctx.fillRect(cellSize, cellSize, 13*cellSize, 13*cellSize)
  48.     // Цикл обрабатывающий массив в котором содержатся значения элементов карты
  49.     // если попадается 1 то рисуется кирпичный блок
  50.     // если 2, то бетонная стена
  51.     for (var j=0; j<26; j++)
  52.       for (var i=0; i<26; i++) {
  53.         switch (map[j][i]) {
  54.           case 1:
  55.             DrawBrick(i*cellSize/2 + cellSize, j*cellSize/2 + cellSize);
  56.             break;
  57.           case 2:
  58.             DrawHardBrick(i*cellSize/2 + cellSize, j*cellSize/2 + cellSize);
  59.             break;
  60.                 }
  61.           }
  62.   // Рисуем часть кирпичной стены
  63.   function DrawBrick(x, y) {
  64.     // Отрисовка основного цвета кирпича
  65.     ctx.fillStyle = '#FFA500';
  66.     ctx.fillRect(x, y, cellSize/2, cellSize/2);
  67.     // Отрисовка теней
  68.     ctx.fillStyle = '#CD8500';
  69.     ctx.fillRect(x, y, cellSize/2, cellSize/16);
  70.     ctx.fillRect(x, y+cellSize/4, cellSize/2, cellSize/16);
  71.     ctx.fillRect(x+cellSize/4, y, cellSize/16, cellSize/4);
  72.     ctx.fillRect(x+cellSize/16, y+cellSize/4, cellSize/16, cellSize/4);
  73.     // Отрисовка раствора между кирпичами
  74.     ctx.fillStyle = '#D3D3D3';
  75.     ctx.fillRect(x, y+cellSize/4-cellSize/16, cellSize/2, cellSize/16);
  76.     ctx.fillRect(x, y+cellSize/2-cellSize/16, cellSize/2, cellSize/16);
  77.     ctx.fillRect(x+cellSize/4-cellSize/16, y, cellSize/16, cellSize/4);
  78.     ctx.fillRect(x, y+cellSize/4-cellSize/16, cellSize/16, cellSize/4);
  79.   }
  80.   // Рисуем часть бутонного блока
  81.   function DrawHardBrick(x, y) {
  82.     // Отрисовка основного фона
  83.     ctx.fillStyle = '#cccccc';
  84.     ctx.fillRect(x, y, cellSize/2, cellSize/2);
  85.     // Отрисовка Тени
  86.     ctx.fillStyle = '#909090';
  87.     ctx.beginPath();
  88.     ctx.moveTo(x,y+cellSize/2);  
  89.     ctx.lineTo(x+cellSize/2,y+cellSize/2);  
  90.     ctx.lineTo(x+cellSize/2,y);  
  91.     ctx.fill();  
  92.     // Отрисовка белого прямоугольника сверху
  93.     ctx.fillStyle = '#eeeeee';
  94.     ctx.fillRect(x+cellSize/8, y+cellSize/8, cellSize/4, cellSize/4);
  95.   }
  96.   </script>
  97. </body>
  98. </html>
RAW Paste Data