Sunday 17 May 2020

SIMPLE MATCH GAME JAVA SCRIPT


--------------------------------------------------------------------------------------------------------------------------
SIMPLE MATCH GAME JAVA SCRIPT
WHEN FIRST CLICK NOT EQUAL TO EVENT TARGET ❗==

 
firstClickedTile❗== event.target

Read More:
http://fbgadgets.blogspot.com/2017/09/flash-code-change-into-javascript.html
https://docs.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-windows-forms-match-game-labels?view=vs-2022
--------------------------------------------------------------------------------------------------------------------------

 <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;
}
</style>


</head>


<body>


<div id="TextBox1"></div>


<button>A</button>
<button>A</button>
<button>B</button>
<button>B</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 == undefined) {
firstClickedTile = event.target;
}

else if (firstClickedTile!== event.target) {

secondClickedTile = event.target;
TextBox1.innerHTML = "TryAgain";

if (firstClickedTile.innerHTML == secondClickedTile.innerHTML) {
TextBox1.innerHTML = "Good Job";
}

function setTimeout(){
firstClickedTile = undefined;
}
setTimeout(400);

}

}
</script>
</body>
</html>

--------------------------------------------------------------------------------------------------------------------------
CHANGE  ABOVE QUERY SELECTOR ARRAY  IN BUTTON ARRAY
--------------------------------------------------------------------------------------------------------------------------
<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;
}
</style>

</head>

<body>

<div id="TextBox1"></div>

<button id="btn1">A</button>
<button id="btn2">A</button>
<button id="btn3">B</button>
<button id="btn4">B</button>
<script>

var firstClickedTile;
var secondClickedTile;

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

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

function MatchingFunction(event) {

if (firstClickedTile == undefined) {
firstClickedTile = event.target;
}

else if (firstClickedTile!== event.target) {

secondClickedTile = event.target;
TextBox1.innerHTML = "TryAgain";

if (firstClickedTile.innerHTML == secondClickedTile.innerHTML) {
TextBox1.innerHTML = "Good Job";
}

function setTimeout(){
firstClickedTile = undefined;
}
setTimeout(400);

}

}
</script>
</body>
</html>
​
--------------------------------------------------------------------------------------------------------------------------
SIMPLE MATCH GAME JAVA SCRIPT
ALSO CHANGE THIS LINE 
else if (firstClickedTile!== event.target){
OR
else if (firstClickedTile) {
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);      
}

http://fbgadgets.blogspot.com/2017/09/flash-code-change-into-javascript.html
 --------------------------------------------------------------------------------------------------------------------------
<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!==secondClickedTile) {
secondClickedTile = event.target;
TextBox1.innerHTML = "TryAgain";
if (firstClickedTile.id == secondClickedTile.id) {
firstClickedTile.classList.add("matched");
secondClickedTile.classList.add("matched");
TextBox1.innerHTML = "Good Job";
}
alert(event.target.id); //CONSOLE ID 
​
function setTimeout(){
firstClickedTile = undefined;
}
setTimeout(400);
}
}
</script>
</body>
</html>
------------------------------------------------------------------------------
read more:
https://stackoverflow.com/questions/49633134/js-comparing-innerhtml
------------------------------------------------------------------------------
<!-- https://stackoverflow.com/questions/49633134/js-comparing-innerhtml -->
<!-- FIND function openCard(e){ -->
<div id="gameDeck">
<button>One</button>
<button>One</button>
<button>Two</button>
<button>Two</button>
</div>
<div id="TextBox1"></div>
<script>
gameDeck.addEventListener("click", function(e) {
e.preventDefault();
const pick = e.target;
addCards(pick)
})
let pick1, pick2;
function addCards(openCard){
if (!pick1) {
pick1 = openCard;
} else if (!pick2) {
pick2 = openCard
console.log(pick1)
console.log(pick2)
if (pick1.innerHTML == pick2.innerHTML) {
match();
} else {
reset();
}
}
}
function match() {
alert("They match");
}
function reset() {
alert("They don't match");
}
</script>
</body>
</html>
------------------------------------------------------------------------------
find this
gameDeck.addEventListener("click", function(e) {
Read more:
https://jsfiddle.net/JayS5/qmcuobdh/13/
--------------------------------------------------------------------------
<html>
<head>
<!-- https://jsfiddle.net/JayS5/qmcuobdh/13/ -->
<title></title>
<style id="compiled-css" type="text/css">
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
/*
* Styles for the deck of cards
*/
.deck {
width: 660px;
min-height: 680px;
padding: 32px;
border-radius: 10px;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 3em;
}
.deck .card {
height: 125px;
width: 125px;
background: forestgreen;
font-size: 0;
color: #ffffff;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.deck .card.open {
transform: rotateY(0);
background: tan;
cursor: default;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: purple;
font-size: 33px;
}
.score-panel .restart {
float: right;
cursor: pointer;
}
/* EOS */
</style>
<script id="insert"></script>
</head>
<body>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="container">
<header>
<h1>Match The Cards</h1>
</header>
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
<ul class="deck">
</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>
<script type="text/javascript">//<![CDATA[
/*
* Create a list that holds all of your cards
*/
cards = ['fa-diamond', 'fa-diamond',
'fa-paper-plane','fa-paper-plane',
'fa-anchor','fa-anchor',
'fa-bolt','fa-bolt',
'fa-cube', 'fa-cube',
'fa-bomb','fa-bomb',
'fa-leaf','fa-leaf',
'fa-bicycle','fa-bicycle'];
function initGame() {
// shuffle the array
const shuffledCards = shuffle(cards);
// generates each li
function generateCardHTML(card) {
return `<li class="card" data-card=${card}><i class="fa ${card}"></i></li>`
};
function createHTML(){
let deck = "";
shuffledCards.forEach(function(card) {
const genHTML = generateCardHTML(card);
deck += genHTML;
})
return deck;
};
return createHTML();
};
// Selects the deck div to add all the cards, initialise the game
const gameDeck = document.querySelector('.deck');
gameDeck.innerHTML = initGame();
const cardDeck = document.querySelectorAll('.card');
openCards = [];
cardDeck.forEach(function(card){
card.addEventListener('click', function(e){
card.classList.add('open', 'show');
openingCards(card);
});
});
function openingCards(targetCard){
if (targetCard.matches('.open.show')){
openCards.push(targetCard);
if (openCards.length == 2) {
if (openCards[0].dataset.card == openCards[1].dataset.card) {
openCards[0].classList.add("match");
openCards[1].classList.add("match");
};
setTimeout(function() {
openCards.forEach(function(card){
card.classList.remove('open','show');
})
openCards = [];
}, 1000);
}
}
};
// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// Code to select restart button and reinitialise the game
const restartBtn = document.querySelector(".fa-repeat");
restartBtn.addEventListener('click',function(e){
// e.preventDefault();
console.log("Restart")
gameDeck.innerHTML = initGame();
});
//]]></script>
</body>
</html>


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


Posted by on Sunday 17 May 2020 at 06:33
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

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