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
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!