-------------------------------------------------------------------------------------------------------------------
IN THIS CODE I REMOVE SHUFFLE EFFECT
--------------------------------------------------------------------------------------------------------------------
var fCards:Array = new Array(btn1,btn2,btn3,btn4);
var bCards:Array = new Array(btn1,btn2,btn3,btn4);
var indexNum:Number;
var indexNum2:Number;
var clicked1Time:Boolean = false;
for(var j:int = 0; j < bCards.length; j++){
bCards[j].addEventListener(MouseEvent.CLICK, openCard);
}
function openCard(e:MouseEvent):void{
e.target.visible = false;
indexNum = Math.floor(bCards.indexOf(e.target)/2);
if(clicked1Time == false){
clicked1Time = true;
indexNum2 = indexNum;
}
else{
for(var j:int = 0; j < bCards.length; j++){
bCards[j].removeEventListener(MouseEvent.CLICK, openCard);
}
clicked1Time = false;
if(indexNum == indexNum2){
for(var k:int = 0; k < bCards.length; k++){
bCards[k].addEventListener(MouseEvent.CLICK, openCard);
}
fCards[Math.floor(indexNum*2)].visible = false;
fCards[Math.floor(indexNum*2) + 1].visible = false;
}
else{
for(var m:int = 0; m < bCards.length; m++){
bCards[m].addEventListener(MouseEvent.CLICK, openCard);
}
bCards[Math.floor(indexNum*2)].visible = true;
bCards[Math.floor(indexNum*2) + 1].visible = true;
bCards[Math.floor(indexNum2*2)].visible = true;
bCards[Math.floor(indexNum2*2) + 1].visible = true;
}
}}
------------------------------------------------------------------------------------------------------------------
REMOVE F CARD LINE TO SHORT CODE
------------------------------------------------------------------------------------------------------------------
var bCards:Array = new Array(btn1,btn2,btn3,btn4);
var indexNum:Number;
var indexNum2:Number;
var clicked1Time:Boolean = false;
for(var j:int = 0; j < bCards.length; j++){
bCards[j].addEventListener(MouseEvent.CLICK, openCard);
}
function openCard(e:MouseEvent):void{
e.target.visible = false;
indexNum = Math.floor(bCards.indexOf(e.target)/2);
if(clicked1Time == false){
clicked1Time = true;
indexNum2 = indexNum;
}
else{
for(var j:int = 0; j < bCards.length; j++){
bCards[j].removeEventListener(MouseEvent.CLICK, openCard);
}
clicked1Time = false;
if(indexNum == indexNum2){
for(var k:int = 0; k < bCards.length; k++){
bCards[k].addEventListener(MouseEvent.CLICK, openCard);
}}
else{
for(var m:int = 0; m < bCards.length; m++){
bCards[m].addEventListener(MouseEvent.CLICK, openCard);
}
bCards[Math.floor(indexNum*2)].visible = true;
bCards[Math.floor(indexNum*2) + 1].visible = true;
bCards[Math.floor(indexNum2*2)].visible = true;
bCards[Math.floor(indexNum2*2) + 1].visible = true;
}}}
-----------------------------------------------------------------------------------------------------
ACTION SCRIPT TO JAVA SCRIPT
http://esprima.org/demo/validate.html
-----------------------------------------------------------------------------------------------------
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)].visible = true;
bCards[Math.floor(indexNum*2) + 1].visible = true;
bCards[Math.floor(indexNum2*2)].visible = true;
bCards[Math.floor(indexNum2*2) + 1].visible = true;
}}}
-------------------------------------------------------------------------------------------------------
FULL CODE:
-------------------------------------------------------------------------------------------------------
<html>
<body>
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
<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";
}}}
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------
BUTTON MATCHING GAME IN JAVA SCRIPT
---------------------------------------------------------------------------------------------------------
<html>
<!-- http://www.sjsu.edu/writingcenter/docs/Contractions.pdf -->
<body>
<style>
button {
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;
}
</style>
<button id="Btn1">SHUFFLE</button>
<div id="container">
<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>
<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>
<script>
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);
container.appendChild(Array[Math.floor(Math.random()* Array.length)]);
}
function openCard(e){
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(){
container.appendChild(Array[Math.floor(Math.random()* Array.length)]);
}
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------
REMOVE F CARD LINE TO SHORT CODE
------------------------------------------------------------------------------------------------------------------
var bCards:Array = new Array(btn1,btn2,btn3,btn4);
var indexNum:Number;
var indexNum2:Number;
var clicked1Time:Boolean = false;
for(var j:int = 0; j < bCards.length; j++){
bCards[j].addEventListener(MouseEvent.CLICK, openCard);
}
function openCard(e:MouseEvent):void{
e.target.visible = false;
indexNum = Math.floor(bCards.indexOf(e.target)/2);
if(clicked1Time == false){
clicked1Time = true;
indexNum2 = indexNum;
}
else{
for(var j:int = 0; j < bCards.length; j++){
bCards[j].removeEventListener(MouseEvent.CLICK, openCard);
}
clicked1Time = false;
if(indexNum == indexNum2){
for(var k:int = 0; k < bCards.length; k++){
bCards[k].addEventListener(MouseEvent.CLICK, openCard);
}}
else{
for(var m:int = 0; m < bCards.length; m++){
bCards[m].addEventListener(MouseEvent.CLICK, openCard);
}
bCards[Math.floor(indexNum*2)].visible = true;
bCards[Math.floor(indexNum*2) + 1].visible = true;
bCards[Math.floor(indexNum2*2)].visible = true;
bCards[Math.floor(indexNum2*2) + 1].visible = true;
}}}
ACTION SCRIPT TO JAVA SCRIPT
http://esprima.org/demo/validate.html
-----------------------------------------------------------------------------------------------------
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)].visible = true;
bCards[Math.floor(indexNum*2) + 1].visible = true;
bCards[Math.floor(indexNum2*2)].visible = true;
bCards[Math.floor(indexNum2*2) + 1].visible = true;
}}}
-------------------------------------------------------------------------------------------------------
FULL CODE:
-------------------------------------------------------------------------------------------------------
<html>
<body>
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
<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";
}}}
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------
BUTTON MATCHING GAME IN JAVA SCRIPT
---------------------------------------------------------------------------------------------------------
<html>
<!-- http://www.sjsu.edu/writingcenter/docs/Contractions.pdf -->
<body>
<style>
button {
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;
}
</style>
<button id="Btn1">SHUFFLE</button>
<div id="container">
<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>
<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>
<script>
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);
container.appendChild(Array[Math.floor(Math.random()* Array.length)]);
}
function openCard(e){
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(){
container.appendChild(Array[Math.floor(Math.random()* Array.length)]);
}
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------
EmoticonEmoticon