How can I make a button, like a target, move in a set div when it is clicked-CodePudding

I am making a basic aim trainer game. I have a gameboard which is just a div with a range and a target icon which is really just a button. I want the button to move inside the range every time it is clicked.

this is my code for the gameboard and target

function targetClicked() {
    score  ;
    document.getElementById("scoreLabel").innerHTML = score;

    moveTarget();
}

function moveTarget() {

}

#gameboard {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;

    width: 500px;
    height: 500px;
    background-color: darkgray;

}

#target {
    width: 75px;
    height: 75px;

    position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 50%);
}

<div id="gameboard">
  <input hidden type="image" src="target.png" id="target" onclick="targetClicked()">
</div>

everything else such as the countdown timer and score counter work. (not shown here) I even got the gameboard and everything to dissapear when the counter reaches 0, but I don't actually know how to move the target everytime it is clicked.

Can I used something like this and inside the moveTarget function adjust the property of the buttons location?

Is there a better way to go about it or can I simply make the button move its position when its clicked?

CodePudding user response：

welcome to StackOverflow. There are a number of ways to accomplish this. You could set the style of your target element on click and use the transform property you're already using above to set the position of the target. For example:

      function getRandomInt(max) {
        return Math.floor(Math.random() * max);
      }

      function targetClicked() {
        const randX = getRandomInt(100);
        const randY = getRandomInt(100);
        document.getElementById("target").style.transform = `translate(${randX}%, ${randY}%)`;
      }

If you'd like to know more you may want to look at all the different ways position can be set via CSS. Hopefully this gets you off the ground though.

CodePudding user response：

Hello justinMonserrat, I hope this will help you to solve the problem, By this you can move the image any where inside the parent element.

function randomAxis(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min   1))   min;
}
const img = document.getElementById("gameboard_target");
const gameboard = document.getElementById("gameboard").getBoundingClientRect();
const img_credentials = img.getBoundingClientRect();
const g_width = gameboard.width-img_credentials.width;
const g_height = gameboard.height-img_credentials.height;
img.onclick = function(){
        const y_axis = randomAxis(0,g_width);
        const x_axis = randomAxis(0,g_height);
        this.style.cssText = `transform:translate(${x_axis}px,${y_axis}px)`
};

#gameboard{
    border:2px solid;
    width:300px;
    height:300px;
    background-color: darkgray;
}
#gameboard img{
    width:30px;
    height:30px;
    border-radius: 50%;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
    cursor:pointer;
}

#gameboard img:active{
    box-shadow: 0px 0px 13px 3px #ecebeb;
}

 <div id="gameboard">
        <img id="gameboard_target" src="https://justinmonserrat.github.io/target-practice/target.png" />
    </div>

CodePudding user response：

The input type was not button, it is a image. You want to move the image?