"Resetting the counter and adjusting the position on the screen: a step

Question

"Resetting the counter and adjusting the position on the screen: a step

Currently, I am in the middle of a tutorial series and working on a project to develop a reaction tester. Despite conducting thorough research online, I am struggling with resolving two specific issues and could really use some assistance.

When the game starts and the shape is clicked, it should display the time until the click event occurs while generating a random shape with unique attributes like color, size, and position.

My main objective is to reset the counter every time the shape is clicked and ensure that the shape remains within the boundaries of the window at all times.

However, the current setup continues to increment the counter without resetting it after each click, resulting in scenarios where the generated shape extends beyond the visible window area, requiring users to scroll to locate it.

I have attempted different approaches such as changing

var timeUntilClick = +new Date() - currentTime;

to var timeUntilClick = "";, but unfortunately, no success has been achieved so far.

If you would like to take a closer look at my code, please visit this JSFiddle link.

javascript

Answer 1

Answer №1

Your currentTime variable is set when you click on "start". Each time a new shape is created, you subtract the initial value of currentTime from the current time, causing the counter to increase. To fix this issue, make sure to reset the currentTime variable each time a new shape is created. Check out this modified version in this JSFiddle link.

Answer 2

Your currentTime variable is set when you click on "start". Each time a new shape is created, you subtract the initial value of currentTime from the current time, causing the counter to increase. To fix this issue, make sure to reset the currentTime variable each time a new shape is created. Check out this modified version in this JSFiddle link.

Answer 3

Answer №2

Remember to adjust your currentTime value with each click.

currentTime += timeUntilClick;

To determine the position of your shape, one simple approach is to divide the available height and width evenly.

var w = window.innerWidth/2;
var h = window.innerHeight/2;

Check out the updated Fiddle here

Answer 4

Remember to adjust your currentTime value with each click.

currentTime += timeUntilClick;

To determine the position of your shape, one simple approach is to divide the available height and width evenly.

var w = window.innerWidth/2;
var h = window.innerHeight/2;

Check out the updated Fiddle here

Answer 5

Answer №3

Give this a shot.... demonstration

document.getElementById("startGame").onclick = function() {

  var currentTime = +new Date();

  document.getElementById("shape").onclick = function() {

    function randomIntFromInterval(min, max) {
      return Math.floor(Math.random() * (3500 - 500 + 1) + 500);
    }

    function insideContainer(position, dimension, max) {
      if (position + dimension >= max) {
        return max - dimension;
      }
      return position;
    }

    function generateRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    var randomColor = generateRandomColor();
    var randomShape = Math.round(Math.random());

    if (randomShape < 0.5) {
      randomShape = "50%";
    } else {
      randomShape = "10%";
    }

    var w = window.innerWidth;
    var h = window.innerHeight;

    var randomLeft = Math.floor(Math.random() * w);
    var randomTop = Math.floor(Math.random() * h);
    var randomWidth = Math.floor(Math.random() * (w / 2));
    var randomHeight = Math.floor(Math.random() * (h / 2));

    var elem = document.getElementById("shape").style;
    elem.backgroundColor = randomColor;
    elem.left = insideContainer(randomLeft, randomWidth, w) + "px";
    elem.top = insideContainer(randomTop, randomHeight, h) + "px";
    elem.borderRadius = randomShape;
    elem.width = randomWidth + "px";
    elem.height = randomHeight + "px";

    document.getElementById("shape").setAttribute("class", "hide");

    var timeUntilClick = +new Date() - currentTime;

    if (timeUntilClick > 999) {
      var timeUntilClick = timeUntilClick / 1000 + " seconds";
    } else {
      var timeUntilClick = timeUntilClick + " milliseconds";
    }

    document.getElementById("printTime").innerHTML = timeUntilClick;

    var randomDelay = randomIntFromInterval();

    setTimeout(delay, randomIntFromInterval());

    function delay() {
      document.getElementById("shape").removeAttribute("class", "hide");
      currentTime = +new Date();
    }

  }

}

Answer 6

Give this a shot.... demonstration

document.getElementById("startGame").onclick = function() {

  var currentTime = +new Date();

  document.getElementById("shape").onclick = function() {

    function randomIntFromInterval(min, max) {
      return Math.floor(Math.random() * (3500 - 500 + 1) + 500);
    }

    function insideContainer(position, dimension, max) {
      if (position + dimension >= max) {
        return max - dimension;
      }
      return position;
    }

    function generateRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    var randomColor = generateRandomColor();
    var randomShape = Math.round(Math.random());

    if (randomShape < 0.5) {
      randomShape = "50%";
    } else {
      randomShape = "10%";
    }

    var w = window.innerWidth;
    var h = window.innerHeight;

    var randomLeft = Math.floor(Math.random() * w);
    var randomTop = Math.floor(Math.random() * h);
    var randomWidth = Math.floor(Math.random() * (w / 2));
    var randomHeight = Math.floor(Math.random() * (h / 2));

    var elem = document.getElementById("shape").style;
    elem.backgroundColor = randomColor;
    elem.left = insideContainer(randomLeft, randomWidth, w) + "px";
    elem.top = insideContainer(randomTop, randomHeight, h) + "px";
    elem.borderRadius = randomShape;
    elem.width = randomWidth + "px";
    elem.height = randomHeight + "px";

    document.getElementById("shape").setAttribute("class", "hide");

    var timeUntilClick = +new Date() - currentTime;

    if (timeUntilClick > 999) {
      var timeUntilClick = timeUntilClick / 1000 + " seconds";
    } else {
      var timeUntilClick = timeUntilClick + " milliseconds";
    }

    document.getElementById("printTime").innerHTML = timeUntilClick;

    var randomDelay = randomIntFromInterval();

    setTimeout(delay, randomIntFromInterval());

    function delay() {
      document.getElementById("shape").removeAttribute("class", "hide");
      currentTime = +new Date();
    }

  }

}

"Resetting the counter and adjusting the position on the screen: a step

Answer №1

Answer №2

Answer №3

Similar questions

Using javascript, how can you fill in the missing dates within an array of objects?

When utilizing Multer for file uploads, it logged an array that was mysteriously empty

Introducing the feature of adding an Opacity Slider specifically designed for the chosen object

Resizing a d3 graph for various screen resolutions

how to choose the :after pseudo-element with jQuery

JavaScript Selenium code encountering an "Element not interactable" error with input textbox element

There are no markers or popups currently displayed on the map

Proper method for incorporating client-side libraries (such as adminLTE) into Vue.js 2.0

Develop an ASCX component to handle various tasks

Tips for creating a blur effect on all options except for the selected 2 out of 4 using jQuery

Permit the use of HTML tags within an Angular controller or view

How can I utilize JavaScript to call a Delphi function in TWebBrowser on Delphi XE6 for all platforms, such as iOS and Android?

Transform the snake code by incorporating a visual image as the face of the serpent

There is a necessary pause needed between carrying out two statements

Ways to adjust the text size in jqGrid?

Using TypeORM in Javascript to create routes efficiently

What is the best way to transmit the server response information from a fetch API to the client?

Error in overwritePermissions caused by a bug

Since switching to PHP 5.5 from version 3.x, I have noticed that it is attempting to interpret my JavaScript comment within a script tag in a PHP include file

Setting the variable to global does not apply styling to the element