<div class="container" id='wrap'>
  <img id="duck" src="https://bit.ly/2KQJVKc" alt="duck" />
  <div class="scoreContainer">
    <div id="score-text">Score</div>
    <div id="score-counter">0</div>
  </div>
</div>

.container{
  width: 100%;
  height: 100vh;
  background-image: url('https://bit.ly/2Q4q14a');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  overflow: hidden;
  position: relative;
}

/*Set a fixed size for width and height and in an absolute position*/
#duck {
  margin: 50px;
  width: 70px;
  height: 70px;
  position: absolute;
  left: 100px;
  top: 100px;
  cursor: pointer;
  z-index: 2;
}
/*Style for the Score container*/
.scoreContainer {
  background-color: black;
  width: 15%;
  color: #ffffff;
  top: 5%;
  right: 5%;
  border: 2px solid greenyellow;
  border-radius: 10px;
  display: flex;
  position: fixed;
  flex-direction: column;
  align-items: center;
}
#score-text {
  font-size: 1.5em;
}
#score-counter {
  font-size: 3.1em;
  font-weight: bold;
  color: #06e515;
}

//Get the target element
const duck = document.querySelector("#duck"),
      wrap = document.querySelector('#wrap');
let count = 0;

duck.addEventListener("click", () => {
  increaseScore();
  moveDuck();
});

//Increase score by 1
const increaseScore = () => {
  const score = document.querySelector("#score-counter");

  count ++;
  score.textContent = count;
};

//Move the duck randomly 
const moveDuck = () => {
  let wrapWidth = wrap.clientWidth;
  let wrapHeight = wrap.clientHeight;
  
  duck.style.left = Math.floor((Math.random() * wrapWidth - 70)) + "px";
  duck.style.top = Math.floor((Math.random() * wrapHeight - 70)) + "px";
};