I wrote something like Captcha test, but with a few levels of difficulty. These levels are controlling by mouse events and not everything are working.
Task is complex, so I decide to divide it into 2 parts.
- Choosing the box (level of the game) Users have a choice of taking the level of the game. After clicking (mouseclick) any box on the screen (for example ‘box 3’), boxes from 1 to 3 should be yellow (active), but ‘box 4’ and ‘box 5’ are not.
Near the boxes I have made a blue colored place where I need to put the ‘alt’ parameter about clicked (chosen) box.
The problem is that AFTER clicking the box, colors (from ‘box 1’ to clicked number, for example I choose ‘box 3’ and ‘box 1’, ‘box 2’, ‘box 3’ are yellow) and single number of chosen box is not “blocked” permanently, but they could be changed freely by moving mouse pointer over the any other box. I need some kind of cooperations (“connections”) between mouse events.
HTML:
<div class="stars">
<div class="game-level">
<input type="image" class="star yellow" id="star1"
src="" width="60" alt="box 1">
<input type="image" class="star" id="star2"
src="" width="60" alt="box 2">
<input type="image" class="star" id="star3"
src="" width="60" alt="box 3">
<input type="image" class="star" id="star4"
src="" width="60" alt="box 4">
<input type="image" class="star" id="star5"
src="" width="60" alt="box 5">
</div>
<div class="level-block">
<span id="level-text">LEVEL NAME</span>
</div>
</div>
CSS:
.stars {
display: flex;
margin: 10px auto;
width: 500px;
}
.captcha {
background-color: white;
height: 100px;
}
.game-level {
display: flex;
width: 300px;
height: 100%;
}
.yellow {
background-color: yellow;
}
input[type='image'] {
width: 60px;
height: 60px;
border: thin solid black;
}
.level-block {
display: flex;
width: 200px;
margin-left: 10px;
justify-content: center;
align-items: center;
border: 1px solid hsl(217, 86%, 50%);
border-radius: 25px;
background-color: hsl(212, 29%, 80%);
}
.level-block > span {
font-size: 18px;
}
Javascript:
window.addEventListener('DOMContentLoaded', changeStars, false);
/* Change level of the game depending on user choice */
function changeStars() {
let defaultIndex = 0; //default level, first box is always yellow
var star = document.querySelectorAll('.game-level')[defaultIndex];
let currentElement = undefined;
/* Get index of element from NodeList */
function findIndex() {
let child = document.getElementById(`${currentElement}`);
let parent = child.parentNode;
let starNumber = Array.prototype.indexOf.call(parent.children, child);
return starNumber;
}
let getStars = document.querySelectorAll('.star');
let levelText = document.querySelector('#level-text');
function starEvents(e) {
currentElement = e.target.id;
let starIndex = findIndex(currentElement);
levelText.textContent = document.querySelector(`#${currentElement}`).alt;
return starIndex;
}
let numberClicked = 0;
function starClicked(eventType) {
let numberClicked = starEvents(eventType);
for (let i = 0; i <= numberClicked; i++) {
getStars[i].classList.add('yellow');
}
};
star.addEventListener('mouseover', function(e) {
let starNumber = starEvents(e);
for (let i = 0; i <= starNumber; i++) {
document.querySelector(`#star${i+1}`).style.backgroundColor = 'yellow';
}
});
star.addEventListener('mouseout', function(e) {
let starNumber = starEvents(e);
for (let i = 1; i <= starNumber; i++) {
document.querySelector(`#star${i+1}`).style.backgroundColor = 'white';
}
});
star.addEventListener('click', starClicked, {once: true});
}
Please let me know if something is misunderstood.
Thanks for every advice in my subject!