Problem when clicking an Object in the Javascript reflex game

Asked

Viewed 34 times

0

Boas, I have a problem when I click on the object (e.g., square, or circle), it owed another object at another point between the margins. i have a variable var top and var left that define the size of the margins in the javascript script within the randomShape(){} function for when the object is clicked it generates another object at a different place.

This is the Javascript code.

    var clickedTime, createTime, reactionTime;

function randomShape() {
  var color = ["red", "blue", "green", "yellow"];
  var codColor;

  codColor = Math.random();
  codColor = codColor * 4;
  codColor = Math.floor(codColor);
  document.getElementById("divbox").style.backgroundColor = color[codColor];

  if (Math.random() > 0.5) {
    document.getElementById("divbox").style.borderRadius = "100px";
  } else {
    document.getElementById("divbox").style.borderRadius = "0";
  }

  var top = Math.random();
  top = top * 500;
  var left = Math.random();
  left = left * 800;

  document.getElementById("divbox").style.top = top + "px";
  document.getElementById("divbox").style.left = left + "px";
  document.getElementById("divbox").style.display = "block";
}
javascript

  • It helps a lot if you put the code here and not elsewhere. It helps even more if you read the links above.

  • @Maniero already removed the links and put the code

1 answer

1


Failed to assign the positioning of your element. By default, the positioning of every element is static, which means that it will simply align with the parent element by ignoring the positions set in top, bottom, left and right.

To be able to define the position of your element you need a positioning of the type relative, fixed or absolute. For this case, you could use absolute for example, to position your divbox on a viewport, such as your divgame, that in turn needs to have the positioning relative to be used as a reference.

var clickedTime, createTime, reactionTime;

function randomShape() {
  var color = ["red", "blue", "green", "yellow"];
  var codColor;

  codColor = Math.random();
  codColor = codColor * 4;
  codColor = Math.floor(codColor);
  document.getElementById("divbox").style.backgroundColor = color[codColor];

  if (Math.random() > 0.5) {
    document.getElementById("divbox").style.borderRadius = "100px";
  } else {
    document.getElementById("divbox").style.borderRadius = "0";
  }

  var top = Math.random();
  top = top * 300; //500px - 200px
  var left = Math.random();
  left = left * 600; //800px - 200px

  document.getElementById("divbox").style.top = top + "px";
  document.getElementById("divbox").style.left = left + "px";
  document.getElementById("divbox").style.display = "block";
}

function makeBox() {
   createTime = Date.now();
  setTimeout(showDisplay, 3000);
  randomShape();
  document.getElementById("divbox").style.display = "block";

}

function showDisplay() {
  var time = Math.random();
  time = time * 3000;
  time;
}

document.getElementById("divbox").onclick = function () {
  clickedTime = Date.now();
  reactionTime = (clickedTime - createTime) / 1000;
  if(reactionTime > 0.100){
  document.getElementById("reactionTime").innerHTML = reactionTime + " seconds";
  }else{
    alert("Parabéns! Novo Recorde!");
    document.getElementById("recordTime").innerHTML = reactionTime;
  }
  document.getElementById("divbox").style.display = "none";
  makeBox();
}

makeBox();
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Javascript - Exercício 5</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    #divbox {
        width:200px;
        height:200px;
        background-color:blue;
        display:none;
        position:relative;
    }
    #divgame {
        width:800px;
        height:500px;
        border:2px black solid;
        margin:auto;
        position:absolute;
    }
</style>
</head>
<body>

<h1>Jogo - Tempo de reação</h1>

   <h2>Record: <span id="recordTime"><span></h2>
   <p>Tempo de reação: <span id="reactionTime"><span></p>
   <div id="divgame">
   <div id="divbox"></div>
   </div>

</body>

</html>

  • Thanks @user140828

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.