Please give constructive criticism on all trends and standards. How professionally written is this code?

• 0
  I ask for a score of 10 points. Thanks for the criticism!
  

  window.onload = function() {
  
      var canvas = document.getElementById("canvas"),
          ctx = canvas.getContext("2d"),
          width = canvas.width = window.innerWidth,
          height = canvas.height = window.innerHeight,
          tileWidth = 60,
          tileHeight = 30,
          activeTile = null,
  
          activeScale = {
              status: false
          };
  
      let tiles = []
      let img     = document.createElement("img")
      
      let getMap = async function (){
  
          this.map = await new sendFetch(activeTile, 'getmap', 'GET')
  
          return JSON.parse(this.map)
      }
  
      img.addEventListener("load", function() {
  
          (async function(){
  
              this.map = await getMap()
  
              init(this.map);
              
              setInterval(() => {
  
                  ctx.clearRect(-width, -1000, 3000, 3000)
                  draw(this.map)
  
              },500)
  
          })()
  
      })
      
      img.src = "tileset.png"
  
      ctx.translate(width / 2, 10)
  
  
      function init(map) {
  
          for (var x = 0; x < map.length; x++) {
              for (var y = 0; y < map[x].length; y++) {
                  tiles.push({ x, y, type: map[x][y], active: false })
  
              }
          }
      }
  
  
   async function draw(p_mainMap) {
  
          if(activeTile){
  
              const newStroke  = await wait(activeTile, p_mainMap)
  
              //присваиваем полученной фигуре статус активного
              for(let i = 0; tiles.length > i; i++){
                  
                  for(stroke of newStroke){
  
                      if(tiles[i].x == stroke.x && tiles[i].y == stroke.y){
  
                          tiles[i].active = true
                      }
                  }
              }
  
          }
          
          tiles.forEach(elem => drawImageTile(elem))
      }
  
  
      let rectFigure = new Path2D()
          
          rectFigure.moveTo(2, 9)
          rectFigure.lineTo(tileWidth / 2 + 2, tileHeight / 2 + 9)
          rectFigure.lineTo(2, tileHeight + 9)
          rectFigure.lineTo(-tileWidth / 2 + 2, tileHeight / 2 + 9)
          rectFigure.lineTo(3, 9)
  
  
      //отрисовка тайлов-картинок и одного квадрата вокруг тайл-картинки
      function drawImageTile({ x, y, type, active }) {
  
          const xx = (x - y) * tileWidth / 2
          const yy = (x + y) * tileHeight / 2
  
          ctx.save();
          ctx.translate(xx, yy)
  
  
          ctx.drawImage(img, type * tileWidth, 0, tileWidth, img.height,
          	-tileWidth / 2, 0, tileWidth, img.height);
  
          if (active) ctx.strokeStyle = 'red'
              else ctx.strokeStyle = '#ffffff00'
  
  
  
          ctx.beginPath()
          ctx.lineWidth = 3
          ctx.stroke(rectFigure);
          ctx.closePath()
  
          ctx.restore();
      }
  
  
  
  
      canvas.addEventListener('mousemove', (e)=>{
  
              let tile,
                  isInPath = false
  
              for (tile of tiles) {
  
                  isInPath = ctx.isPointInPath(
                      rectFigure,
                      e.clientX - (tile.x - tile.y) * tileWidth / 2,
                      e.clientY - (tile.x + tile.y) * tileHeight / 2,
  
                  )
                  
                  if (isInPath) break;
              }
              
              
              if (activeTile) activeTile.active = false;
  
              if (isInPath) {
  
                  activeTile = tile;
                  activeTile.active = true;
  
                  //неявная модификация основного массива содержащая ссылку
                  tiles.map(elem => elem.active = false)
  
              }else{
                  activeTile = null;
  
              }
  
              //система захвата курсором карты для масштабирования
              if(activeScale.status){
  
                  ctx.setTransform(1, 0, 0, 1, e.clientX - activeScale.diffX, e.clientY - activeScale.diffY)
  
              }
          
  
      })
      //фиксируем расстояние курсора на холсте для правильного ведения карты
      canvas.addEventListener('mousedown', function(e){
  
          activeScale = {
  
              status: true,
              diffX: e.clientX - ctx.getTransform().e,
              diffY: e.clientY - ctx.getTransform().f
          }
  
      })
  
      canvas.addEventListener('mouseup', function(e){
  
          activeScale.status = false
  
      })
  
      canvas.addEventListener('mouseout', function(e) {
  
          if (activeTile) activeTile.active = false;
  
          activeTile = null;
          activeScale.status = false
      })
  
      canvas.addEventListener('click', function(e){
  
         (async function (){
  
             this.data = await new sendFetch(activeTile, 'currtile', 'POST')
      
              console.log(this.data)
          })()
          
  
      })
      
  
  }

  JavaScript Max Eaton, Jun 12, 2020

---

0 Answers