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>


--------------------------------------
<!DOCTYPE html>
<html>
<head>
    <title>Simple Matching Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f8ff;
            padding: 20px;
        }
        .game-board {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            max-width: 500px;
            margin: 20px auto;
        }
        .card {
            width: 80px;
            height: 80px;
            background-color: white;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: all 0.3s;
        }
        .hidden {
            display: none;
        }
        h1 {
            color: #2196F3;
        }
    </style>
</head>
<body>
    <h1>Letter-Picture Matching Game</h1>
    <p>Click a letter and its matching picture to make them disappear</p>
    
    <div class="game-board" id="gameBoard"></div>

    <script>
        // Game items
        const items = [
            { letter: "A", picture: "🍎" },
            { letter: "B", picture: "🏀" },
            { letter: "C", picture: "🐱" },
            { letter: "D", picture: "🐕" }
        ];

        let firstCard = null;
        const gameBoard = document.getElementById('gameBoard');

        // Create cards
        function createCards() {
            gameBoard.innerHTML = '';
            
            // Create letter cards
            items.forEach(item => {
                const card = document.createElement('div');
                card.className = 'card';
                card.textContent = item.letter;
                card.dataset.type = 'letter';
                card.dataset.value = item.letter;
                card.addEventListener('click', handleClick);
                gameBoard.appendChild(card);
            });
            
            // Create picture cards
            items.forEach(item => {
                const card = document.createElement('div');
                card.className = 'card';
                card.textContent = item.picture;
                card.dataset.type = 'picture';
                card.dataset.value = item.letter;
                card.addEventListener('click', handleClick);
                gameBoard.appendChild(card);
            });
            
            // Shuffle cards
            for (let i = gameBoard.children.length; i >= 0; i--) {
                gameBoard.appendChild(gameBoard.children[Math.random() * i | 0]);
            }
        }

        // Handle card clicks
        function handleClick() {
            if (this.classList.contains('hidden')) return;
            
            if (!firstCard) {
                // Select first card
                firstCard = this;
                this.style.backgroundColor = "#ffeb3b";
            } else {
                // Select second card
                if (firstCard.dataset.value === this.dataset.value && 
                    firstCard.dataset.type !== this.dataset.type) {
                    // Match found!
                    firstCard.classList.add('hidden');
                    this.classList.add('hidden');
                }
                
                // Reset selection
                firstCard.style.backgroundColor = "white";
                firstCard = null;
            }
        }

        // Start the game
        createCards();
    </script>
</body>
</html>
-------------------------------------


Related Post for SIMPLE MATCH GAME JAVA SCRIPT

  • SIMPLE MATCH GAME JAVA SCRIPT -------------------------------------------------------------------------------------------------------------------------- SIMPLE MATCH GAME JAVA SCRIPT WHEN FIRST CLICK NOT …
  • JAVA SCRIPT BOOKS ONLINE ---------------------------------------------------------------------------------------------------------------------JAVA SCRIPT BOOKS ONLINERead More:https://livebook.mannin…
Posted by on Sunday, 17 May 2020 at 06:33
Labels:

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

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