javascript - 如何从 javascript 的 for 循环中调用函数？

Question

let ti11 = document.createElement('input')
function hkRender() {

    window.game.mapSetup = {};
    mapContext = map.getContext('2d')

    // Styling the canvas background (works)

    mapContext.fillStyle = ti9.value

    game.mapSetup.loadMapColor = function(){
        ti9.value = localStorage.getItem('mmc')
        mapContext.fillStyle = ti9.value
    }
    window.game.mapSetup.changeMapColor = function(mapColor){
        let mmc = localStorage.getItem('mmc')
        mapContext.fillStyle = mmc
        localStorage.setItem('mmc', mapColor)
    }

    ti9.className = "jscolor {onFineChange:'window.game.mapSetup.changeMapColor(this.toHEXString())'}"

    ti9.value = localStorage.getItem('ti9val')
    ti9.onchange = function(){
      localStorage.setItem('ti9val', ti9.value)
    }
    game.mapSetup.loadMapColor()

    // Styling player text in canvas (doesnt work)

    for (let player in players) {
        let plr = players[player]


        // player name
        mapContext.fillStyle = ti11.value

        game.mapSetup.loadPlayerNameColor = function(){
            ti11.value = localStorage.getItem('mmn')
            mapContext.fillStyle = ti11.value
        }
        window.game.mapSetup.changePlayerNameColor = function(playerNameColor){
            let mmn = localStorage.getItem('mmn')
            mapContext.fillStyle = mmn
            localStorage.setItem('mmc', playerNameColor)
        }

    }

    ti11.className = "jscolor {onFineChange:'window.game.mapSetup.changePlayerNameColor(this.toHEXString())'}"


    ti11.value = localStorage.getItem('ti11val')
    ti11.onchange = function(){
        localStorage.setItem('ti11val', ti11.value)
    }
    game.mapSetup.loadPlayerNameColor()
}

我想为//player name中定义的属性mapContext.fillStyle设置样式，但是在调用该函数进行样式设置时，它适用于地图背景的 mapContext.FillStyle 而不是名称。我如何区分这两个相似的属性？

标签： javascripthtmlcolor-pickergame-development

Answer 1

在循环上方定义函数：

let ti11 = document.createElement('input')
function changeColour(playerNameColor, mapContext){
 let mmn = localStorage.getItem('mmn')
        mapContext.fillStyle = mmn
        localStorage.setItem('mmc', playerNameColor)
}
function render(){
window.mapSetup = {}
for (let player in players) {
    let plr = players[player]

    // Draw name
    let name = plr.name
    if (!name) return
    mapContext.fillStyle = ti11.value

    game.mapSetup.loadPlayerNameColor = function(){
        ti11.value = localStorage.getItem('mmn')
        mapContext.fillStyle = ti11.value
    }
    window.game.mapSetup.changePlayerNameColor = function(playerNameColor, mapContext){
       changeColour(playerNameColor, mapContext);
    }
}

ti11.className = "jscolor {onFineChange:'window.game.mapSetup.changePlayerNameColor(this.toHEXString())'}"
ti11.style.width = '60px';
ti11.style.position = 'absolute'
ti11.style.left = '10px'
ti11.style.top = '305px'

ti11.value = localStorage.getItem('ti11val')
ti11.onchange = function(){
    localStorage.setItem('ti11val', ti11.value)
}
game.mapSetup.loadPlayerNameColor()

}

或者：

let ti11 = document.createElement('input')
function changeColour(playerNameColor, mapContext){
 let mmn = localStorage.getItem('mmn')
        mapContext.fillStyle = mmn
        localStorage.setItem('mmc', playerNameColor)
}
function render(){
window.mapSetup = {}
for (let player in players) {
    let plr = players[player]

    // Draw name
    let name = plr.name
    if (!name) return
    mapContext.fillStyle = ti11.value

    game.mapSetup.loadPlayerNameColor = function(){
        ti11.value = localStorage.getItem('mmn')
        mapContext.fillStyle = ti11.value
    }
    window.game.mapSetup.changePlayerNameColor = changeColour(playerNameColor, mapContext);
}

ti11.className = "jscolor {onFineChange:'window.game.mapSetup.changePlayerNameColor(this.toHEXString())'}"
ti11.style.width = '60px';
ti11.style.position = 'absolute'
ti11.style.left = '10px'
ti11.style.top = '305px'

ti11.value = localStorage.getItem('ti11val')
ti11.onchange = function(){
    localStorage.setItem('ti11val', ti11.value)
}
game.mapSetup.loadPlayerNameColor()

}