<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";
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.