Javascript 检查DIV中是否存在DOM元素，然后按顺序运行分配给这些元素的函数

我正在尝试使用html、css和js开发一款游戏。目前，我的重点是在不使用画布标记的情况下操作DOM元素。我的想法是创建一种伪图形编程语言，类似于块环境。到目前为止，我已经在#工具箱中插入了3个可单击的元素，它们在#工作区中创建副本

现在，我正在尝试将函数分配给#workspace中的元素，一旦按下运行按钮，这些元素将按外观顺序执行，以便创建一个命令队列，能够在#output_部分内移动粉色方块

因此，我无法理解如何编写能够验证元素的存在，然后能够执行分配给这些元素的不同功能的函数

有什么想法吗D

我正在使用Jquery 3.3.1

函数addRed（）{
var redWorkspace=document.createElement（“DIV”）；
redWorkspace.className=“删除块红色”；
document.getElementById（“工作区”）.appendChild（redWorkspace）；
};
函数addBlue（）{
var blueWorkspace=document.createElement（“DIV”）；
blueWorkspace.className=“删除块蓝色”；
document.getElementById（“工作区”）.appendChild（blueWorkspace）；
};
函数addGreen（）{
var greenWorkspace=document.createElement（“DIV”）；
greenWorkspace.className=“删除块绿色”；
document.getElementById（“工作区”）.appendChild（绿色工作区）；
};
$（“#清除工作区”）。单击（函数（）{
$（“#工作区”）.empty（）；
});
$（文档）。在（“单击”、“.remove block”上，函数（）{
$（this）.closest（“div”）.remove（）；
});
html，
身体{
保证金：0；
填充：0；
}
#工作空间{
显示器：flex；
高度：100px；
填充：10px；
背景：黑色；
}
#工具箱{
显示器：flex；
填充：10px；
宽度：300px；
}
#输出单元{
高度：500px；
宽度：500px；
边框：纯黑；
利润率：10px；
位置：相对位置；
}
#搬家广场{
位置：绝对位置；
底部：0；
右：0；
宽度：100px；
高度：100px；
背景：粉红色；
}
.街区{
高度：100px；
宽度：100px；
}
瑞德先生{
背景：红色；
}
蓝先生{
背景：青色；
}
格林先生{
背景：绿色；
}
格雷先生{
背景：#ccc；
}

跑
清楚的
左边
向上的
赖特
完全未经测试，但“运行”按钮执行以下操作：

$("#run_workspace").click(function() {
    $("#workspace .block").each(function(elem) {
        if (elem.hasClass("red")) {
            moveObjectLeft();
        }  else if (elem.hasClass("green")) {
            moveObjectRight();
        }  else if (elem.hasClass("blue")) {
            moveObjectUp();
        } 
    });
});

完全未经测试，但“运行”按钮执行以下操作：

$("#run_workspace").click(function() {
    $("#workspace .block").each(function(elem) {
        if (elem.hasClass("red")) {
            moveObjectLeft();
        }  else if (elem.hasClass("green")) {
            moveObjectRight();
        }  else if (elem.hasClass("blue")) {
            moveObjectUp();
        } 
    });
});

通常，最好将所有必需的信息存储在数组和对象中，并仅使用HTML显示数据

另外，如果您已经在使用jQuery，请100%使用它

作出了一些改进：


let mobs={
小指：{
节点：$（“#移动方”），
库尔斯：{上：400，左：400}，
步骤：30，
移动队列：[]，
//移动超时？？？
},
}; // 在此处存储所有必须移动的已创建对象。
/*每个[moveQueue]数组将存储移动链，如[“向上”、“向上”、“向左”]
你可以获取每个移动的“关键字”，并获得所需的功能购买该关键字，
从“移动”对象*/
让我们移动={//想想如何简化这个对象和函数。这是可能的！）
左：功能（obj）{
设left=obj.coors.left=（obj.coors.left-obj.step）；
css（'left'，left+'px'）；
},
up：功能（obj）{
让top=obj.coors.top=（obj.coors.top-obj.step）；
css（'top'，top+'px'）；
},
右：功能（obj）{
设left=obj.coors.left=（obj.coors.left+obj.step）；
css（'left'，left+'px'）；
}
};
设stepTimeout=1000；
让跑步=假；
let超时={}；//将所有运行超时存储在此处，
//如果需要，使用for（输入obj）循环清除所有内容
$（'#toolbox.block'）。在（'click'，函数（）{
让color=$（this.attr（'data-color'）；
让工作块=“”；
$（“#工作区”）.append（工作块）；
mobs.pinky.moveQueue.push（$（this.text（）.toLowerCase（））；//.attr（'data-direction'）；
//而不是pinky-任何其他当前选定的对象
//$（this）.text（）.toLowerCase（）-必须为“左”、“上”、“右”
});
$（'run#u workspace'）。在（'click'，函数（）{
运行=真；
运行代码（）；
函数runCode（）{
对于（让obj在mobs中）{//移动对象可以是多个
//在循环中，obj==移动每个键名。这里是==“pinky”
设i=0；
让pinky=暴徒[obj]；
localRun（）；
函数localRun（）{
让direction=pinky.moveQueue[i]；//通过数组索引获取方向键。
move[direction]（pinky）；//从存储器调用所需的函数。
if（pinky.moveQueue[++i]&&running）{
//如果moveQueue有下一个元素，则再次自调用。
//同时将i增加+1（++i）
超时[obj]=设置超时（localRun，stepTimeout）；
}
}
}
}
});
$（“#清除工作区”）。单击（函数（）{
$（“#工作区”）.empty（）；
});
$（“#工作区”）。在（“单击”，“删除块”，函数（）{
$（this）.closest（“div”）.remove（）；
});
html，
身体{
保证金：0；
填充：0；
}
#工作空间{
显示器：flex；
高度：100px；
填充：10px；
背景：黑色；
}
#工具箱{
显示器：flex；
填充：10px；
宽度：300px；
}
#输出单元{
高度：500px；
宽度：500px；
边框：纯黑；
利润率：10px；
位置：相对位置；
}
#搬家广场{
位置：绝对位置；
顶部：400px；
左：400px；
宽度：100px；
高度：100px；
背景：粉红色；
}
.街区{
高度：100px；
宽度：100px；
}
瑞德先生{
背景：红色；
}
蓝先生{
背景：青色；
}