inventory demo + movement of items

src/canvas.js

@@ -1,12 +1,21 @@
 var canvas = document.querySelector('canvas');
-
-canvas.width    = window.innerWidth;
-canvas.height   = window.innerHeight;
-
-
-
 var c = canvas.getContext('2d');
 
+window.addEventListener('load', () => {
+    resize();
+})
+
+window.addEventListener('resize', () => {
+    resize();
+});
+
+function resize(){
+    canvas.height = window.innerHeight;
+    canvas.width = window.innerWidth;
+}
+
+
+
 // Rect
 //c.fillStyle = 'rgba(255,0,255,0.5)';
 //c.fillRect(100,200,100,100,0.5);
@@ -68,41 +77,96 @@ function coil(x,y, width,od){
     c.stroke();
 }
 
-for (var i=40; i < (12*40); i=i+40) {
-    for (var j=50; j < (12*50); j=j+50) {
-        coil(j,i, 20 + (5 * Math.random()),30 + (5 * Math.random()));
-    }
-}
-
 const coils = {
-    xs:     [50,50,50,5],
+    xs:     [],
-    ys:     [50,150,250,35],
+    ys:     [],
-    widths: [68,75,68,75],
+    widths: [],
-    ods:    [80,80,100,100]
+    ods:    []
 };
 
+const field = {
+    xi: 0,
+    xf: 12,
+    yi: 0,
+    yf: 12,
+}
 
-//window.addEventListener('load', () => {
+const initCoil = {
-//    const canvas = document.querySelector('#canvas');
+    x: 40,
-//    const ctx = canvas.getContext("2d");
+    y: 50,
-//
+    width: 20,
-//    reloadEvent(canvas, ctx);
+    od: 30,
-//});
+}
-//
+
-//function reloadEvent(x, y){
+function initCoils(obj, f, r){
-//    window.addEventListener('resize', () => {
+    for (var y=f.yi; y<f.yf; y++) {
-//        resize(x, y);
+        for (var x=f.xi; x<f.yf; x++) {
-//    });
+            var index = (y*f.xf) + x;
-//}
+
-//
+            coils.xs[index]       = (x + 1) * obj.x;
-//function draw(x) {
+            coils.ys[index]       = (y + 1) * obj.y;
-//    x.strokeStyle = 'blue';
+            coils.widths[index]   = obj.width   + (r * Math.random());
-//    x.lineWidth = '5';
+            coils.ods[index]      = obj.od      + (r * Math.random());
-//    x.strokeRect(0, 0, window.innerWidth, window.innerHeight);
+        }
-//}
+    }
-//
+}
-//function resize(x, y){
+
-//    x.height = window.innerHeight;
+initCoils(initCoil,field,5);
-//    x.width = window.innerWidth;
+
-//    draw(y);
+function drawCoils(){
-//}
+    for (var i=0; i < coils.xs.length; i++) {
+        coil(
+            coils.xs[i],
+            coils.ys[i],
+            coils.widths[i],
+            coils.ods[i]
+        );
+    }
+}
+
+function drawZone(x, y, row, length){
+    c.strokeRect(
+        initCoil.x*(x+1) - 5,
+        initCoil.y*(y+1) - 5,
+        initCoil.x*row - 5,
+        initCoil.y*length - 5);
+}
+
+function drawZones(){
+    drawZone(0,0,6,6);
+    drawZone(6,0,6,6);
+    drawZone(0,6,6,6);
+    drawZone(6,6,6,6);
+}
+
+function move(i, xf, yf){
+    if (coils.xs[i] > initCoil.x*(xf+1)) coils.xs[i]--;
+    if (coils.xs[i] < initCoil.x*(xf+1)) coils.xs[i]++;
+    if (coils.ys[i] > initCoil.y*(yf+1)) coils.ys[i]--;
+    if (coils.ys[i] < initCoil.y*(yf+1)) coils.ys[i]++;
+}
+
+function movements(){
+    move(0,2,13);
+    if ((coils.xs[0] == initCoil.x*(2+1)) 
+        && (coils.ys[0] == initCoil.y*(13+1))) {
+        move(2,0,0);
+        if ((coils.xs[2] == initCoil.x*(0+1)) 
+            && (coils.ys[2] == initCoil.y*(0+1))) {
+            move(0,2,0);
+        }
+    }
+}
+
+function animate(){
+    requestAnimationFrame(animate);
+    c.clearRect(0,0,innerWidth,innerHeight);
+
+    drawCoils();
+    drawZones();
+
+    movements();
+    //move(0,2,0);
+}
+
+animate();