Check if DOM elements are present inside a DIV then run functions assigned to those elements in order

Question

i'm trying to develop a game using html, css and js. At the moment I'm focusing on manipulating DOM elements without using the canvas tag. My idea is to create a pseudo graphical programming language, similar to the Blockly environment. So far I have inserted 3 clickable elements inside #toolbox that create their copies in #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.

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

I'm using 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>

Are you aware that everything there is a "DOM element", including the `
`? — Rob, Nov 28 '19 at 02:47

Mike G · Answer 1 · 2019-11-28T15:46:16.620

2

Completely untested but run button does something along the lines of:

$("#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();
        } 
    });
});

edited Nov 28 '19 at 15:46

answered Nov 28 '19 at 03:38

Mike G

64
5

OPTIMUS PRIME · Accepted Answer · 2019-11-30T03:24:14.317

Commonly, it's a good idea to store all required information in arrays and objects, and use HTML only to display your data.

Also, if you are already using jQuery - use it for all 100%)
Made some improvements:

let mobs = {
  pinky: {
    node: $('#moving_square'),
    coors: { top: 400, left: 400 },
    step: 30,
    moveQueue: [],
    // moveTimeout ???
  },
}; // storing here all created objects, that must move.
/* Each [moveQueue] array will store the chain of moves, like ["up", "up", "left"]

You can take each "key-word" of move, and get required function buy that key,
from the 'move' object */

let move = { // Think about how to simlify this object and functions. It's possible!)
  left: function (obj) {
    let left = obj.coors.left = (obj.coors.left - obj.step);
    obj.node.css('left', left + 'px');
  },
  up: function (obj) {
    let top = obj.coors.top = (obj.coors.top - obj.step);
    obj.node.css('top', top + 'px');
  },
  right: function (obj) {
    let left = obj.coors.left = (obj.coors.left + obj.step);
    obj.node.css('left', left + 'px');
  }
};

let stepTimeout = 1000;
let running = false;
let timeouts = {}; // store all running timeouts here, 
// and clear everything with for( key in obj ) loop, if required

$('#toolbox .block').on('click', function () {
  let color = $(this).attr('data-color');
  let workBlock = '<div class="remove-block block ' + color + '"></div>';
  $('#workspace').append(workBlock);

  mobs.pinky.moveQueue.push( $(this).text().toLowerCase() ); // .attr('data-direction');
  // instead of pinky - any other currently selected object
  
  // $(this).text().toLowerCase() — must be "left", "up", "right"
});

$('#run_workspace').on('click', function () {
  running = true;
  runCode();

  function runCode() {
    for (let obj in mobs) { // mobile objects may be multiple
      // Inside the loop, obj == mobs each key name. Here it's == "pinky"
      
      let i = 0;
      let pinky = mobs[obj];

      localRun();
      
      function localRun() {
        let direction = pinky.moveQueue[i]; // getting direction key by array index.
        
        move[direction](pinky); // calling the required function from storage.

        if (pinky.moveQueue[++i] && running ) {
          // self-calling again, if moveQueue has next element.
          // At the same time increasing i by +1 ( ++i )
          timeouts[obj] = setTimeout(localRun, stepTimeout);
        }
      }
    }
  }

});


$("#clear_workspace").click(function () {
  $("#workspace").empty();
});

$('#workspace').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;
  top: 400px;
  left: 400px;
  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>

<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 data-color="red" class="block red">Left</div>
  <div data-color="blue" class="block blue">Up</div>
  <div data-color="green" class="block green">Right</div>
</div>
<div id="output_section">
  <div id="moving_square"></div>
</div>

But... jQuery was used only for clicks... Translation to JS:

let mobs = {
  pinky: {
    node: document.getElementById('moving_square'),
    coors: { top: 400, left: 400 },
    step: 30,
    moveQueue: [],
  },
};

let move = {
  left: function (obj) {
    let left = obj.coors.left = (obj.coors.left - obj.step);
    obj.node.style.left = left + 'px';
  },
  up: function (obj) {
    let top = obj.coors.top = (obj.coors.top - obj.step);
    obj.node.style.top = top + 'px';
  },
  right: function (obj) {
    let left = obj.coors.left = (obj.coors.left + obj.step);
    obj.node.style.left = left + 'px';
  }
};

let stepTimeout = 1000;
let running = false;
let timeouts = {};

let blocks = document.querySelectorAll('#toolbox .block');
let workSpace = document.getElementById('workspace');

blocks.forEach(function(block){
  block.addEventListener('click', function(){
    let color = this.dataset.color;
    let workBlock = '<div class="remove-block block ' + color + '"></div>';
    
    workSpace.insertAdjacentHTML('beforeend', workBlock);
    
    mobs.pinky.moveQueue.push( this.textContent.toLowerCase() );
  });
});

document.getElementById('run_workspace').addEventListener('click', function () {
  running = true;
  runCode();

  function runCode() {
    for (let obj in mobs) { // mobile objects may be multiple
      // Inside the loop, obj == mobs each key name. Here it's == "pinky"
      
      let i = 0;
      let pinky = mobs[obj];

      localRun();
      
      function localRun() {
        let direction = pinky.moveQueue[i]; // getting direction key by array index.
        
        move[direction](pinky); // calling the required function from storage.

        if (pinky.moveQueue[++i] && running ) {
          // self-calling again, if moveQueue has next element.
          // At the same time increasing i by +1 ( ++i )
          timeouts[obj] = setTimeout(localRun, stepTimeout);
        }
      }
    }
  }

});


document.getElementById("clear_workspace").addEventListener('click', function () {
  workSpace.textContent = "";
});

workSpace.addEventListener('click', function (e) {
  if( e.target.classList.contains('remove-block') ){
    e.target.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;
  top: 400px;
  left: 400px;
  width: 100px;
  height: 100px;
  background: pink;
}

.block {
  height: 100px;
  width: 100px;
}

.red {
  background: red;
}

.blue {
  background: cyan;
}

.green {
  background: green;
}

.grey {
  background: #ccc;
}

<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 data-color="red" class="block red">Left</div>
  <div data-color="blue" class="block blue">Up</div>
  <div data-color="green" class="block green">Right</div>
</div>
<div id="output_section">
  <div id="moving_square"></div>
</div>

This is working but the last function that you translated to JS for removing block does not, it gives an error in the console :/ that's why i used JQuery for that. — crabhc, Nov 29 '19 at 21:43
@crabhc oops, corrected) `includes()` is a method for arrays and strings... Must've used `contains()` for classList. — OPTIMUS PRIME, Nov 30 '19 at 03:25

Check if DOM elements are present inside a DIV then run functions assigned to those elements in order

2 Answers2