Question

我有一个2个数组，一个包含html标签，另一个包含css属性

这不是真正重要的背景信息

我有一个代码，当用户点击我的canvas元素时会触发此代码的目的是确定终端（也就是画布）支持的内容

如果画布仅支持HTML，那么如果终端同时支持HTML和CSS，则触发第一个代码块，然后触发第二个代码块

第一个代码块从htmltags数组中选择一个随机标记，然后将其显示在用户在画布上单击的位置

支持HTML和CSS的第二个代码块采用2个数组并将它们组合在一起，从新数组中选择一个随机标记或属性，并将其显示在用户点击的位置

现在我添加第二个代码块之前它运行正常但是一旦我在第二个代码块中添加它，似乎两个代码块都粘在第二个标记

例如点击1：<br> 点击2：<i> 点击3-infinite：<i>

这是我的代码我已经看了2个小时试图修复它我现在把它留给堆栈

function writeMessage(canvas, message, x, y) {
    var terminal = canvas.getContext('2d');
    ClearCanvas();
    terminal.font = "20px Comic Sans MS";
    terminal.fillStyle = "rgb(0,255,1)";
    terminal.textAlign = "center";
    terminal.fillText(message, x, y);
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

var canvas = document.getElementById("terminalCanvas");
var terminal = canvas.getContext("2d");
fitToContainer(canvas);

terminal.fillStyle = "#000000";
terminal.fillRect(0, 0, canvas.width, canvas.height);
terminal.font = "20px Comic Sans MS";
terminal.fillStyle = "rgb(0,255,1)";
terminal.textAlign = "center";
terminal.fillText("Coding Idle Terminal", canvas.width / 2, canvas.height / 2);

function WriteToCanvas() {
    if (Game.Terminal.HTMLSupport == 1 && Game.Terminal.CSSSupport == 0) {
        var rand = Math.floor(Math.random() * 122) + 1;
        var tag = htmltags[rand];

        Game.Player.money += Game.Player.clickIncrement;
        Game.Player.exp += Game.Player.clickIncrement;
        Game.Player.clicksTotal += 1;

        $('#terminalCanvas').click(function(evt) {
            var mousePos = getMousePos(canvas, evt);
            var message = tag;
            writeMessage(canvas, message, mousePos.x, mousePos.y);
        });
    } else if (Game.Terminal.HTMLSupport == 1 && Game.Terminal.CSSSupport == 1) {
        var tagList = htmltags.concat(csstags);
        var tagListLength = tagList.length;
        var rand = Math.floor(Math.random() * tagListLength) + 1;
        var tagg = tagList[rand];

        Game.Player.money += Game.Player.clickIncrement;
        Game.Player.exp += Game.Player.clickIncrement;
        Game.Player.clicksTotal += 1;

        $('#terminalCanvas').click(function(evt) {
            var mousePos = getMousePos(canvas, evt);
            var message = tagg;
            writeMessage(canvas, message, mousePos.x, mousePos.y);
        });
    }
}

function ClearCanvas() {
    terminal.clearRect(0, 0, canvas.width, canvas.height);
    terminal.fillStyle = "#000000";
    terminal.fillRect(0, 0, canvas.width, canvas.height);
}

function fitToContainer(canvas) {
    canvas.style.width = '100%';
    canvas.style.height = '100%';

    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
}

WriteToCanvas();

Answer 1

我发现了问题

因为eventListenerExist是一个全局变量，一旦第一个代码块设置了事件监听器，第二个代码块就无法使用更新的标签重置监听器，因此我的解决方案是检查每次调用的点击次数而不是添加事件监听器这是我将来访问该问题的人的最新代码

function writeMessage(canvas, message,x,y) {
        var terminal = canvas.getContext('2d');
        ClearCanvas();
        terminal.font = "20px Comic Sans MS";
        terminal.fillStyle = "rgb(0,255,1)";
        terminal.textAlign = "center";
        terminal.fillText(message, x, y);
}
function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

var canvas = document.getElementById("terminalCanvas");
var terminal = canvas.getContext("2d");

terminal.fillStyle = "#000000";
terminal.fillRect(0,0,150,200);

function WriteToCanvas(){
    if(Game.Terminal.HTMLSupport == 1 && Game.Terminal.CSSSupport == 0){ 
        var rand = Math.floor(Math.random() * 122) + 1;
        var tag = htmltags[rand];

        Game.Player.money += Game.Player.clickIncrement;
        Game.Player.exp += Game.Player.clickIncrement;
        Game.Player.clicksTotal += 1;

        $('#terminalCanvas').click(function(evt){
            var mousePos = getMousePos(canvas,evt);
            var message = tag;
            writeMessage(canvas, message,mousePos.x,mousePos.y);
        });
    }else if(Game.Terminal.HTMLSupport == 1 && Game.Terminal.CSSSupport == 1){
        var tagList = htmltags.concat(csstags);
        var tagListLength = tagList.length;
        var rand = Math.floor(Math.random() * tagListLength) + 1;
        var tagg = tagList[rand];

        Game.Player.money += Game.Player.clickIncrement;
        Game.Player.exp += Game.Player.clickIncrement;
        Game.Player.clicksTotal += 1;

        $('#terminalCanvas').click(function(evt){
            var mousePos = getMousePos(canvas,evt);
            var message = tagg;
            writeMessage(canvas, message,mousePos.x,mousePos.y);
        });
    }
}

function ClearCanvas(){
    terminal.clearRect(0,0,canvas.width,canvas.height);
    terminal.fillStyle = "#000000";
    terminal.fillRect(0,0,150,200);
}

WriteToCanvas();

文字在第二次点击时卡住

1 个答案: