Clash Royale CLAN TAG#URR8PPP

Clicking divs in correct order

How can I make it so that when you press the divs in the correct order something happends.

Here's my code so far.
Now something only happends if you click on all of the teal colored divs.

var one = false;
var two = false;
var three = false;
var four = false;
function mm(x)
var y = x.id;
switch (y)
case "one":
one = true;
break;
case "two":
two = true;
break;
case "three":
three = true;
break;
case "four":
four = true;

x.style.background = "aqua";
if (one == true && two == true && three == true && four == true)
alert("WOW");
one = false;
two = false;
three = false;
four = false;
var x = document.getElementsByClassName("dev");
var i;
for (i = 0; i < x.length; i++)
x[i].style.backgroundColor = "teal";




body,
html
height: 100%;
background: #333;

*
margin: 0;
padding: 0;

.dev
background-color: teal;
width: 20%;
height: 100vh;
position: absolute;
top: 0;
cursor: pointer;

.one
left: 1%;

.two
left: 27%;

.three
right: 27%;

.four
right: 1%;


<div onclick="mm(this);" id="one" class="dev one"></div>
<div onclick="mm(this);" id="two" class="dev two"></div>
<div onclick="mm(this);" id="three" class="dev three"></div>
<div onclick="mm(this);" id="four" class="dev four"></div>

No jQuery please.
Thank you.

4 Answers
4

The first thing to come to my mind is keep the order in an array and match it against a data attribute on the divs. The end case will be if the next index is the same as the arrays length.

Here's an example:

let divs = document.querySelectorAll("div");
for (let i = 0; i < divs.length; i++)
divs[i].addEventListener("click", checkOrder);


// the contents match the data-index for the divs
// this means the div with the data-index 2 will be the first in
// the correct order
let orderArray = [2, 3, 0, 1];
let nextIndex = 0;

function checkOrder()
divIndex = parseInt(this.dataset.index);

// if the user did not choose the correct next item then restart
if (divIndex !== orderArray[nextIndex])
console.log("Incorrect- restarting");
resetDivs();
nextIndex = 0;
return;


// user got the right next div. Color the selected div
this.style.backgroundColor = "aqua";

// check end case
if(nextIndex === divs.length - 1)
console.log("congratulations you won, you guessed the order " + orderArray);


// Set the next index in the order the user needs to match
nextIndex++;


function resetDivs()
for (let i = 0; i < divs.length; i++)
divs[i].style.backgroundColor = "teal";



body,
html
height: 100%;
background: #333;


*
margin: 0;
padding: 0;


.dev
background-color: teal;
width: 20%;
height: 100vh;
position: absolute;
top: 0;
cursor: pointer;


.one
left: 1%;


.two
left: 27%;


.three
right: 27%;


.four
right: 1%;


<div data-index="0" class="dev one"></div>
<div data-index="1" class="dev two"></div>
<div data-index="2" class="dev three"></div>
<div data-index="3" class="dev four"></div>

Every time you need so many variables, ex. var one, two, three, four;, consider other data type for example an array. I present you a solution below, which stores correct order in correctOrder array, and actual order in order array. Every time a block is clicked, first item in order array is deleted with Array.prototype.shift and new one is added with Array.prototype.push. This way you always have last 4 clicked blocks' names in order array, so you can compare it to your correctOrder:

var one, two, three, four;

correctOrder

order

order

Array.prototype.shift

Array.prototype.push

order

correctOrder

order.join("") === correctOrder.join("")


Note that straight array comparison wouldn't work here.

It's just a hint in the right direction; code still needs improvement but notice how you can avoid a lot of unnecessary code.

var correctOrder = ["two", "three", "one", "four"];
var order = ["", "", "", ""];
var blocks = document.querySelectorAll(".dev");
blocks.forEach(block => block.addEventListener("click", mm));
function mm()
order.shift();
order.push(this.id);
this.style.background = "aqua";
if (order.join("") === correctOrder.join(""))
alert("WOW");
var x = document.getElementsByClassName("dev");
var i;
for (i = 0; i < x.length; i++)
x[i].style.backgroundColor = "teal";




body,
html
height: 100%;
background: #333;

*
margin: 0;
padding: 0;

.dev
background-color: teal;
width: 20%;
height: 100vh;
position: absolute;
top: 0;
cursor: pointer;

.one
left: 1%;

.two
left: 27%;

.three
right: 27%;

.four
right: 1%;


<div id="one" class="dev one"></div>
<div id="two" class="dev two"></div>
<div id="three" class="dev three"></div>
<div id="four" class="dev four"></div>

Try this:

document.addEventListener('DOMContentLoaded', function()
var columns = document.querySelectorAll('.dev'),
sequence = '1234',
order = ,
reset = function()
order = ;
columns.forEach(function(column)
column.style.backgroundColor = 'teal';
);
;

columns.forEach(function(column)
column.addEventListener('click', function()
var data = this.dataset,
index = order.indexOf(data.index),
bgColor = index > -1 ? 'teal' : 'aqua';

if(index > -1)
order.splice(index, 1);
else
order.push(data.index);


this.style.backgroundColor = bgColor;

if(order.length === sequence.length)
if(order.join('') === sequence)
alert('You guessed the correct order!');
else
alert('Please try again!')


reset();

);
);
);

body,
html
height: 100%;
background: #333;


*
margin: 0;
padding: 0;


.dev
background-color: teal;
cursor: pointer;
height: 100vh;
position: absolute;
top: 0;
width: 20%;


.one
left: 1%;


.two
left: 27%;


.three
right: 27%;


.four
right: 1%;


<div class="dev one" data-index="1"></div>
<div class="dev two" data-index="2"></div>
<div class="dev three" data-index="3"></div>
<div class="dev four" data-index="4"></div>

You can try something like this:

var sequence = , //to store the current pressed sequence
code = ['one', 'two', 'three', 'four']; //the expected sequence for something to happen

//function that given a step, will return true or false if the sequence is correct
function checkStep (item, sequence, code)
sequence.push(item);
if (sequence.length > code.length)
sequence.shift();


return sequence.join() === code.join();



That piece of code alone is to check the sequence alone, an example using the code above: (the expected sequence is ['one', 'two', 'three', 'four'])

['one', 'two', 'three', 'four']

checkStep('three'); //false, current sequence is ['three']
checkStep('one'); //false, current sequence is ['three', 'one']
checkStep('two'); //false, current sequence is ['three', 'one', 'two']
checkStep('three'); //false, current sequence is ['three', 'one', 'two', 'three']
checkStep('four'); //true, current sequence is ['one', 'two', 'three', 'four']


Your js could look like this:

var sequence = , //to store the current pressed sequence
code = ['one', 'two', 'three', 'four']; //the expected sequence for something to happen

//function that given a step, will return true or false if the sequence is correct
function checkStep (item, sequence, code)
sequence.push(item);
if (sequence.length > code.length)
sequence.shift();


return sequence.join() === code.join();


function mm(x)
var y = x.id;

x.style.background = "aqua";
if (checkStep(y, sequence, code))
alert("WOW");
sequence = ; //reset the current sequence
var x = document.getElementsByClassName("dev");
var i;
for (i = 0; i < x.length; i++)
x[i].style.backgroundColor = "teal";




body,
html
height: 100%;
background: #333;


*
margin: 0;
padding: 0;


.dev
background-color: teal;
width: 20%;
height: 100vh;
position: absolute;
top: 0;
cursor: pointer;


.one
left: 1%;


.two
left: 27%;


.three
right: 27%;


.four
right: 1%;


<div onclick="mm(this);" id="one" class="dev one"></div>
<div onclick="mm(this);" id="two" class="dev two"></div>
<div onclick="mm(this);" id="three" class="dev three"></div>
<div onclick="mm(this);" id="four" class="dev four"></div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.