i'm trying to develop a game using html , css and js .
(我正在尝试使用html ， css和js开发游戏。)
At the moment I'm focusing on manipulating DOM elements without using the canvas tag .(目前，我专注于在不使用canvas标记的情况下操作DOM元素 。)
My idea is to create a pseudo graphical programming language , similar to the Blockly environment.(我的想法是创建类似于Blockly环境的伪图形编程语言 。)
So far I have inserted 3 clickable elements inside #toolbox that create their copies in #workspace .(到目前为止，我已经插入内#toolbox 3个点击元素，在#workspace创建自己的副本。)
Now, I am trying to assign functions to the elements present in #workspace , which once pressed the Run button are executed in order of appearance, so as to create a queue of commands that is able to move the pink square inside #output_section .
(现在，我正在尝试将功能分配给#workspace中存在的元素，这些元素一旦按Run按钮就会按出现顺序执行，以创建一个能够在#output_section中移动粉红色方块的命令队列。)
Therefore I cannot understand how to write the function that is able to verify the presence of the elements and then be able to perform the different functions assigned to these elements.
(因此，我无法理解如何编写能够验证元素是否存在然后能够执行分配给这些元素的不同功能的函数。)
Any ideas?
(有任何想法吗？)
:D(：D)
I'm using Jquery 3.3.1
(我正在使用Jquery 3.3.1)
function addRed() { var redWorkspace = document.createElement("DIV"); redWorkspace.className = "remove-block block red"; document.getElementById("workspace").appendChild(redWorkspace); }; function addBlue() { var blueWorkspace = document.createElement("DIV"); blueWorkspace.className = "remove-block block blue"; document.getElementById("workspace").appendChild(blueWorkspace); }; function addGreen() { var greenWorkspace = document.createElement("DIV"); greenWorkspace.className = "remove-block block green"; document.getElementById("workspace").appendChild(greenWorkspace); }; $("#clear_workspace").click(function () { $("#workspace").empty(); }); $(document).on("click", ".remove-block", function () { $(this).closest("div").remove(); });
html, body { margin: 0; padding: 0; } #workspace { display: flex; height: 100px; padding: 10px; background: black; } #toolbox { display: flex; padding: 10px; width: 300px; } #output_section { height: 500px; width: 500px; border: solid black; margin: 10px; position: relative; } #moving_square { position: absolute; bottom: 0; right: 0; width: 100px; height: 100px; background: pink; } .block { height: 100px; width: 100px; } .red { background: red; } .blue { background: cyan; } .green { background: green; } .grey { background: #ccc; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <div id="workspace"></div> <div id="workspace-menu"> <button id="run_workspace">Run</button> <button id="clear_workspace">Clear</button> </div> <div id="toolbox" class="grey"> <div onclick="addRed()" class="block red">Left</div> <div onclick="addBlue()" class="block blue">Up</div> <div onclick="addGreen()" class="block green">Right</div> </div> <div id="output_section"> <div id="moving_square"></div> </div> </body> </html>
ask by crabhc translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
