Thursday, 7 September 2017

FLASH CODE CHANGE INTO JAVASCRIPT

FLASH CODE CHANGE INTO JAVASCRIPT

-------------------------------------------------------------------------------------------------------------------
AS3 CODE
http://flashcollege.blogspot.co.uk/2016/03/trace-array-in-text-box-as2-as3.html
BUTTON MATCHING GAME JAVA SCRIPT
https://www.w3schools.com/code/tryit.asp?filename=FXF9J5UA8QPS
-------------------------------------------------------------------------------------------------------------------
var btnArray:Array = new Array(btn1,btn2);
var textArray:Array = ["TEXT1","TEXT2"];
for(var i:uint = 0; i < textArray.length; i++) {
btnArray[i].addEventListener(MouseEvent.CLICK, expandInfo);
}
function expandInfo(e:MouseEvent):void {
trace(textArray[btnArray.indexOf(e.target)]);
}
-------------------------------------------------------------------------------------------------------------------
AS3 CODE CHANGE INTO JAVASCRIPT
var btnArray = new Array(btn1,btn2);
var textArray = new Array("TEXT1","TEXT2");
OR USE THIS WAY
var btnArray = [btn1,btn2];
var textArray = ["TEXT1","TEXT2"];
-------------------------------------------------------------------------------------------------------------------
DON'T USE MOUSE EVENT IN JAVASCRIPT
btnArray[i].addEventListener(MouseEvent.CLICK, expandInfo);
IN JAVA SRIPT CODE DELETE MouseEvent.CLICK WORD:
btnArray[i].addEventListener("click",expandInfo);
btnArray[i].addEventListener("click",expandInfo,true);
var btnArray:Array = new Array(btn1,btn2);
var textArray:Array = ["TEXT1","TEXT2"];
IN JAVA SRIPT CODE DELETE ARRAY WORD:
USE SAME KIND OF BRACKETS IN ARRAY
OR USE THESE LINES FOR ARRAYS WITH SMALL BRACKETS
var btnArray = new Array(btn1,btn2);
var textArray = new Array("TEXT1","TEXT2");
OR USE THESE LINES FOR ARRAYS WITH BIG BRACKETS
var btnArray = [btn1,btn2];
var textArray = ["TEXT1","TEXT2"];
OR USE THESE LINES FOR ARRAYS WITH DIFFRENT BRACKETS
var btnArray = new Array(btn1,btn2);
var textArray = ["TEXT1","TEXT2"];
Array.length EQUAL TO = HOW MANY ITEMS IN ARRAY? 
HERE EACH ARRAY HAS TWO ITEMS
IN JAVA SRIPT CODE DON'T USE I EQUAL TO  NUMBER OR UNIT LIKE
for(var i:uint = 0; i < textArray.length; i++) {
USE THIS IN JAVASCRIPT
OR USE THIS CODE
for (var i = 0; i < textArray.length; i++){
OR USE THIS CODE
for (var i = 0; i < btnArray.length; i++){
OR USE THIS CODE
for (var i = 0; i < 2; i++){
-------------------------------------------------------------------------------------------------------------------
<!-- http://flashcollege.blogspot.co.uk/2016/03/trace-array-in-text-box-as2-as3.html -->
<div id="TextBox1"></div>
<button id="btn1">#1</button>
<button id="btn2">#2</button>
<script type='text/javascript'>
var btnArray = new Array(btn1,btn2);
var textArray = ["TEXT1","TEXT2"];
for (var i = 0; i < textArray.length; i++){
btnArray[i].addEventListener("click",expandInfo,true);
function expandInfo(e){
alert(textArray[btnArray.indexOf(e.target)]);
TextBox1.innerHTML = textArray[btnArray.indexOf(e.target)];
}
}
</script>
------------------------------------------------------------------------
<div id="TextBox1"></div>
<button id="btn1">#1</button>
<button id="btn2">#2</button>
<script type='text/javascript'>
var btnArray=[btn1,btn2];
var textArray=["TEXT1","TEXT2"];
for (var i = 0; i < textArray.length; i++){
btnArray[i].addEventListener("click",expandInfo,true);
function expandInfo(event){
TextBox1.innerHTML = textArray[btnArray.indexOf(event.target)];
}
}
</script>
------------------------------------------------------------------------
HOW TWO INDEX VALUE EQUAL
indexNum2 = Math.floor(bCards.indexOf(e.target)/2);
event.target Means Per Index Value
------------------------------------------------------------------------
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
<script>
var bCards=[btn1,btn2,btn3,btn4];
var indexNum2;
for(var i = 0; i < bCards.length; i++){
bCards[i].addEventListener("click",openCard,true);
}
function openCard(event){
indexNum2 = Math.floor(bCards.indexOf(event.target)/2);
console.log(indexNum2);
}
</script>
------------------------------------------------------------------------
AS3 TO AS2 ARRAY
------------------------------------------------------------------------
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
<div id="TextBox1"></div>
<script>
var bCards=[btn1,btn2,btn3,btn4];
var indexNum2;
for(var i = 0; i < bCards.length; i++){
bCards[i].onclick=function(){
indexNum2 = Math.floor(bCards.indexOf(event.target)/2);
TextBox1.innerHTML = indexNum2;
}
}
</script>
----------------------------------------------------------------------
AS2 ARRAY STYLE AND INNER TEXT
alert(bCards.indexOf(event.target));//TELLS ARRAY INDEX NUMBER
alert(this.id); //TELLS BUTTON ID
----------------------------------------------------------------------
<button id="btn1">A</button>
<button id="btn2">a</button>
<script>
var bCards=[btn1,btn2];
for(var i=0;i<bCards.length;i++){
bCards[i].onclick=function(){
alert(this.innerText);
}
}
</script>
-----------------------------------------------------------------------
CSS COLOR USE IN JAVASCRIPT LIKE MATCHING GAME
-----------------------------------------------------------------------
<style>
button{
width:100px;
height:100px;
background-color: black;
}
</style>
<button id="Btn1">BUTTON1</button>
<button id="Btn2">BUTTON2</button>
<div id="TextBox1"></div>
<script>
var bCards=[Btn1,Btn2];
for(var i=0;i<bCards.length;i++){
bCards[i].addEventListener("click",openCard,true);
}
function openCard(event){
TextBox1.innerHTML=event.target.id
event.target.style.color="Blue";
event.target.style.backgroundColor="Gold";
}
</script>
------------------------------------------------------------------------
BUTTON STRING ARRAY IN JAVASCRIPT
------------------------------------------------------------------------
<!-- https://fbgadgets.blogspot.com/2017/08/remove-matching-id-in-javascript.html -->
<div id="TextBox1">
<button id="Btn1">BUTTON1</button>
<button id="Btn2">BUTTON2</button>
</div>
<script>
var bCards = ["Btn1","Btn2"];
for(var i = 0; i < bCards.length; i++){
TextBox1.addEventListener("click",openCard,true);      
}
function openCard(event){
if (event.target.tagName.toLowerCase() == "button") {
TextBox1.innerHTML+=event.target.id
}
}
</script>
------------------------------------------------------------------------
BUTTON MOVIE CLIP HIDDEN BY BUTTON IN JAVASCRIPT
------------------------------------------------------------------------
<button id="btn1">BUTTON1</button>
<button id="btn2">BUTTON2</button>
<button id="TEXT1">MovieClip1</button>
<button id="TEXT2">MovieClip2</button>
<script type='text/javascript'>
var btnArray = new Array(btn1,btn2);
var textArray =new Array(TEXT1,TEXT2);
for (var i = 0; i <  textArray.length; i++){
btnArray[i].addEventListener("click",expandInfo,true);
function expandInfo(e){
textArray[btnArray.indexOf(e.target)].style.visibility = "hidden";
}
}
</script>
---------------------------------------------------------------------------
SELECTOR FUNCTION CHANGE INTO BUTTON ARRAY
SELECTOR FUNCTION MORE FLEXIBLE BECAUSE WE CAN USE SAME BUTTON ID
BUTTON FUNCTION LESS FLEXIBLE BECAUSE WE CAN'T USE SAME BUTTON ID
WHEN WE USE BUTTON SELECTOR CODE WE DON'T USE BUTTON ARRAY
---------------------------------------------------------------------------
<input id="TextBox1">
<button id="Btn1">#1</button>
<button id="Btn1">#2</button>
<script>
for(var i = 0;i <document.querySelectorAll("button").length; i++) {
document.querySelectorAll("button")[i].addEventListener("click",expandInfo,true);
function expandInfo(){
TextBox1.value +=this.id;
}
}
</script>
𝕆ℝ 𝕌𝕊𝔼 𝕋ℍ𝕀𝕊 ℂ𝕆𝔻𝔼 
<input id="TextBox1">
<button id="Btn1">#1</button>
<button id="Btn1">#2</button>
<script>
for(var i = 0; i <document.getElementsByTagName("button").length; i++) {
document.getElementsByTagName("button")[i].addEventListener("click",expandInfo,true);
function expandInfo(){
TextBox1.value +=this.id;
}
}
</script>
🎃𝕆ℝ 𝕌𝕊𝔼 𝕋ℍ𝕀𝕊 ℂ𝕆𝔻𝔼 𝔽𝕆ℝ 𝕊𝔸𝕄𝔼 ℝ𝔼𝕊𝕌𝕃𝕋 𝕎𝕀𝕋ℍ ℕ𝔼𝕎 ℍ𝕀𝔾ℍ𝕃𝕀𝔾ℍ𝕋 𝕃𝕀ℕ𝔼𝕊 🍧
<input id="TextBox1">
<button id="Btn1">#1</button>
<button id="Btn1">#2</button>
<script>
var button = document.getElementsByTagName("button");
for(var i = 0; i <button.length; i++) {
button[i].addEventListener("click",expandInfo,true);
function expandInfo(){
TextBox1.value +=this.id;
}
}
</script>
🎃𝕆ℝ 𝕌𝕊𝔼 𝕋ℍ𝕀𝕊 ℂ𝕆𝔻𝔼 𝔽𝕆ℝ 𝕊𝔸𝕄𝔼 ℝ𝔼𝕊𝕌𝕃𝕋 𝕎𝕀𝕋ℍ ℕ𝔼𝕎 ℍ𝕀𝔾ℍ𝕃𝕀𝔾ℍ𝕋 𝕃𝕀ℕ𝔼𝕊 🍧
<input id="TextBox1">
<button id="Btn1">#1</button>
<button id="Btn1">#2</button>
<script>
var button = document.querySelectorAll("button");
for(var i = 0; i <button.length; i++) {
button[i].addEventListener("click",expandInfo,true);
function expandInfo(){
TextBox1.value +=this.id;
}
}
</script>

---------------------------------------------------------------------------
BUTTON FUNCTION LESS FLEXIBLE BECAUSE WE CAN'T USE SAME BUTTON ID
OR USE THIS CODE UNDER FOR LOOP
button[i].onclick=function(){
TextBox1.value +=this.id;
}
---------------------------------------------------------------------------
 🚀OR USE  BELOW CODE BUTTON LISTENER TO BUTTON SELECTOR CODE
for(var i = 0;i <document.querySelectorAll("button").length; i++) {
document.querySelectorAll("button")[i].addEventListener("click",expandInfo,true);
function expandInfo(){
OR USE BELOW CODE
for(var i = 0; i <button.length; i++) {
button[i].addEventListener("click",expandInfo,true);
function expandInfo(){
---------------------------------------------------------------------------
<input id="TextBox1">
<button id="Btn1">#1</button>
<button id="Btn2">#2</button>
<script>
var button=[Btn1,Btn2];
for(var i = 0; i <button.length; i++) {
button[i].addEventListener("click",expandInfo,true);
function expandInfo(){
TextBox1.value +=this.id;
}
}
</script>
---------------------------------------------------------------------------
<!--http://fbgadgets.blogspot.co.uk/2017/08/get-button-id-after-click-in-java-script.html-->
<div id="TextBox1"></div>
<button id="test1">btn1</button>
<button id="test2">btn2</button>
<script type='text/javascript'>
//<![CDATA[
var btnArray = document.getElementsByTagName("button");
for (var i = 0; i < btnArray.length; i++) {
btnArray[i].addEventListener("click", function() {
TextBox1.innerHTML = this.id ;
});
}
//]]>
<!--http://fbgadgets.blogspot.co.uk/2017/08/get-button-id-after-click-in-java-script.html-->
<div id="TextBox1"></div>
<button id="Btn1">#1</button>
<button id="Btn2">#2</button>
<script type='text/javascript'>
//<![CDATA[
var btnArray = document.querySelectorAll("button");
for (var i = 0; i < btnArray.length; i++){
btnArray[i].addEventListener("click", function() {
TextBox1.innerHTML = this.id ;//this.id mean Btn1 and Btn2
});
}
//]]>
</script>
--------------------------------------------------------------------------------------------------------------
WHAT IS  EXCLAMATION MARK ❕ UNDEFINED OR NULL VARIABLE  
!firstClickedTile OR firstClickedTile == undefined
OR firstClickedTile == null
WHAT IS NOT EQUAL OPERATOE IN JAVA SCRIPT 
WHEN firstClickedTile NOT EQUAL TO null
else if (firstClickedTile !== null){
Not equal is an comparison operator which is used to check the value of two operands are equal or not. If the value of two operands are not equal it returns true. The symbolic representation of Not equal operator in JavaScript is != .
--------------------------------------------------------------------------
SIMPLE MATCHING GAME JAVASCRIPT
https://fbgadgets.blogspot.com/2020/05/simple-match-game-java-script.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality
YOU CAN WRITE BELOW LINE IN THESE WAYS
function MatchingFunction(event){ 
if (firstClickedTile == undefined){
firstClickedTile = event.target;
}
OR
if (firstClickedTile == null){
firstClickedTile = event.target;
}
ALSO CHANGE THIS LINE 
else if (firstClickedTile!== event.target){
OR
else if (firstClickedTile!==secondClickedTile) {

OR
else if
(firstClickedTile!== true){

OR
else if (firstClickedTile !== undefined){
OR
else if (firstClickedTile !== null){

 BUTTON ID ARRAY  CAN  BE ADD IN  BELOW CODE

<div id="TextBox1">
<button id="0">A</button>
<button id="0">APPLE</button>
<button id="1">B</button>
<button id="1">BALL</button>
</div>

var button = ["0","0","1","1"];

OR USE THIS CODE

var bCards = ["0","0","1","1"];

for(var i = 0; i < bCards.length; i++){
TextBox1.addEventListener("click",MatchingFunction,true);      
}

---------------------------------------------------------------------------------
<html> <!-- https://codereview.stackexchange.com/questions/172417/simple-memory-game-in-javascript --> <head> <title>Memory Game</title> <style> div#TextBox1 { background-color: coral; color: blueviolet; text-align: center; font:20px bold; display: block; } .matched { background:Green; } </style> </head> <body> <div id="TextBox1"></div> <button id="0">A</button> <button id="0">APPLE</button> <button id="1">B</button> <button id="1">BALL</button> <script> var firstClickedTile; var secondClickedTile; for (var i = 0; i < document.querySelectorAll("button").length; i++) { document.querySelectorAll("button")[i].addEventListener('click', MatchingFunction,true); } function MatchingFunction(event) { if (!firstClickedTile){ firstClickedTile = event.target; } else if (firstClickedTile!== event.target) { secondClickedTile = event.target; TextBox1.innerHTML = "TryAgain"; if (firstClickedTile.id == secondClickedTile.id) { firstClickedTile.classList.add("matched"); secondClickedTile.classList.add("matched"); TextBox1.innerHTML = "Good Job"; }

console.log(event.target.id); //CONSOLE ID
function setTimeout(){ firstClickedTile = undefined; } setTimeout(400); } } </script> </body> </html>

------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
USE document.querySelectorAll AS A ARRAY LISTENER
HOW TO USE SAME ID BUTTON AND TRACE
btnArray CHANGE INTO document.querySelectorAll
WE CAN ALSO CHANGE document.querySelectorAll INTO
document.getElementsByTagName
---------------------------------------------------------------------------------------------------------------
<input id="TextBox1">
<button value="1" id="Btn1">#1</button>
<button value="2" id="Btn1">#2</button>
<script>
for(var i = 0;i <document.querySelectorAll("button").length; i++) {
document.querySelectorAll("button")[i].addEventListener("click",expandInfo,true);
function expandInfo(){
TextBox1.value +=this.id;
//TextBox1.value +=this.value;
//TextBox1.value +=this.innerHTML;
}
}

</script>
-------------------------------------------------------------------------------------------------------------------
TRACE BUTTON ID NAME VALUE INDEX IN JAVASCRIPT
OR REPLACE LINE
btnArray[i].addEventListener("click",Fn1,true);

function Fn1(){
OR USE THIS LINE
btnArray[i].onclick=function(){
-------------------------------------------------------------------------------------------------------------------
<div id="TextBox1"></div>
<button id="Btn1" name="ButtonName1" value="1">#1</button>
<button id="Btn2" name="ButtonName2" value="2">#2</button>
<script type='text/javascript'>
//<![CDATA[
var btnArray=[Btn1,Btn2]
for (var i =0;i<btnArray.length; i++){
btnArray[i].addEventListener("click", function() {
TextBox1.innerHTML=
"ButtonId="+this.id
+"</br></br>"
+"ButtonName="+this.name
+"</br></br>"
+"ButtonValue="+this.value
+"</br></br>"
+"ButtonIndex="+btnArray.indexOf(this);
});
}
//]]>

</script>
--------------------------------------------------------------------------------------------------------------
INPUT BOX 
//BUTTON ARRAY STYLE
btnArray[i].addEventListener("click",expandInfo,true);
function expandInfo(e){
}
--------------------------------------------------------------------------------------
btnArray[i].addEventListener("click", function(){
});
------------------------------------------------------------------------------------------
btnArray[i].addEventListener("click", function(expandInfo){
});
-----------------------------------------------------------------------------------------------
SELECTOR LINE CAN BE WRITE BOTH WAY WITH ID SIGN OR 
WITHOUT ID SIGN
var btnArray = document.querySelectorAll("#Button");
var btnArray = document.querySelectorAll("Button");
-------------------------------------------------------------------------------------------------------------
OR USE THIS LINE
var textArray = document.querySelectorAll("#TextBox1");
---------------------------------------------------------------------------------------------------------------
<!-- http://fbgadgets.blogspot.co.uk/2018/04/simple-html-calculator.html -->
<input id="TextBox1">
<button value="1" id="Button">#1</button>
<button value="2" id="Button">#2</button>
<script>
var btnArray = document.querySelectorAll("#Button");
var textArray = document.getElementById("#TextBox1");
for(var i = 0; i <btnArray.length; i++) {
btnArray[i].addEventListener("click",expandInfo,true);
function expandInfo(e){
TextBox1.value +=this.value;
};
}
</script>
-----------------------------------------------------------------------------------------------------
</script>
<input id="TextBox1">
<button value="1" id="Btn1">#1</button>
<button value="2" id="Btn2">#2</button>
<script>
var btnArray = document.querySelectorAll("button");//var btnArray=[Btn1,Btn2];
for(var i = 0; i <btnArray.length; i++) {
btnArray[i].addEventListener("click",expandInfo,true);
function expandInfo(e){
TextBox1.value +=this.value;//TextBox1.value +=this.innerHTML;
}
}
</script>
-------------------------------------------------------------------------------------------
<!-- http://fbgadgets.blogspot.co.uk/2018/04/simple-html-calculator.html -->
<input id="TextBox1">
<button value="1" id="Button">#1</button>
<button value="2" id="Button">#2</button>
<script>
var btnArray = document.querySelectorAll("#Button");
var textArray = document.querySelectorAll("#TextBox1");
for(var i = 0; i <btnArray.length; i++) {
btnArray[i].addEventListener("click",function(expandInfo){
TextBox1.value +=this.value;
});
}

</script>

<input id="TextBox1">
<button value="1" id="Button">#1</button>
<button value="2" id="Button">#2</button>
<script>
var btnArray = document.querySelectorAll("#Button");
var textArray = document.getElementById("TextBox1");
for(var i = 0; i <btnArray.length; i++) {
btnArray[i].addEventListener("click", function() {
textArray.value +=this.value;
});
}
</script>
<input id="TextBox">
<button id="btn1">#1</button>
<button id="btn2">#2</button>
<script type='text/javascript'>
var btnArray = new Array(btn1,btn2);
var textArray = ["TEXT1","TEXT2"];
for (var i = 0; i < textArray.length; i++){
btnArray[i].addEventListener("click",expandInfo,true);
function expandInfo(e){
TextBox.value = textArray[btnArray.indexOf(e.target)];
}
}
</script>
 -------------------------------------------------------------------------------------------------------------------
SHUFFLE  A3 ARRAY CODE CHANGE INTO JAVASCRIPT BY ESPRIMA SYNTAX
---------------------------------------------------------------------------------------------------------------
<!-- https://www.youtube.com/watch?v=CTc2vu7Adnk -->
<!-- http://textuploader.com/6cxa -->
<DIV id="TextBox1"></DIV>
<script>
var MovieArray = new Array("MOVIE1","MOVIE2","MOVIE3");
for (var i = 0; i < MovieArray.length;  i++) {
var RandomNumber = Math.floor(Math.random()* MovieArray.length)
var MoviePosX = MovieArray[RandomNumber]
var MoviePosY= MovieArray[RandomNumber]
MovieArray[RandomNumber] = MovieArray[i]
MovieArray[RandomNumber] = MovieArray[i]
MovieArray[i] = MoviePosX
MovieArray[i] = MoviePosY
}
TextBox1.innerHTML += MovieArray
</script>
---------------------------------------------------------------------------------------------------------------
FLASH AS3 MATCHING GAME CHANGE  INTO JAVA GAME
ReadMore:
https://flashcollege.blogspot.co.uk/2016/03/wilson-as3-card-matching-game-without.html
FOR RANDOM CODE WE USE CONTAINER CODE IN HTML
AND CONTAINER APPEND CHILD RANDOM CODE USE IN JAVA SCRIPT
http://fbgadgets.blogspot.com/2017/08/get-button-id-after-click-in-java-script.html
HOW TO MAKE HTML CODE FOR GAME
<p id="innerHTML"></p>
<script>
for (var FOR = 1; FOR < 11; FOR++) {
innerHTML.innerHTML +="<button"+" "+"id="+"Q"+FOR+">"+FOR+"</button>";
}

</script>
----------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------
AS3 GAME SHORT CODE WITHOUT RANDOM
https://fbgadgets.blogspot.com/2017/08/get-button-id-after-click-in-java-script.html
-----------------------------------------------------------------------------------------------------------------
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>

<script>

var bCards=[btn1,btn2,btn3,btn4];

var indexNum2;
var clicked1Time = false;

for(var i = 0; i < bCards.length; i++){
bCards[i].addEventListener("click",openCard,true);
}

function openCard(e){

e.target.style.visibility = "hidden";
Math.floor(bCards.indexOf(e.target)/2);

if(clicked1Time == false){
clicked1Time = true;
indexNum2 = Math.floor(bCards.indexOf(e.target)/2);
}

else{

for(var i= 0; i < bCards.length; i++){
bCards[i].removeEventListener("click",openCard,true);
}

clicked1Time = false;

if(Math.floor(bCards.indexOf(e.target)/2) == indexNum2){
for(var i= 0; i< bCards.length; i++){
bCards[i].addEventListener("click",openCard,true);
}}


else{

for(var i = 0;< bCards.length; i++){
bCards[i].addEventListener("click",openCard,true);
}

bCards[Math.floor(Math.floor(bCards.indexOf(e.target)/2)*2)].style.visibility = "visible";
bCards[Math.floor(Math.floor(bCards.indexOf(e.target)/2)*2) + 1].style.visibility = "visible";
bCards[Math.floor(indexNum2*2)].style.visibility = "visible";
bCards[Math.floor(indexNum2*2) + 1].style.visibility = "visible";

}


}

}

</script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
<html>
<body>
<div id="container">
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
</div>
<script>
var bCards = new Array(btn1,btn2,btn3,btn4);
var indexNum;
var indexNum2;
var clicked1Time = false;
for(var j = 0; j < bCards.length; j++){
bCards[j].addEventListener("click",openCard,true);
}
function openCard(e){
e.target.style.visibility = "hidden";
indexNum = Math.floor(bCards.indexOf(e.target)/2);
if(clicked1Time == false){
clicked1Time = true;
indexNum2 = indexNum;
}
else{
for(var j= 0; j < bCards.length; j++){
bCards[j].removeEventListener("click",openCard,true);
}
clicked1Time = false;
if(indexNum == indexNum2){
for(var k= 0; k < bCards.length; k++){
bCards[k].addEventListener("click",openCard,true);
}}
else{
for(var m = 0; m < bCards.length; m++){
bCards[m].addEventListener("click",openCard,true);
}
bCards[Math.floor(indexNum*2)].style.visibility = "visible";
bCards[Math.floor(indexNum*2) + 1].style.visibility = "visible";
bCards[Math.floor(indexNum2*2)].style.visibility = "visible";
bCards[Math.floor(indexNum2*2) + 1].style.visibility = "visible";
}}}
//FOR RANDOM SHUFFLE BUTTON CODE
//http://fbgadgets.blogspot.com/2017/08/get-button-id-after-click-in-java-script.html
for (var i = container.children.length; i >= 0; i--) {
container.appendChild(container.children[Math.random() * i | 0]);
}
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
OR BUTTON MATCHING GAME WITH CSS HTML JAVASCRIPT
https://www.w3schools.com/code/tryit.asp?filename=FXH9W5FU0FOQ
-------------------------------------------------------------------------------------------------------------------
<html>
<!-- http://www.sjsu.edu/writingcenter/docs/Contractions.pdf -->
<body>
<body>
<style>
body{
width:1420px;
}
button {
border: green 3px solid;
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#container1{
position:relative;
float:left;
height:900px;
width:632px;
background:red;
}
#container2{
position:relative;
float:right;
height:900px;
width:632px;
background:yellow;
}
div#TextBox1 {
background-color: coral;
color: blueviolet;
text-align: center;
font:20px bold;
display: block;
}
</style>
<div id="container1">
<button id="Q1">aren't</button>
<button id="Q2">can't</button>
<button id="Q3">couldn't</button>
<button id="Q4">didn't</button>
<button id="Q5">doesn't</button>
<button id="Q6">don't</button>
<button id="Q7">hadn't</button>
<button id="Q8">hasn't</button>
<button id="Q9">haven't</button>
<button id="Q10">he'd</button>
<button id="Q11">he'll</button>
<button id="Q12">he's</button>
<button id="Q13">I'd</button>
<button id="Q14">I'll</button>
<button id="Q15">I'm</button>
<button id="Q16">I've</button>
<button id="Q17">isn't</button>
<button id="Q18">let's</button>
<button id="Q19">mightn't</button>
<button id="Q20">mustn't</button>
<button id="Q21">shan't</button>
<button id="Q22">she'd</button>
<button id="Q23">she'll</button>
<button id="Q24">she's</button>
<button id="Q25">shouldn't</button>
<button id="Q26">that's</button>
<button id="Q27">there's</button>
<button id="Q28">they'd</button>
<button id="Q29">they'll </button>
<button id="Q30">they're</button>
<button id="Q31">they've</button>
<button id="Q32">we'd</button>
<button id="Q33">we're</button>
<button id="Q34">we've</button>
<button id="Q35">weren't</button>
<button id="Q36">what'll </button>
<button id="Q37">what're</button>
<button id="Q38">what's</button>
<button id="Q39">what've</button>
<button id="Q40">where's</button>
<button id="Q41">who's</button>
<button id="Q42">who'll</button>
<button id="Q43">who're</button>
<button id="Q44">who've</button>
<button id="Q45">won't</button>
<button id="Q46">wouldn't</button>
<button id="Q47">you'd</button>
<button id="Q48">you'll</button>
<button id="Q49">you're</button>
<button id="Q50">you've</button>
<button id="Q51">gonna</button>
<button id="Q52">gotta</button>
<button id="Q53">gimme</button>
<button id="Q54">e'er</button>
<button id="Q55">ma'am</button>
</div>
<div id="container2">
<button id="A1">are not</button>
<button id="A2">cannot</button>
<button id="A3">could not</button>
<button id="A4">did not</button>
<button id="A5">does not</button>
<button id="A6">do not</button>
<button id="A7">had not</button>
<button id="A8">has not</button>
<button id="A9">have not</button>
<button id="A10">he had; he would</button>
<button id="A11">he will; he shall</button>
<button id="A12">he is; he has</button>
<button id="A13">I had; I would</button>
<button id="A14">I will; I shall</button>
<button id="A15">I am</button>
<button id="A16">I have</button>
<button id="A17">is not</button>
<button id="A18">let us</button>
<button id="A19">might not</button>
<button id="A20">must not</button>
<button id="A21">shall not</button>
<button id="A22">she had; she would</button>
<button id="A23">she will; she shall</button>
<button id="A24">she is; she has</button>
<button id="A25">should not</button>
<button id="A26">that is; that has</button>
<button id="A27">there is; there has</button>
<button id="A28">they had; they would</button>
<button id="A29">they will; they shall</button>
<button id="A30">they are</button>
<button id="A31">they have</button>
<button id="A32">we had; we would</button>
<button id="A33">we are</button>
<button id="A34">we have</button>
<button id="A35">were not</button>
<button id="A36">what will; what shall</button>
<button id="A37">what are</button>
<button id="A38">what is; what has</button>
<button id="A39">what have</button>
<button id="A40">where is; where has</button>
<button id="A41">who is; who has</button>
<button id="A42">who will; who shall</button>
<button id="A43">who are</button>
<button id="A44">who have</button>
<button id="A45">will not</button>
<button id="A46">would not</button>
<button id="A47">you had; you would</button>
<button id="A48">you will; you shall</button>
<button id="A49">you are</button>
<button id="A50">you have</button>
<button id="A51">going to</button>
<button id="A52">got to</button>
<button id="A53">give me</button>
<button id="A54">ever</button>
<button id="A55">madam</button>
</div>
<div id="TextBox1"></div>
<button id="Btn1">SHUFFLE</button>
<script>
for (var i = container1.children.length; i >= 0; i--) {
container1.appendChild(container1.children[Math.random() * i | 0]);
}
for (var i = container2.children.length; i >= 0; i--) {
container2.appendChild(container2.children[Math.random() * i | 0]);
}
var Array = [
Q1,A1,Q2,A2,Q3,A3,Q4,A4,Q5,A5,Q6,A6,Q7,A7,Q8,A8,Q9,A9,Q10,A10,Q11,A11,Q12,A12,Q13,A13,Q14,A14,Q15,A15,
Q16,A16,Q17,A17,Q18,A18,Q19,A19,Q20,A20,Q21,A21,Q22,A22,Q23,A23,Q24,A24,Q25,A25,Q26,A26,Q27,A27,Q28,A28,Q29,A29,Q30,A30,
Q31,A31,Q32,A32,Q33,A33,Q34,A34,Q35,A35,Q36,A36,Q37,A37,Q38,A38,Q39,A39,Q40,A40,Q41,A41,Q42,A42,Q43,A43,Q44,A44,Q45,A45,
Q46,A46,Q47,A47,Q48,A48,Q49,A49,Q50,A50,Q51,A51,Q52,A52,Q53,A53,Q54,A54,Q55,A55,
];
var indexNum;
var indexNum2;
var clicked1Time = false;
for(var j = 0; j < Array.length; j++){
Array[j].addEventListener("click",openCard,true);
}
function openCard(e){
TextBox1.innerHTML = this.innerHTML ;
e.target.style.visibility = "hidden";
indexNum = Math.floor(Array.indexOf(e.target)/2);
if(clicked1Time == false){
clicked1Time = true;
indexNum2 = indexNum;
}
else{
for(var j= 0; j < Array.length; j++){
Array[j].removeEventListener("click",openCard,true);
}
clicked1Time = false;
if(indexNum == indexNum2){
for(var k= 0; k < Array.length; k++){
Array[k].addEventListener("click",openCard,true);
}}
else{
for(var m = 0; m < Array.length; m++){
Array[m].addEventListener("click",openCard,true);
}
Array[Math.floor(indexNum*2)].style.visibility = "visible";
Array[Math.floor(indexNum*2) + 1].style.visibility = "visible";
Array[Math.floor(indexNum2*2)].style.visibility = "visible";
Array[Math.floor(indexNum2*2) + 1].style.visibility = "visible";
}}}

Btn1.onclick = function(){
for (var i = container1.children.length; i >= 0; i--) {
container1.appendChild(container1.children[Math.random() * i | 0]);
}
for (var i = container2.children.length; i >= 0; i--) {
container2.appendChild(container2.children[Math.random() * i | 0]);
}
}

</script>
</body>
<html>


--------------------------------------------------------------------------------------------------------------------


0 comments:

Post a Comment

FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets