Javascript ile Grid Sistem Yapımı

Grid Sistem Nedir?

“Grid” kelime anlamı olarak belirli bir hay, izlek ya da daha çok kullanıldığı haliyle ızgara anlamına gelmektedir. Web tasarımla uğraşanların ilk aklına gelen ise bootstrap grid yapısıdır muhtemelen ama yapacağımız örnek bir strateji oyununun tabanı ya da harita uygulamasının zemini de olabilir bu sizin üretkenliğinize kalmış bi durum. Aşağıda paylaşmış olduğun kod da tam bu işinizi görecek cinsten. Satır satır açıklamaları da mevcut.

var canv = document.getElementById("canvas"); //canvas etiketini canv değerine ata
var ctx = canv.getContext("2d"); //canvasın context türünü belirle

canv.width = window.innerWidth - 5; //canvas genişliğini ayarla
canv.height = window.innerHeight - 5; //canvas yükseklğini ayarla

canv.style.border = 1 + "px solid black"; //canvasa kenar çiz

gx = 5, gy = 5, grids = [], grid = 0; //grid aralıklarını ve zoom yapabilmek için grid dizisini belirle

document.addEventListener("mousewheel", mouseWheel); //mouse tekerleğini dinle

drawGrid(); //fonksiyonu çalıştır

function drawGrid() {
          for (var i = 0; i < window.innerWidth; i++) { //x ekseni çizgilerini çiz
                  ctx.fillStyle = "#ffc1e3";
                  ctx.fillRect(1, gy * i, window.innerWidth, 1);
                  grid = Math.floor(window.innerWidth / gy);
                  grids.push(grid);
          }
          for (var i = 0; i < window.innerHeight; i++) { //y eksemi çizgilerini çiz
                  ctx.fillStyle = "#ffc1e3";
                  ctx.fillRect(gx * i, 1, 1, window.innerHeight);
                  grid = Math.floor(window.innerHeight / gx);
                  grids.push(grid);
          }
};

function mouseWheel(e) {
          if (e.wheelDelta > 0) { //tekerleğin yukarı dönmesi olayı
                  gx += 10; //her tekerlek döndüğünde grid aralıklarını arttır
                  gy += 10;
                  ctx.fillStyle = "#fff";
                  ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
                  grids = [];
                  drawGrid();
          }
          else if (e.wheelDelta < 0) { //tekerleğin aşağı dönmesi olayı
                  gx -= 5;//her tekerlek döndüğünde grid aralıklarını azalt
                  gy -= 5;
                  ctx.fillStyle = "#fff";
                  ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
                  grids = [];
                  drawGrid();
        }
}

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir